Skip to content

Commit a0681e2

Browse files
jigar-sablejigar-sable
committed
stopwatch added
1 parent 78bfb5b commit a0681e2

4 files changed

Lines changed: 219 additions & 0 deletions

File tree

‎projects/stopwatch/assests/fav.ico‎

15 KB
Binary file not shown.

‎projects/stopwatch/assests/script.js‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
const hrTxt = document.getElementById('hr');
2+
const minTxt = document.getElementById('min');
3+
const secTxt = document.getElementById('sec');
4+
const countTxt = document.getElementById('count');
5+
6+
let hr = 0;
7+
let min = 0;
8+
let sec = 0;
9+
let count = 0;
10+
let timer = false;
11+
12+
const start = () => {
13+
timer = true;
14+
stopwatch();
15+
}
16+
const stop = () => {
17+
timer = false;
18+
}
19+
const reset = () => {
20+
timer = false;
21+
hr = 0;
22+
min = 0;
23+
sec = 0;
24+
count = 0;
25+
hrTxt.innerHTML = "00";
26+
minTxt.innerHTML = "00";
27+
secTxt.innerHTML = "00";
28+
countTxt.innerHTML = "00";
29+
}
30+
31+
const stopwatch = () => {
32+
if(timer == true) {
33+
count += 1;
34+
35+
if(count == 100) {
36+
sec += 1;
37+
count = 0;
38+
}
39+
if(sec == 60) {
40+
min += 1;
41+
sec = 0;
42+
}
43+
if(min == 60) {
44+
hr += 1;
45+
min = 0;
46+
sec = 0;
47+
}
48+
49+
var hrStr = hr;
50+
var minStr = min;
51+
var secStr = sec;
52+
var countStr = count;
53+
if(hr < 10) {
54+
hrstr = "0" + hrStr;
55+
}
56+
if(min < 10) {
57+
minStr = "0" + minStr;
58+
}
59+
if(sec < 10) {
60+
secStr = "0" + secStr;
61+
}
62+
if(count < 10) {
63+
countStr = "0" + countStr;
64+
}
65+
hrTxt.innerHTML = hrstr;
66+
minTxt.innerHTML = minStr;
67+
secTxt.innerHTML = secStr;
68+
countTxt.innerHTML = countStr;
69+
70+
setTimeout("stopwatch()",10);
71+
}
72+
}

‎projects/stopwatch/assests/style.css‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
}
8+
body {
9+
min-height: 100vh;
10+
min-width: 100%;
11+
font-size: 62.5%;
12+
overflow: hidden;
13+
background: linear-gradient(to right, #8e2de2, #4a00e0);
14+
font-family: 'Poppins', sans-serif;
15+
}
16+
17+
.container {
18+
background: rgba(255, 255, 255, 0.4);
19+
transform-style: preserve-3d;
20+
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
21+
max-width: 35rem;
22+
width: 100%;
23+
margin: 8rem auto;
24+
padding: 1rem 2rem;
25+
border-radius: .5rem;
26+
transition: .3s;
27+
}
28+
h2{
29+
font-size: 2.5rem;
30+
text-align: center;
31+
color: #111;
32+
}
33+
.time {
34+
width: 100%;
35+
display: flex;
36+
justify-content: space-between;
37+
margin-bottom: 1.5rem;
38+
margin-top: 2rem;
39+
}
40+
.time div{
41+
display: flex;
42+
flex-direction: column;
43+
justify-content: center;
44+
align-items: center;
45+
width: 7rem;
46+
background: rgb(255, 255, 255);
47+
border-radius: 0.5rem;
48+
color: rgb(29, 29, 29);
49+
padding: 1rem 2rem;
50+
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
51+
}
52+
.time div .digit {
53+
font-size: 2.5rem;
54+
font-weight: 600;
55+
}
56+
.time div .txt {
57+
font-size: 1.2rem;
58+
font-weight: 500;
59+
}
60+
61+
.btns {
62+
display: flex;
63+
justify-content: space-between;
64+
/* background: yellow; */
65+
margin: 0 3rem;
66+
margin-top: 2rem;
67+
}
68+
.btns .btn {
69+
border: none;
70+
outline: none;
71+
padding: .7rem 1.5rem;
72+
border-radius: .2rem;
73+
font-size: 1.1rem;
74+
text-transform: uppercase;
75+
background: #161616;
76+
color: #fff;
77+
cursor: pointer;
78+
box-shadow: 0 .2rem 1rem rgba(0, 0, 0, 0.3);
79+
transition: .2s ease-out;
80+
}
81+
.btns .btn:hover {
82+
background: rgb(0, 0, 0);
83+
color: #ffffff;
84+
}
85+
.btns .btn.stop {
86+
background: #d40101;
87+
color: rgb(255, 255, 255);
88+
}
89+
.btns .btn.stop:hover {
90+
background: #940000;
91+
color: rgb(255, 255, 255);
92+
}
93+
94+
@media screen and (max-width:768px) {
95+
html {
96+
font-size: 82.5%;
97+
}
98+
}
99+
@media screen and (max-width:460px) {
100+
html {
101+
font-size: 60%;
102+
}
103+
}

‎projects/stopwatch/index.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="shortcut icon" href="./assests/fav.ico" type="image/x-icon">
8+
<title>Stopwatch</title>
9+
<link rel="stylesheet" href="./assests/style.css">
10+
</head>
11+
<body>
12+
13+
<div class="container">
14+
<h2>StopWatch</h2>
15+
<div class="time">
16+
<div>
17+
<span class="digit" id="hr">00</span>
18+
<span class="txt">Hr</span>
19+
</div>
20+
<div>
21+
<span class="digit" id="min">00</span>
22+
<span class="txt">Min</span>
23+
</div>
24+
<div>
25+
<span class="digit" id="sec">00</span>
26+
<span class="txt">Sec</span>
27+
</div>
28+
<div>
29+
<span class="digit" id="count">00</span>
30+
<span class="txt">Millisec</span>
31+
</div>
32+
</div>
33+
34+
<div class="btns">
35+
<button class="btn start" onclick="start()">Start</button>
36+
<button class="btn stop" onclick="stop()">Stop</button>
37+
<button class="btn reset" onclick="reset()">Reset</button>
38+
</div>
39+
40+
</div>
41+
42+
<script src="./assests/script.js"></script>
43+
</body>
44+
</html>

0 commit comments

Comments
 (0)