├── css.css ├── index.html ├── style.css └── script.js /css.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 0; 3 | margin: 0; 4 | font-family: verdana; 5 | } 6 | 7 | .container { 8 | display: flex; 9 | flex-direction: column; 10 | justify-content: center; 11 | align-items: center; 12 | width: 100%; 13 | height: 100vh; 14 | background-color: rgb(0, 61, 0); 15 | } 16 | 17 | h1 { 18 | color: rgb(10, 238, 10); 19 | text-align: center; 20 | } 21 | 22 | .digit { 23 | font-size: 150px; 24 | color: #fff; 25 | } 26 | 27 | .txt { 28 | font-size: 30px; 29 | color: #fffcd6; 30 | } 31 | 32 | #buttons { 33 | margin-top: 50px; 34 | } 35 | 36 | .btn { 37 | width: 100px; 38 | padding: 10px 15px; 39 | margin: 0px 20px; 40 | border-top-right-radius: 10px; 41 | border-bottom-left-radius: 10px; 42 | border-bottom-right-radius: 4px; 43 | border-top-left-radius: 4px; 44 | cursor: pointer; 45 | font-size: 20px; 46 | transition: 0.5s; 47 | color: white; 48 | font-weight: 500; 49 | } 50 | 51 | #start { 52 | background-color: #009779; 53 | } 54 | 55 | #stop { 56 | background-color: #0e85fc; 57 | } 58 | 59 | #reset { 60 | background-color: #c91400; 61 | } 62 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | Stopwatch 11 | 12 | 13 | 14 | 15 |
16 |

17 | Stop Watch

18 |
19 |
20 | 21 | 00 22 | Hr 23 | 24 | 00 25 | Min 26 | 27 | 00 28 | Sec 29 | 30 | 00 31 |
32 |
33 | 35 | 37 | 39 |
40 |
41 |
42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 0; 3 | margin: 0; 4 | font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; 5 | background-color: black; 6 | } 7 | 8 | .container { 9 | display: flex; 10 | flex-direction: column; 11 | justify-content: center; 12 | align-items: center; 13 | width: 100%; 14 | height: 80vh; 15 | background-color: #1079e9; 16 | } 17 | 18 | h1 { 19 | color: white; 20 | text-align: center; 21 | } 22 | 23 | .digit { 24 | font-size: 150px; 25 | color: #fff; 26 | } 27 | 28 | .txt { 29 | font-size: 30px; 30 | color: #fffcd6; 31 | } 32 | 33 | #buttons { 34 | margin-top: 50px; 35 | } 36 | 37 | .btn { 38 | width: 100px; 39 | padding: 10px 15px; 40 | margin: 0px 20px; 41 | border-top-right-radius: 10px; 42 | border-bottom-left-radius: 10px; 43 | border-bottom-right-radius: 4px; 44 | border-top-left-radius: 4px; 45 | cursor: pointer; 46 | font-size: 20px; 47 | transition: 0.5s; 48 | color: white; 49 | font-weight: 500; 50 | } 51 | 52 | #start { 53 | background-color: green; 54 | } 55 | 56 | #stop { 57 | background-color: red; 58 | } 59 | 60 | #reset { 61 | background-color: goldenrod; 62 | } 63 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | let startBtn = document.getElementById('start'); 2 | let stopBtn = document.getElementById('stop'); 3 | let resetBtn = document.getElementById('reset'); 4 | 5 | let hour = 00; 6 | let minute = 00; 7 | let second = 00; 8 | let count = 00; 9 | 10 | startBtn.addEventListener('click', function () { 11 | timer = true; 12 | stopWatch(); 13 | }); 14 | 15 | stopBtn.addEventListener('click', function () { 16 | timer = false; 17 | }); 18 | 19 | resetBtn.addEventListener('click', function () { 20 | timer = false; 21 | hour = 0; 22 | minute = 0; 23 | second = 0; 24 | count = 0; 25 | document.getElementById('hr').innerHTML = "00"; 26 | document.getElementById('min').innerHTML = "00"; 27 | document.getElementById('sec').innerHTML = "00"; 28 | document.getElementById('count').innerHTML = "00"; 29 | }); 30 | 31 | function stopWatch() { 32 | if (timer) { 33 | count++; 34 | 35 | if (count == 100) { 36 | second++; 37 | count = 0; 38 | } 39 | 40 | if (second == 60) { 41 | minute++; 42 | second = 0; 43 | } 44 | 45 | if (minute == 60) { 46 | hour++; 47 | minute = 0; 48 | second = 0; 49 | } 50 | 51 | let hrString = hour; 52 | let minString = minute; 53 | let secString = second; 54 | let countString = count; 55 | 56 | if (hour < 10) { 57 | hrString = "0" + hrString; 58 | } 59 | 60 | if (minute < 10) { 61 | minString = "0" + minString; 62 | } 63 | 64 | if (second < 10) { 65 | secString = "0" + secString; 66 | } 67 | 68 | if (count < 10) { 69 | countString = "0" + countString; 70 | } 71 | 72 | document.getElementById('hr').innerHTML = hrString; 73 | document.getElementById('min').innerHTML = minString; 74 | document.getElementById('sec').innerHTML = secString; 75 | document.getElementById('count').innerHTML = countString; 76 | setTimeout(stopWatch, 10); 77 | } 78 | } 79 | --------------------------------------------------------------------------------