Skip to content

Commit bf41309

Browse files
Baba-Yaga-1Baba-Yaga-1
committed
Added Stopwatch Project
1 parent 40baa5b commit bf41309

File tree

7 files changed

+228
-0
lines changed

7 files changed

+228
-0
lines changed

‎Clock-Stopwatch/README.md

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
# SIMPLE STOPWATCH
2+
3+
## A basic Javascript stopwatch which allows you to count up from zero with start, reset and stop controls.
4+
5+
<br>
6+
7+
## 💻Tech Stack
8+
<br>
9+
10+
![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white)
11+
![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white)
12+
![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
13+
14+
<br>
15+
16+
### How to use:
17+
18+
---
19+
20+
- Download or clone the repository
21+
22+
```
23+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
24+
```
25+
26+
- Go to the directory
27+
- Run the index.html file
28+
- Start the stopwatch
29+
30+
<br>
31+
32+
<h3 align="center">DEFAULT VIEW</h3>
33+
34+
![Default view](assests\stopwatch3.JPG)
35+
<br>
36+
37+
<h3 align="center">PREVIEW OF THE STOP BUTTON</h3>
38+
39+
![Stop button](assests\stopwatch.JPG)

‎Clock-Stopwatch/assests/scripts.js

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
var sw = {
2+
3+
etime : null,
4+
erst : null,
5+
ego : null,
6+
init : function () {
7+
8+
sw.etime = document.getElementById("sw-time");
9+
sw.erst = document.getElementById("sw-rst");
10+
sw.ego = document.getElementById("sw-go");
11+
12+
13+
sw.erst.addEventListener("click", sw.reset);
14+
sw.erst.disabled = false;
15+
sw.ego.addEventListener("click", sw.start);
16+
sw.ego.disabled = false;
17+
},
18+
19+
20+
timer : null, // timer object
21+
now : 0, // current elapsed time
22+
tick : function () {
23+
24+
sw.now++;
25+
var remain = sw.now;
26+
var hours = Math.floor(remain / 3600);
27+
remain -= hours * 3600;
28+
var mins = Math.floor(remain / 60);
29+
remain -= mins * 60;
30+
var secs = remain;
31+
32+
33+
if (hours<10) { hours = "0" + hours; }
34+
if (mins<10) { mins = "0" + mins; }
35+
if (secs<10) { secs = "0" + secs; }
36+
sw.etime.innerHTML = hours + ":" + mins + ":" + secs;
37+
},
38+
39+
40+
start : function () {
41+
sw.timer = setInterval(sw.tick, 1000);
42+
sw.ego.value = "Stop";
43+
sw.ego.removeEventListener("click", sw.start);
44+
sw.ego.addEventListener("click", sw.stop);
45+
},
46+
47+
48+
stop : function () {
49+
clearInterval(sw.timer);
50+
sw.timer = null;
51+
sw.ego.value = "Start";
52+
sw.ego.removeEventListener("click", sw.stop);
53+
sw.ego.addEventListener("click", sw.start);
54+
},
55+
56+
57+
reset : function () {
58+
if (sw.timer != null) { sw.stop(); }
59+
sw.now = -1;
60+
sw.tick();
61+
}
62+
};
63+
window.addEventListener("load", sw.init);

‎Clock-Stopwatch/assests/stopwatch-2.JPG

45.7 KB
Loading

‎Clock-Stopwatch/assests/stopwatch.JPG

47.9 KB
Loading

‎Clock-Stopwatch/assests/stopwatch3.JPG

46.2 KB
Loading

‎Clock-Stopwatch/assests/styles.css

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
2+
body {
3+
background-color: #51317c;
4+
color: #f6f5f8;
5+
}
6+
#stopwatch {
7+
display: flex;
8+
flex-wrap: wrap;
9+
max-width: 320px;
10+
margin: 0 auto;
11+
padding: 20px 100px 60px 10px;
12+
13+
14+
}
15+
.circle {
16+
display: flex;
17+
justify-content: center;
18+
align-items: center;
19+
20+
height: 270px;
21+
width: 270px;
22+
23+
border: 2px solid;
24+
border-radius: 50%;
25+
26+
margin-left: 70px;
27+
28+
}
29+
30+
.time {
31+
font-family: "Roboto Mono", monospace;
32+
font-weight: 200;
33+
font-size: 32px;
34+
}
35+
h1 {
36+
font-size: 40px;
37+
font-family: "Montserrat", sans-serif;
38+
font-weight: 150;
39+
40+
text-align: center;
41+
line-height: 39px;
42+
43+
padding: 50px;
44+
margin: 10px;
45+
}
46+
47+
#sw-time {
48+
width: 80%;
49+
padding: 20px 0;
50+
font-size: 40px;
51+
font-weight: bold;
52+
text-align: center;
53+
/* background: #ffffff; */
54+
color: rgb(42, 164, 201);
55+
56+
font-family: "Roboto Mono", monospace;
57+
font-weight: 300;
58+
font-size: 42px;
59+
60+
}
61+
62+
.controls {
63+
display: flex;
64+
/* flex-wrap: nowrap; */
65+
margin: 70px 70px 70px 70px;
66+
flex-direction: row;
67+
/* padding: 50px 600px 600px -2500px; */
68+
justify-content: space-between;
69+
70+
}
71+
72+
#sw-rst, #sw-go {
73+
/* box-sizing: border-box; */
74+
display: flex;
75+
justify-content: space-between;
76+
77+
width: 130px;
78+
79+
/* width: 100%; */
80+
cursor: pointer;
81+
82+
padding: 10px 10px 10px 40px;
83+
/*
84+
border: 0;
85+
color: rgb(19, 4, 4);
86+
font-size: 20px; */
87+
}
88+
89+
90+
#sw-rst { background-color: #6295cf; }
91+
#sw-go { background-color: #d463df; }

‎Clock-Stopwatch/index.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>
5+
Simple Stopwatch
6+
</title>
7+
<link href="./assests/styles.css" rel="stylesheet">
8+
<link
9+
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;900&display=swap"
10+
rel="stylesheet"
11+
/>
12+
<link
13+
href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,300;1,300&display=swap"
14+
rel="stylesheet"
15+
/>
16+
17+
</head>
18+
<body>
19+
<div id="stopwatch">
20+
<!-- CURRENT TIME -->
21+
<h1> STOPWATCH</h1>
22+
<div class="circle">
23+
<span class="time" id="sw-time">00:00:00</span>
24+
</div>
25+
26+
<!-- CONTROLS -->
27+
<div class="controls">
28+
<input type="button" value="Reset" id="sw-rst" disabled/>
29+
<input type="button" value="Start" id="sw-go" disabled/>
30+
</div>
31+
</div>
32+
<script src="./assests/scripts.js"></script>
33+
</body>
34+
</html>
35+

0 commit comments

Comments
 (0)