├── index.html ├── style.css └── script.js /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Digital Clock 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |

17 |

Digital Clock with Stopwatch and Timer

18 |

Clock

19 |
20 | 21 |
22 |
23 |
24 |
25 |
26 |

20

27 |

hours

28 |
29 |

:

30 |
31 |

00

32 |

minutes

33 |
34 |

:

35 |
36 |

00

37 |

seconds

38 |
39 |

:

40 |
41 |

AM

42 |

PM

43 |
44 |
45 |
46 |
47 | 48 | 49 |
50 |
51 | 52 | 89 | 90 | 121 |
122 |
123 | 124 | 125 |
126 | 127 | 128 |
129 | 130 | 131 | 136 | 137 | 138 | 139 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Poppins:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: "Poppins", sans-serif; 8 | } 9 | body { 10 | min-height: 100vh; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | background: #051622; 15 | /* overflow: hidden; */ 16 | } 17 | .container { 18 | position: relative; 19 | width: 100%; 20 | max-width: 800px; 21 | /* min-height: 500px; */ 22 | padding: 60px; 23 | border-radius: 10px; 24 | color: #fff; 25 | background: #1BA098; 26 | box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2); 27 | } 28 | p, 29 | i { 30 | font-size: 10px; 31 | font-weight: 500; 32 | color: #ffffff62; 33 | text-transform: uppercase; 34 | } 35 | .content h3 { 36 | font-size: 20px; 37 | font-weight: 500; 38 | margin-bottom: 25px; 39 | color: #051622; 40 | font-weight: 400; 41 | } 42 | .type { 43 | color: #051622; 44 | 45 | } 46 | .wrapper { 47 | padding: 30px 0; 48 | border-radius: 10px; 49 | margin-top: 15px; 50 | background: #051622; 51 | box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); 52 | backdrop-filter: blur(1.5px); 53 | -webkit-backdrop-filter: blur(1.5px); 54 | border-radius: 10px; 55 | border: 1px solid rgba(255, 255, 255, 0.18); 56 | transition: all 0.3s ease; 57 | } 58 | .wrapper:hover { 59 | box-shadow: none; 60 | } 61 | .main { 62 | display: flex; 63 | align-items: center; 64 | justify-content: center; 65 | gap: 10px; 66 | } 67 | .main div { 68 | width: 20%; 69 | text-align: center; 70 | } 71 | .main .number { 72 | position: relative; 73 | font-size: 60px; 74 | font-weight: 400; 75 | line-height: 1; 76 | color: #fff; 77 | } 78 | .main .colon { 79 | font-size: 20px; 80 | } 81 | .btns { 82 | margin-top: 20px; 83 | display: flex; 84 | align-items: center; 85 | justify-content: center; 86 | flex-wrap: wrap; 87 | gap: 10px; 88 | } 89 | .btn { 90 | padding: 10px 20px; 91 | border-radius: 5px; 92 | color: #fff; 93 | border: none; 94 | font-size: 12px; 95 | font-weight: 500; 96 | text-transform: uppercase; 97 | cursor: pointer; 98 | transition: all 0.3s ease; 99 | background: #051622; 100 | box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); 101 | backdrop-filter: blur(1.5px); 102 | -webkit-backdrop-filter: blur(1.5px); 103 | border: 1px solid #051622; 104 | } 105 | .btn:active { 106 | box-shadow: none; 107 | } 108 | .hidden { 109 | display: none; 110 | } 111 | .laps { 112 | position: relative; 113 | max-height: 100px; 114 | overflow-y: auto; 115 | display: flex; 116 | align-items: center; 117 | flex-direction: column; 118 | gap: 10px; 119 | margin: 0 auto; 120 | margin-top: 20px; 121 | } 122 | .laps::-webkit-scrollbar { 123 | width: 5px; 124 | } 125 | .laps::-webkit-scrollbar-track { 126 | background: rgba(255, 255, 255, 0.15); 127 | border-radius: 10px; 128 | } 129 | .laps::-webkit-scrollbar-thumb { 130 | background: rgba(255, 255, 255, 0.15); 131 | border-radius: 10px; 132 | } 133 | .lap { 134 | width: 50%; 135 | display: flex; 136 | justify-content: space-between; 137 | padding: 10px; 138 | background: rgba(255, 255, 255, 0.15); 139 | border-radius: 10px; 140 | border: 1px solid rgba(255, 255, 255, 0.18); 141 | } 142 | .lap:last-child { 143 | border-bottom: none; 144 | } 145 | .lap.active p { 146 | color: #fff; 147 | } 148 | 149 | .bg-elem { 150 | position: absolute; 151 | top: 60%; 152 | left: 10%; 153 | width: 80px; 154 | height: 80px; 155 | transform: rotate(45deg); 156 | background: rgba(255, 255, 255, 0.15); 157 | box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); 158 | backdrop-filter: blur(1.5px); 159 | -webkit-backdrop-filter: blur(1.5px); 160 | border-radius: 10px; 161 | border: 1px solid rgba(255, 255, 255, 0.18); 162 | animation: bg-elem 10s linear infinite; 163 | transition: all 0.3s ease; 164 | } 165 | .bg-elem:hover { 166 | animation-play-state: paused; 167 | box-shadow: none; 168 | } 169 | .bg-elem:nth-child(2) { 170 | top: 20%; 171 | left: 80%; 172 | width: 100px; 173 | height: 100px; 174 | animation-duration: 30s; 175 | } 176 | .bg-elem:nth-child(3) { 177 | top: 15%; 178 | left: 10%; 179 | width: 40px; 180 | height: 40px; 181 | border-radius: 50%; 182 | animation-duration: 20s; 183 | } 184 | 185 | @keyframes bg-elem { 186 | 0% { 187 | transform: rotate(45deg) translate(0, 0); 188 | } 189 | 50% { 190 | transform: rotate(45deg) translate(20px, 20px); 191 | } 192 | 100% { 193 | transform: rotate(45deg) translate(0, 0); 194 | } 195 | } 196 | 197 | /* responsive */ 198 | @media (max-width: 600px) { 199 | .container { 200 | height: 100vh; 201 | display: flex; 202 | flex-direction: column; 203 | justify-content: center; 204 | border-radius: 0; 205 | padding: 0 20px; 206 | } 207 | .content h3 { 208 | font-size: 16px; 209 | } 210 | .main-wrapper { 211 | padding: 20px 0; 212 | } 213 | .main div { 214 | width: 15%; 215 | } 216 | .main .number { 217 | font-size: 50px; 218 | } 219 | .main .colon { 220 | font-size: 16px; 221 | } 222 | 223 | .bg-elem { 224 | display: none; 225 | } 226 | } 227 | 228 | @media (max-width: 400px) { 229 | .container { 230 | padding: 0 10px; 231 | } 232 | .content h3 { 233 | font-size: 14px; 234 | } 235 | .main-wrapper { 236 | padding: 10px 0; 237 | } 238 | .main-wrapper .head { 239 | padding: 0 20px; 240 | } 241 | .main .number { 242 | font-size: 40px; 243 | } 244 | .main .colon { 245 | font-size: 12px; 246 | } 247 | } 248 | 249 | /* Credits */ 250 | .credits a { 251 | position: absolute; 252 | bottom: 10px; 253 | right: 10px; 254 | font-size: 14px; 255 | color: #333; 256 | } 257 | .credits span { 258 | color: #109dff; 259 | } 260 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | 2 | const updateTime = () => { 3 | const time = new Date(); 4 | let hours = time.getHours(); 5 | let minutes = time.getMinutes(); 6 | let seconds = time.getSeconds(); 7 | let ampm = hours >= 12 ? "PM" : "AM"; 8 | let otherampm = hours >= 12 ? "AM" : "PM"; 9 | 10 | hours = hours % 12 || 12; 11 | hours = addTrailingZero(hours); 12 | minutes = addTrailingZero(minutes); 13 | seconds = addTrailingZero(seconds); 14 | 15 | $("#hour").html(hours); 16 | $("#min").html(minutes); 17 | $("#sec").html(seconds); 18 | $("#ampm").html(ampm); 19 | $("#other-ampm").html(otherampm); 20 | }; 21 | 22 | updateTime(); 23 | setInterval(updateTime, 1000); 24 | 25 | $("#stopwatch-btn").click(function () { 26 | $(".main-container > div").slideUp(); 27 | $(".stopwatch").slideDown(); 28 | $(".type").html("Stopwatch"); 29 | }); 30 | 31 | $("#timer-btn").click(function () { 32 | $(".main-container > div").slideUp(); 33 | $(".timer").slideDown(); 34 | $(".type").html("Timer"); 35 | }); 36 | 37 | $(".back-btn").click(function () { 38 | $(".main-container > div").slideUp(); 39 | $(".clock").slideDown(); 40 | $(".type").html("Clock"); 41 | }); 42 | 43 | let stopwatchHours = 0, 44 | stopwatchMinutes = 0, 45 | stopwatchSeconds = 0, 46 | stopwatchMiliSeconds = 0, 47 | stopwatchRunning = false, 48 | laps = 0, 49 | stopwatchInterval; 50 | 51 | function stopwatch() { 52 | stopwatchMiliSeconds++; 53 | if (stopwatchMiliSeconds === 100) { 54 | stopwatchMiliSeconds = 0; 55 | stopwatchSeconds++; 56 | } 57 | if (stopwatchSeconds === 60) { 58 | stopwatchSeconds = 0; 59 | stopwatchMinutes++; 60 | } 61 | if (stopwatchMinutes === 60) { 62 | stopwatchMinutes = 0; 63 | stopwatchHours++; 64 | } 65 | 66 | $("#stopwatch-hour").html(addTrailingZero(stopwatchHours)); 67 | $("#stopwatch-min").html(addTrailingZero(stopwatchMinutes)); 68 | $("#stopwatch-sec").html(addTrailingZero(stopwatchSeconds)); 69 | $("#stopwatch-ms").html(addTrailingZero(stopwatchMiliSeconds)); 70 | } 71 | 72 | function startStopwatch() { 73 | if (!stopwatchRunning) { 74 | stopwatchInterval = setInterval(stopwatch, 10); 75 | stopwatchRunning = true; 76 | } 77 | } 78 | 79 | function stopStopwatch() { 80 | clearInterval(stopwatchInterval); 81 | stopwatchRunning = false; 82 | } 83 | 84 | function resetStopwatch() { 85 | clearInterval(stopwatchInterval); 86 | stopwatchRunning = false; 87 | stopwatchHours = 0; 88 | stopwatchMinutes = 0; 89 | stopwatchSeconds = 0; 90 | stopwatchMiliSeconds = 0; 91 | laps = 0; 92 | $("#stopwatch-hour").html("00"); 93 | $("#stopwatch-min").html("00"); 94 | $("#stopwatch-sec").html("00"); 95 | $("#stopwatch-ms").html("00"); 96 | } 97 | 98 | $(".start-stopwatch").click(function () { 99 | startStopwatch(); 100 | $(".start-stopwatch").hide(); 101 | $(".lap-stopwatch").show(); 102 | }); 103 | 104 | $(".lap-stopwatch").click(function () { 105 | laps++; 106 | $(".lap").removeClass("active"); 107 | $(".laps").prepend( 108 | `
109 |

Lap ${laps}

110 |

111 | ${addTrailingZero(stopwatchHours)} : ${addTrailingZero( 112 | stopwatchMinutes 113 | )} : ${addTrailingZero(stopwatchSeconds)} : ${addTrailingZero( 114 | stopwatchMiliSeconds 115 | )} 116 |

117 |
118 | ` 119 | ); 120 | }); 121 | 122 | $(".reset-stopwatch").click(function () { 123 | resetStopwatch(); 124 | $(".start-stopwatch").show(); 125 | $(".lap-stopwatch").hide(); 126 | $(".laps").html(""); 127 | }); 128 | 129 | function addTrailingZero(number) { 130 | return number < 10 ? "0" + number : number; 131 | } 132 | 133 | let time = 0, 134 | timerHours = 0, 135 | timerMinutes = 0, 136 | timerSeconds = 0, 137 | timerMiliseconds = 0, 138 | timerRunning = false, 139 | timerInterval; 140 | 141 | function getTime() { 142 | time = prompt("Enter time in minutes"); 143 | time = time * 60; 144 | setTime(); 145 | } 146 | function setTime() { 147 | timerHours = Math.floor(time / 3600); 148 | timerMinutes = Math.floor((time % 3600) / 60); 149 | timerSeconds = Math.floor(time % 60); 150 | timerMiliseconds = 0; 151 | 152 | $("#timer-hour").html(addTrailingZero(timerHours)); 153 | $("#timer-min").html(addTrailingZero(timerMinutes)); 154 | $("#timer-sec").html(addTrailingZero(timerSeconds)); 155 | $("#timer-ms").html(addTrailingZero(timerMiliseconds)); 156 | } 157 | 158 | function timer() { 159 | timerMiliseconds--; 160 | if (timerMiliseconds === -1) { 161 | timerMiliseconds = 99; 162 | timerSeconds--; 163 | } 164 | if (timerSeconds === -1) { 165 | timerSeconds = 59; 166 | timerMinutes--; 167 | } 168 | if (timerMinutes === -1) { 169 | timerMinutes = 59; 170 | timerHours--; 171 | } 172 | 173 | $("#timer-hour").html(addTrailingZero(timerHours)); 174 | $("#timer-min").html(addTrailingZero(timerMinutes)); 175 | $("#timer-sec").html(addTrailingZero(timerSeconds)); 176 | $("#timer-ms").html(addTrailingZero(timerMiliseconds)); 177 | 178 | timeUp(); 179 | } 180 | 181 | function startTimer() { 182 | if (timerHours === 0 && timerMinutes === 0 && timerSeconds === 0) { 183 | getTime(); 184 | } else { 185 | timerInterval = setInterval(timer, 10); 186 | timerRunning = true; 187 | $(".start-timer").hide(); 188 | $(".stop-timer").show(); 189 | } 190 | } 191 | 192 | function stopTimer() { 193 | clearInterval(timerInterval); 194 | timerRunning = false; 195 | $(".start-timer").show(); 196 | $(".stop-timer").hide(); 197 | } 198 | 199 | function resetTimer() { 200 | stopTimer(); 201 | time = 0; 202 | setTime(); 203 | } 204 | 205 | function timeUp() { 206 | if ( 207 | timerHours === 0 && 208 | timerMinutes === 0 && 209 | timerSeconds === 0 && 210 | timerMiliseconds === 0 211 | ) { 212 | stopTimer(); 213 | alert("Time's up!"); 214 | 215 | setTime(); 216 | } 217 | } 218 | 219 | $(".start-timer").click(startTimer); 220 | 221 | $(".stop-timer").click(stopTimer); 222 | 223 | $(".reset-timer").click(function () { 224 | resetTimer(); 225 | if (!timerRunning) { 226 | $(".start-timer").show(); 227 | $(".stop-timer").hide(); 228 | } 229 | }); 230 | --------------------------------------------------------------------------------