├── README.md ├── index.html ├── script.js └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # HTML-CSS-JS-Stopwatch 2 | 3 | 4 | https://user-images.githubusercontent.com/42389395/184534836-e56a3911-0bbb-47d4-a983-59a14f21beaf.mov 5 | 6 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Test 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 |
15 | 16 |
17 |
18 | 00 : 19 |  00: 20 |  00 21 |
22 |
23 | 24 |
25 | 26 | 27 | 28 |
29 | 30 |
31 | 32 |
33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | let start = document.querySelector(".start"); 2 | let stop = document.querySelector(".stop"); 3 | let reset = document.querySelector(".reset"); 4 | let hours = document.querySelector(".hour"); 5 | let mins = document.querySelector(".min"); 6 | let secs = document.querySelector(".sec"); 7 | let hour = 0; 8 | let min = 0; 9 | let sec = 0; 10 | 11 | let interval; 12 | 13 | start.addEventListener("click", function () { 14 | interval = setInterval(function () { 15 | if (sec < 59) { 16 | sec += 1; 17 | secs.innerHTML = sec < 10 ? " 0" + sec : sec; 18 | } else { 19 | sec = 0; 20 | secs.innerHTML = sec < 10 ? " 0" + sec : sec; 21 | if (min < 59) { 22 | min += 1; 23 | mins.innerHTML = min < 10 ? "0" + min + ":" : min + ":"; 24 | } else { 25 | hour += 1; 26 | hours.innerHTML = hour < 10 ? "0" + hour + ":" : hour + ":"; 27 | } 28 | } 29 | }, 1000); 30 | 31 | start.style.pointerEvents = "none"; 32 | }); 33 | 34 | stop.addEventListener("click", function () { 35 | clearInterval(interval); 36 | start.style.pointerEvents = "visible"; 37 | }); 38 | 39 | reset.addEventListener("click", function () { 40 | location.reload(); 41 | }); 42 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | body { 6 | font-family: sans-serif; 7 | font-size: 16px; 8 | width: 100%; 9 | height: 100vh; 10 | background-color: #f2eee3; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | } 15 | .outer { 16 | width: 245px; 17 | height: 245px; 18 | border-radius: 50%; 19 | background: black; 20 | display: flex; 21 | justify-content: center; 22 | align-items: center; 23 | } 24 | .inner { 25 | width: 230px; 26 | height: 230px; 27 | border-radius: 50%; 28 | background-color: #f2eee3; 29 | display: flex; 30 | justify-content: center; 31 | align-items: center; 32 | } 33 | .text { 34 | color: black; 35 | font-size: 30px; 36 | } 37 | .btns { 38 | display: flex; 39 | justify-content: space-between; 40 | width: 250px; 41 | margin-top: 25px; 42 | } 43 | button { 44 | width: 50px; 45 | height: 50px; 46 | border-radius: 50%; 47 | border: 2px solid black; 48 | background-color: #f2eee3; 49 | 50 | color: black; 51 | } 52 | button:hover { 53 | background-color: white; 54 | color: black; 55 | cursor: pointer; 56 | } 57 | --------------------------------------------------------------------------------