Skip to content

Commit 667faab

Browse files
solygambassolygambas
committed
add theme clock
1 parent 98ae887 commit 667faab

File tree

7 files changed

+252
-0
lines changed

7 files changed

+252
-0
lines changed

‎01-expanding cards/style.css

+1
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ body {
3131
margin: 10px;
3232
position: relative;
3333
transition: flex 0.7s ease-in;
34+
-webkit-transition: all 700ms ease-in;
3435
}
3536

3637
.panel h3 {

‎08-form wave animation/style.css

+1
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ body {
8484
position: absolute;
8585
top: 15px;
8686
left: 0;
87+
pointer-events: none;
8788
}
8889

8990
.form-control label span {

‎14-animated navigation/style.css

+1
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ nav ul {
4444
margin: 0;
4545
width: 0;
4646
transition: width 0.6s linear;
47+
overflow-x: hidden;
4748
}
4849

4950
nav.active ul {

‎16-drink water/script.js

+1
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ const updateBigCup = () => {
2424
};
2525

2626
const highlightCups = (index) => {
27+
if (index === 7 && smallCups[index].classList.contains("full")) index--;
2728
if (
2829
smallCups[index].classList.contains("full") &&
2930
!smallCups[index].nextElementSibling.classList.contains("full")

‎19-theme clock/index.html

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="style.css" />
7+
<title>Theme Clock</title>
8+
</head>
9+
<body>
10+
<button class="toggle">Dark mode</button>
11+
<div class="clock-container">
12+
<div class="clock">
13+
<div class="needle hour"></div>
14+
<div class="needle minute"></div>
15+
<div class="needle second"></div>
16+
<div class="center-point"></div>
17+
</div>
18+
<div class="time"></div>
19+
<div class="date"></div>
20+
</div>
21+
<script src="script.js"></script>
22+
</body>
23+
</html>

‎19-theme clock/script.js

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
const hourElement = document.querySelector(".hour");
2+
const minuteElement = document.querySelector(".minute");
3+
const secondElement = document.querySelector(".second");
4+
const timeElement = document.querySelector(".time");
5+
const dateElement = document.querySelector(".date");
6+
const toggle = document.querySelector(".toggle");
7+
8+
const days = [
9+
"Sunday",
10+
"Monday",
11+
"Tuesday",
12+
"Wednesday",
13+
"Thursday",
14+
"Friday",
15+
"Saturday",
16+
];
17+
const months = [
18+
"Jan",
19+
"Feb",
20+
"Mar",
21+
"Apr",
22+
"May",
23+
"Jun",
24+
"Jul",
25+
"Aug",
26+
"Sep",
27+
"Oct",
28+
"Nov",
29+
"Dec",
30+
];
31+
32+
toggle.addEventListener("click", (e) => {
33+
const html = document.querySelector("html");
34+
if (html.classList.contains("dark")) {
35+
html.classList.remove("dark");
36+
e.target.innerHTML = "Dark mode";
37+
} else {
38+
html.classList.add("dark");
39+
e.target.innerHTML = "Light mode";
40+
}
41+
});
42+
43+
// StackOverflow https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers
44+
const scale = (num, in_min, in_max, out_min, out_max) => {
45+
return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min;
46+
};
47+
48+
const setTime = () => {
49+
const time = new Date();
50+
const date = time.getDate();
51+
const month = time.getMonth();
52+
const day = time.getDay();
53+
const hours = time.getHours();
54+
const hoursForClock = hours >= 13 ? hours % 12 : hours;
55+
const minutes = time.getMinutes();
56+
const seconds = time.getSeconds();
57+
const ampm = hours >= 12 ? "PM" : "AM";
58+
59+
hourElement.style.transform = `translate(-50%, -100%) rotate(${scale(
60+
hoursForClock,
61+
0,
62+
11,
63+
0,
64+
360
65+
)}deg)`;
66+
minuteElement.style.transform = `translate(-50%, -100%) rotate(${scale(
67+
minutes,
68+
0,
69+
59,
70+
0,
71+
360
72+
)}deg)`;
73+
secondElement.style.transform = `translate(-50%, -100%) rotate(${scale(
74+
seconds,
75+
0,
76+
59,
77+
0,
78+
360
79+
)}deg)`;
80+
81+
timeElement.innerHTML = `${hoursForClock}:${
82+
minutes < 10 ? `0${minutes}` : minutes
83+
} ${ampm}`;
84+
dateElement.innerHTML = `${days[day]}, ${months[month]} <span class="circle">${date}</span>`;
85+
};
86+
87+
setTime();
88+
89+
setInterval(setTime, 1000);

‎19-theme clock/style.css

+136
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
@import url("https://fonts.googleapis.com/css?family=Heebo:300&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
:root {
8+
--primary-color: #000;
9+
--secondary-color: #fff;
10+
}
11+
12+
html {
13+
transition: all 0.5s ease-in;
14+
}
15+
16+
html.dark {
17+
--primary-color: #fff;
18+
--secondary-color: #333;
19+
}
20+
21+
html.dark {
22+
background-color: #111;
23+
color: var(--primary-color);
24+
}
25+
26+
body {
27+
font-family: "Heebo", sans-serif;
28+
display: flex;
29+
align-items: center;
30+
justify-content: center;
31+
height: 100vh;
32+
overflow: hidden;
33+
margin: 0;
34+
}
35+
36+
.toggle {
37+
background-color: var(--primary-color);
38+
color: var(--secondary-color);
39+
border: 0;
40+
border-radius: 4px;
41+
padding: 8px 12px;
42+
position: absolute;
43+
top: 10px;
44+
cursor: pointer;
45+
}
46+
47+
.toggle:focus {
48+
outline: none;
49+
}
50+
51+
.clock-container {
52+
display: flex;
53+
flex-direction: column;
54+
align-items: center;
55+
justify-content: space-between;
56+
}
57+
58+
.clock {
59+
position: relative;
60+
width: 200px;
61+
height: 200px;
62+
}
63+
64+
.needle {
65+
background-color: var(--primary-color);
66+
position: absolute;
67+
top: 50%;
68+
left: 50%;
69+
height: 65px;
70+
width: 3px;
71+
transform-origin: bottom center;
72+
transition: all 0.5s ease-in;
73+
}
74+
75+
.needle.hour {
76+
transform: translate(-50%, -100%) rotate(0deg);
77+
}
78+
79+
.needle.minute {
80+
transform: translate(-50%, -100%) rotate(0deg);
81+
height: 100px;
82+
}
83+
84+
.needle.second {
85+
background-color: #e74c3c;
86+
transform: translate(-50%, -100%) rotate(0deg);
87+
height: 100px;
88+
}
89+
90+
.center-point {
91+
background-color: #e74c3c;
92+
width: 10px;
93+
height: 10px;
94+
position: absolute;
95+
top: 50%;
96+
left: 50%;
97+
transform: translate(-50%, -50%);
98+
border-radius: 50%;
99+
}
100+
101+
.center-point::after {
102+
content: "";
103+
background-color: var(--primary-color);
104+
width: 5px;
105+
height: 5px;
106+
position: absolute;
107+
top: 50%;
108+
left: 50%;
109+
transform: translate(-50%, -50%);
110+
border-radius: 50%;
111+
}
112+
113+
.time {
114+
font-size: 60px;
115+
}
116+
117+
.date {
118+
color: #aaa;
119+
font-size: 14px;
120+
letter-spacing: 0.3px;
121+
text-transform: uppercase;
122+
}
123+
124+
.date .circle {
125+
background-color: var(--primary-color);
126+
color: var(--secondary-color);
127+
border-radius: 50%;
128+
height: 18px;
129+
width: 18px;
130+
display: inline-flex;
131+
align-items: center;
132+
justify-content: center;
133+
font-size: 12px;
134+
line-height: 18px;
135+
transition: all 0.5s ease-in;
136+
}

0 commit comments

Comments
 (0)