├── .gitignore
├── img
├── night.jpg
├── afternoon.jpg
└── morning.jpg
├── clock.css
├── index.html
└── clock.js
/.gitignore:
--------------------------------------------------------------------------------
1 | .vscode/
--------------------------------------------------------------------------------
/img/night.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/saket-v37/Dynamic_Clock/HEAD/img/night.jpg
--------------------------------------------------------------------------------
/img/afternoon.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/saket-v37/Dynamic_Clock/HEAD/img/afternoon.jpg
--------------------------------------------------------------------------------
/img/morning.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/saket-v37/Dynamic_Clock/HEAD/img/morning.jpg
--------------------------------------------------------------------------------
/clock.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | margin: 0;
4 | padding: 0;
5 | }
6 |
7 | body {
8 | font-family: "Quicksand", sans-serif;
9 | display: flex;
10 | flex-direction: column;
11 | align-items: center;
12 | justify-content: center;
13 | text-align: center;
14 | height: 100vh;
15 | color: black;
16 | }
17 |
18 | #time {
19 | font-size: 8rem;
20 | }
21 |
22 | h1 {
23 | margin-bottom: 3rem;
24 | }
25 |
26 | h2 {
27 | margin-bottom: 0.5rem;
28 | opacity: 0.6;
29 | }
30 |
31 | @media (max-width: 700px) {
32 | #time {
33 | font-size: 6rem;
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | Dynamic Clock
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | What Is Your Focus For Today?
21 |
22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/clock.js:
--------------------------------------------------------------------------------
1 | // Dom Element Selection
2 | const time = document.getElementById('time'),
3 | greeting = document.getElementById('greeting'),
4 | name = document.getElementById('name'),
5 | focus = document.getElementById('focus');
6 |
7 | // Am or Pm
8 | const showAmPm=true;
9 | // show time
10 | function showTime(){
11 | // let today=new Date(2021, 04, 02, 20, 20, 08),
12 | let today=new Date(),
13 | hour=today.getHours(),
14 | min=today.getMinutes(),
15 | sec=today.getSeconds();
16 |
17 | // set Am or Pm
18 | const amPm = hour>=12 ? 'PM' : 'AM';
19 |
20 | // 12 Hours format
21 | hour=hour%12 || 12;
22 |
23 | // output time
24 | time.innerHTML=`${hour}:${addZero(min)}:${addZero(sec)} ${showAmPm ? amPm :''}`;
25 |
26 | setTimeout(showTime, 1000);
27 | }
28 |
29 | // Add Zero
30 | function addZero(n){
31 | return (parseInt(n,10)<10 ? '0':'')+n;
32 | }
33 | // Set Baground and greeting
34 | function setBgGreeting(){
35 | // let today=new Date(2021, 04, 02, 20, 30, 08),
36 | let today=new Date(),
37 | hour=today.getHours();
38 |
39 | if(hour<12){
40 | // Good Morning
41 | document.body.style.backgroundImage="url('img/morning.jpg')";
42 | greeting.textContent='Good Morning';
43 | }
44 | else if(hour<18){
45 | // Good Afternoon
46 | document.body.style.backgroundImage="url('img/afternoon.jpg')";
47 | greeting.textContent='Good Afternoon';
48 | }
49 | else{
50 | // Good Evening
51 | document.body.style.backgroundImage="url('img/night.jpg')";
52 | greeting.textContent='Good Evening';
53 | document.body.style.color='white';
54 | }
55 | }
56 | // Get Name
57 | function getName(){
58 | if(localStorage.getItem('name')===null){
59 | name.textContent='Enter Name';
60 | }
61 | else{
62 | name.textContent=localStorage.getItem('name');
63 | }
64 | }
65 | // Set Name
66 | function setName(e){
67 | if(e.type==='keypress'){
68 | // make sure enter is pressed
69 | if(e.which==13 || e.keyCode==13){
70 | localStorage.setItem('name',e.target.innerText);
71 | name.blur();
72 |
73 | }
74 |
75 | }
76 | else{
77 | localStorage.setItem('name',e.target.innerText);
78 | }
79 | }
80 | // Get Focus
81 | function getFocus(){
82 | if(localStorage.getItem('focus')===null){
83 | focus.textContent='Enter focus';
84 | }
85 | else{
86 | focus.textContent=localStorage.getItem('focus');
87 | }
88 | }
89 | // Set Focus
90 | function setFocus(e){
91 | if(e.type==='keypress'){
92 | // make sure enter is pressed
93 | if(e.which==13 || e.keyCode==13){
94 | localStorage.setItem('focus',e.target.innerText);
95 | focus.blur();
96 |
97 | }
98 |
99 | }
100 | else{
101 | localStorage.setItem('focus',e.target.innerText);
102 | }
103 | }
104 |
105 | name.addEventListener('keypress',setName);
106 | name.addEventListener('blur',setName);
107 | focus.addEventListener('keypress',setFocus);
108 | focus.addEventListener('blur',setFocus);
109 |
110 | // Run
111 | showTime();
112 | setBgGreeting();
113 | getName();
114 | getFocus();
--------------------------------------------------------------------------------