├── .gitignore
├── LICENSE
├── README.md
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    ├── index.html
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── robots.txt
├── react-clock.png
└── src
    ├── App.css
    ├── App.js
    ├── components
        ├── Clock.jsx
        ├── Countdown.jsx
        ├── Number.jsx
        └── Word.jsx
    ├── fonts
        └── digital-7.ttf
    └── index.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Sergio Soriano
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-clock
2 |  :hourglass_flowing_sand: A simple test of a digital clock in react
3 |   
4 |  <h3><a href="https://sergiss.github.io/react-clock/" target="_blank">Demo</a></h3>
5 | 
6 | ![React Clock](https://github.com/sergiss/react-clock/blob/master/react-clock.png?raw=true)
7 | 
8 | www.sergiosoriano.com
9 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-clock",
 3 |   "homepage":"https://sergiss.github.io/react-clock",
 4 |   "version": "0.1.0",
 5 |   "private": true,
 6 |   "dependencies": {
 7 |     "@testing-library/jest-dom": "^5.16.4",
 8 |     "@testing-library/react": "^13.2.0",
 9 |     "@testing-library/user-event": "^13.5.0",
10 |     "react": "^18.1.0",
11 |     "react-dom": "^18.1.0",
12 |     "react-scripts": "5.0.1",
13 |     "web-vitals": "^2.1.4"
14 |   },
15 |   "scripts": {
16 |     "predeply": "npm run build",
17 |     "deploy": "gh-pages -d build",
18 |     "start": "react-scripts start",
19 |     "build": "react-scripts build",
20 |     "test": "react-scripts test",
21 |     "eject": "react-scripts eject"
22 |   },
23 |   "eslintConfig": {
24 |     "extends": [
25 |       "react-app",
26 |       "react-app/jest"
27 |     ]
28 |   },
29 |   "browserslist": {
30 |     "production": [
31 |       ">0.2%",
32 |       "not dead",
33 |       "not op_mini all"
34 |     ],
35 |     "development": [
36 |       "last 1 chrome version",
37 |       "last 1 firefox version",
38 |       "last 1 safari version"
39 |     ]
40 |   },
41 |   "devDependencies": {
42 |     "gh-pages": "^4.0.0"
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sergiss/react-clock/54089294443c89c9f53fa43875321ab08514d157/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
28 |     <title>React App</title>
29 |   </head>
30 |   <body>
31 |     <noscript>You need to enable JavaScript to run this app.</noscript>
32 |     <div id="root"></div>
33 |     <!--
34 |       This HTML file is a template.
35 |       If you open it directly in the browser, you will see an empty page.
36 | 
37 |       You can add webfonts, meta tags, or analytics to this file.
38 |       The build step will place the bundled scripts into the <body> tag.
39 | 
40 |       To begin the development, run `npm start` or `yarn start`.
41 |       To create a production bundle, use `npm run build` or `yarn build`.
42 |     -->
43 |   </body>
44 | </html>
45 | 


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sergiss/react-clock/54089294443c89c9f53fa43875321ab08514d157/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sergiss/react-clock/54089294443c89c9f53fa43875321ab08514d157/public/logo512.png


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/react-clock.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sergiss/react-clock/54089294443c89c9f53fa43875321ab08514d157/react-clock.png


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
  1 | @font-face {
  2 |   font-family: 'Digital-7';
  3 |   src: url(./fonts/digital-7.ttf) format('truetype');
  4 | }
  5 | 
  6 | body {
  7 |   background: #e4e4e4;
  8 |   display: flex;
  9 |   flex-direction: column;
 10 |   align-items: center;
 11 |   justify-content: center;
 12 | }
 13 | 
 14 | .clock {
 15 |   margin: 10px;
 16 |   border-radius: 10px;
 17 |   background: #0d1621;
 18 |   display: flex;
 19 |   flex-direction: column;
 20 |   align-items: center;
 21 |   overflow: hidden;
 22 |   padding: 20px 20px 5px 20px;
 23 | }
 24 | 
 25 | .calendar {
 26 |   font-size: 2rem;
 27 |   display: flex;
 28 |   flex-direction: row;
 29 |   align-items: center;
 30 |   justify-content: center;
 31 |   gap: 33px;
 32 |   padding: 0 10px;
 33 |   padding-top: 10px;
 34 | }
 35 | 
 36 | .row {
 37 |   display: flex;
 38 |   flex-direction: row;
 39 |   gap: 10px;
 40 | }
 41 | 
 42 | .countdown {
 43 |   font-size: 7rem;
 44 | }
 45 | 
 46 | .hour {
 47 |   flex: 1;
 48 |   font-size: 7rem;
 49 |   margin: 0;
 50 |   padding: 0;
 51 |   top: 0;
 52 | }
 53 | 
 54 | .ampm {
 55 |   align-self: flex-end;
 56 |   font-size: 2.5rem;
 57 |   display: flex;
 58 |   gap: 10px;
 59 |   margin-bottom: 25px;
 60 | }
 61 | 
 62 | .digital {
 63 |   display: inline-block;
 64 |   position: relative;
 65 |   font-family: 'Digital-7';
 66 | }
 67 | 
 68 | .digital :first-child {
 69 |   width: 100%;
 70 |   position: absolute;
 71 |   color: #242a32;
 72 | }
 73 | 
 74 | .digital :last-child {
 75 |   position: relative;
 76 |   color: #ebebeb;
 77 | }
 78 | 
 79 | .digital p {
 80 |   margin: 0;
 81 | }
 82 | 
 83 | button {
 84 |   font-size: 1.2rem;
 85 |   border-radius:5px;
 86 |   padding: 10px;
 87 |   margin-bottom: 10px;
 88 | }
 89 | 
 90 | .fa {
 91 |   margin-left: 15px;
 92 |   font-size: 1.1rem;
 93 | }
 94 | 
 95 | a {
 96 |   font-size: 1.1rem;
 97 |   text-decoration: none;
 98 | }
 99 | 
100 | .message {
101 |   background:#da9090;
102 |   border: 2px solid rgb(255, 115, 0);
103 |   border-radius: 5px;
104 |   padding: 10px;
105 |   margin: 10px;
106 |   font-size: 1.5rem;
107 |   font-family: monospace, Arial, Helvetica, sans-serif;
108 |   text-align: center;
109 | }
110 | 
111 | @media (max-width: 770px) {
112 | 
113 |   .calendar, .ampm {
114 |     font-size: 0.7rem;
115 |   }
116 | 
117 |   .hour {
118 |     font-size: 4rem;
119 |   }
120 | 
121 |   .clock {
122 |     padding: 5px;
123 |   }
124 | 
125 |   .countdown {
126 |     font-size: 4rem;
127 |   }
128 |   
129 | }


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import { useState } from 'react';
 3 | import './App.css';
 4 | import { Clock } from './components/Clock';
 5 | import { Countdown } from './components/Countdown';
 6 | 
 7 | function App() {
 8 | 
 9 |   const [message, setMessage] = useState(null);
10 | 
11 |   return (
12 |     <>
13 |       <Clock />
14 |       <Countdown event={e=>setMessage("The world has been destroyed! :(")}/>
15 |       {
16 |         message && (
17 |           <div className='message'>
18 |             {message}
19 |           </div>
20 |         )
21 |       }
22 | 
23 |       <a href="https://github.com/sergiss/react-clock" target="_blank"><i className="fa">&#xf09b;</i> Source Code </a>
24 |     </>
25 |   );
26 | }
27 | 
28 | export default App;
29 | 


--------------------------------------------------------------------------------
/src/components/Clock.jsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  *  2022 Sergi S. - https://github.com/sergiss
 3 |  */
 4 | 
 5 | import React, { useEffect, useState } from 'react'
 6 | import { Number } from './Number'
 7 | import { Word } from './Word';
 8 | 
 9 | const days = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT']; 
10 | 
11 | export const Clock = ({h24=true}) => {
12 | 
13 |     const [hour  , setHour  ] = useState(0);
14 |     const [minute, setMinute] = useState(0);
15 |     const [second, setSecond] = useState(0);
16 |     const [day   , setDay   ] = useState(0);
17 |     const [pm    , setPm    ] = useState(false);
18 | 
19 |     useEffect(()=> {
20 | 
21 |         const update = () => {
22 |             const date = new Date();
23 |             let hour = date.getHours();
24 |             if(!h24) {
25 |                 hour = (hour % 12) || 12;
26 |             }
27 |             setHour(hour);
28 |             setMinute(date.getMinutes());
29 |             setSecond(date.getSeconds());
30 |             setDay(date.getDay());
31 |             setPm(date.getHours() >= 12);
32 |         }
33 | 
34 |         update();
35 | 
36 |         const interval = setInterval(()=> {
37 |             update();
38 |         }, 1000);
39 | 
40 |         return ()=>clearInterval(interval);
41 |     }, []);
42 | 
43 |     return (
44 |         <div className='clock'>
45 |             <div className='calendar'>
46 |                 {
47 |                     days.map((value, index)=>(<Word key={value} value={value} hidden={index != day}/>))
48 |                 }
49 |             </div>
50 |             <div className='row'>
51 |                 <div className='hour'>
52 |                     <Number value={hour}/>
53 |                     <Word value={':'} />
54 |                     <Number value={minute}/>
55 |                     <Word value={':'} />
56 |                     <Number value={second}/>
57 |                 </div>
58 |                 <div className='ampm'>
59 |                     <Word value={'AM'} hidden={ pm} />
60 |                     <Word value={'PM'} hidden={!pm} />
61 |                 </div>
62 |             </div>
63 |         </div>
64 |     )
65 |     
66 | }
67 | 


--------------------------------------------------------------------------------
/src/components/Countdown.jsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  *  2022 Sergi S. - https://github.com/sergiss
 3 |  */
 4 | 
 5 | import React, { useEffect, useState } from 'react'
 6 | import { Number } from './Number'
 7 | import { Word } from './Word'
 8 | 
 9 | export const Countdown = ({tgt = 20000, event}) => {
10 | 
11 |     const [millis , setMillis ] = useState(0);
12 |     const [seconds, setSeconds] = useState(0);
13 |     const [hours  , setHours  ] = useState(0);
14 | 
15 |     const [time, setTime] = useState(tgt);
16 | 
17 |     useEffect(()=> {
18 | 
19 |         const interval = setInterval(()=> {
20 | 
21 |             setTime(time=> {
22 | 
23 |                 if(time <= 0) {
24 |                     clearInterval(interval);
25 |                     setMillis(0);
26 |                     setSeconds(0);
27 |                     setHours(0);
28 |                     event();
29 |                     return 0;
30 |                 } else {
31 |                     setMillis(time % 99);
32 |                     setSeconds(Math.floor((time / 1000) % 60));
33 |                     setHours(Math.floor(time / 1000 / 60));
34 |                     return time - 60;
35 |                 }
36 |                 
37 |             });
38 |         }, 60);
39 | 
40 |         return e => clearInterval(interval);
41 | 
42 |     }, []);
43 | 
44 |     const addTime = ()=> {
45 |         setTime(time + 10000);
46 |     }
47 | 
48 |     return (
49 |         <div className='clock'>
50 | 
51 |             <div className='countdown'>
52 |                 <Number value={hours} />
53 |                 <Word value={':'} />
54 |                 <Number value={seconds} />
55 |                 <Word value={':'} />
56 |                 <Number value={millis} />
57 |             </div>
58 | 
59 |             <button onClick={e=>addTime()}>Press to save the world</button>
60 |        
61 |         </div>
62 |     )
63 | }
64 | 


--------------------------------------------------------------------------------
/src/components/Number.jsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  *  2022 Sergi S. - https://github.com/sergiss
 3 |  */
 4 | 
 5 | import React from 'react'
 6 | 
 7 | export const Number = ({value = 0}) => {
 8 |   const result = String(value).padStart(2, "0");
 9 |   return (
10 |       <div className='digital'>
11 |         <p>88</p>
12 |         <p>{result}</p>
13 |       </div>
14 |   )
15 | }
16 | 


--------------------------------------------------------------------------------
/src/components/Word.jsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  *  2022 Sergi S. - https://github.com/sergiss
 3 |  */
 4 | 
 5 | import React from 'react'
 6 | 
 7 | export const Word = ({ value, hidden = false }) => {
 8 |   const getStyle = ()=> {
 9 |     return {
10 |       visibility:  hidden ? 'hidden' : 'visible'
11 |     }
12 |   }
13 |   return (
14 |     <div className='digital'>
15 |       <p>{value}</p>
16 |       <p style={getStyle()}>{value}</p>
17 |     </div>
18 |   )
19 | }


--------------------------------------------------------------------------------
/src/fonts/digital-7.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sergiss/react-clock/54089294443c89c9f53fa43875321ab08514d157/src/fonts/digital-7.ttf


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | 
 4 | import App from './App';
 5 | 
 6 | const root = ReactDOM.createRoot(document.getElementById('root'));
 7 | root.render(
 8 |   <>
 9 |     <App />
10 |   </>
11 | );


--------------------------------------------------------------------------------