├── style.css ├── index.html └── app.js /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: 'Poppins', sans-serif; 6 | } 7 | .wrapper { 8 | width: 100%; 9 | height: 100vh; 10 | display: flex; 11 | flex-direction: column; 12 | justify-content: center; 13 | align-items: center; 14 | } 15 | .wrapper div { 16 | margin: 20px 0; 17 | } 18 | button{ 19 | padding: 12px 24px; 20 | background-color: #fff; 21 | color: #000; 22 | cursor: pointer; 23 | font-size: 17px; 24 | border: 3px solid blue; 25 | margin: 0 5px; 26 | transition: all 0.3s ease; 27 | } 28 | button:hover { 29 | background-color: blue; 30 | color: #fff; 31 | border: 3px solid #000; 32 | } 33 | .time{ 34 | font-size: 55px; 35 | } 36 | .time-number { 37 | font-size: 40px; 38 | } 39 | p { 40 | position: absolute; 41 | bottom: 3%; 42 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Stopwatch 11 | 12 | 13 |
14 |
15 | 00 : 00 : 00 16 |
17 |
18 | 19 | 20 | 21 |
22 |
23 | 24 |
25 | 26 |

Created by Amir Yusupov

27 |
28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | let [second,minute,hour] = [0,0,0]; 2 | let timer = document.querySelector('.time'); 3 | let number = document.querySelector('.time-number span'); 4 | let int = null; 5 | 6 | function displayTimer(){ 7 | second+=1; 8 | if(second === 59){ 9 | second = 0; 10 | minute++; 11 | if(minute === 59){ 12 | minute = 0; 13 | hour++; 14 | if(hour === 24){ 15 | hour = 0; 16 | hour++; 17 | } 18 | } 19 | } 20 | let h = hour < 10 ? "0" + hour : hour; 21 | let m = minute < 10 ? "0" + minute : minute; 22 | let s = second < 10 ? "0" + second : second; 23 | 24 | timer.innerHTML = ` ${h} : ${m} : ${s}`; 25 | } 26 | 27 | document.querySelector('#btn-start').addEventListener('click', ()=>{ 28 | if(int!==null){ 29 | clearInterval(int); 30 | } 31 | int = setInterval(displayTimer,1000); 32 | number.innerHTML = "..." 33 | }); 34 | document.querySelector('#btn-pause').addEventListener('click', ()=>{ 35 | let h = hour < 10 ? "0" + hour : hour; 36 | let m = minute < 10 ? "0" + minute : minute; 37 | let s = second < 10 ? "0" + second : second; 38 | 39 | number.innerHTML = ` ${h} : ${m} : ${s}`; 40 | clearInterval(int); 41 | }); 42 | document.querySelector('#btn-end').addEventListener('click', ()=>{ 43 | let h = hour < 10 ? "0" + hour : hour; 44 | let m = minute < 10 ? "0" + minute : minute; 45 | let s = second < 10 ? "0" + second : second; 46 | 47 | number.innerHTML = ` ${h} : ${m} : ${s}`; 48 | clearInterval(int); 49 | [second,minute,hour] = [0,0,0,0]; 50 | timer.innerHTML = '00 : 00 : 00'; 51 | }); --------------------------------------------------------------------------------