Skip to content

Commit d63bf8a

Browse files
MaheenShahzadMaheenShahzad
committed
Vanilla JavaScript Stopwatch
I have created a stop watch using JavaScript
1 parent cf35a1a commit d63bf8a

File tree

4 files changed

+284
-0
lines changed

4 files changed

+284
-0
lines changed

‎Vanilla JavaScript Stopwatch/README.md

+154
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
# Simple Stopwatch Web Application
2+
3+
This is a basic web application that displays a stopwatch implemented using vanilla JavaScript. The page includes a timer with seconds and tenths of a second, as well as buttons to start, stop, and reset the stopwatch.
4+
5+
## How to Use
6+
7+
1. Open the `index.html` file in a web browser.
8+
9+
2. The stopwatch will start at 00:00.
10+
11+
3. Click the "Start" button to begin the stopwatch.
12+
13+
4. Click the "Stop" button to pause the stopwatch.
14+
15+
5. Click the "Reset" button to reset the stopwatch to 00:00.
16+
17+
## Project Structure
18+
19+
- `index.html`: The HTML file containing the structure of the webpage.
20+
- `stopwatch.css`: The CSS file for styling the webpage.
21+
- `stopwatch.js`: The JavaScript file responsible for stopwatch functionality.
22+
<!--
23+
## HTML Structure
24+
The `index.html` file has the following structure:
25+
26+
```html
27+
<!DOCTYPE html>
28+
<html>
29+
<head>
30+
<link rel="stylesheet" href="stopwatch.css">
31+
<script src="stopwatch.js"></script>
32+
</head>
33+
<div class="wrapper">
34+
<h1>Stopwatch</h1>
35+
<h2>Vanilla JavaScript Stopwatch</h2>
36+
<p><span id="seconds">00</span>:<span id="tens">00</span></p>
37+
<button id="button-start">Start</button>
38+
<button id="button-stop">Stop</button>
39+
<button id="button-reset">Reset</button>
40+
</div>
41+
</html>
42+
-->
43+
## CSS Styles for Simple Stopwatch Web Application
44+
This CSS file contains the styles used in the Simple Stopwatch web application. It's responsible for the visual appearance of the elements on the page.
45+
46+
## Styles Overview
47+
48+
### Global Styles
49+
50+
- `body`: Sets the background color to `#ffa600`, which is a shade of orange.
51+
- Sets the font family for the entire page to a list of fallback fonts to ensure readability.
52+
53+
### Wrapper Styles
54+
55+
- `.wrapper`: Defines the styles for the main content wrapper.
56+
- Sets a fixed width of `800px`.
57+
- Centers the wrapper horizontally on the page using `margin`.
58+
- Sets the text color to white (`#fff`) for better visibility on the orange background.
59+
60+
### Heading Styles
61+
62+
- `h1`, `h2`, `h3`: Defines the styles for headings.
63+
- Sets the font family to "Roboto" and specifies font-weight, size, and text transformation.
64+
- These styles give the headings a modern, uppercase appearance.
65+
66+
### Stopwatch Digits
67+
68+
- `#seconds`, `#tens`: Styles for the stopwatch digits.
69+
- Increases the font size for better visibility.
70+
71+
### Button Styles
72+
73+
- `button`: Defines the styles for buttons.
74+
- Sets rounded corners using various vendor-specific properties for maximum browser compatibility.
75+
- Sets the background color to the same orange as the body.
76+
- Text color is white (`#fff`).
77+
- Adds a white border.
78+
- Adjusts padding, width, and margins.
79+
- Removes the default button outline.
80+
81+
- `button:hover`: Defines styles for button hover states.
82+
- Transitions the background color, border, and text color to create a hover effect.
83+
- When hovered over, the button's background becomes white, and the text color changes to the orange color used in the body.
84+
85+
## Usage
86+
87+
These styles are designed to be used in conjunction with the HTML structure of the Simple Stopwatch web application. You can customize the CSS as needed to modify the appearance of the elements.
88+
89+
Feel free to adjust colors, fonts, and other properties to match your desired design.
90+
91+
To apply these styles, link this CSS file in your HTML document, like so:
92+
93+
<!--```html
94+
<link rel="stylesheet" href="stopwatch.css">-->
95+
96+
## JavaScript Timer
97+
98+
This code creates a simple timer that counts seconds and tenths of a second when you click buttons. It uses JavaScript to update the timer display.
99+
100+
```javascript
101+
window.onload = function () {
102+
103+
var seconds = 0;
104+
var tens = 0;
105+
var appendTens = document.getElementById("tens")
106+
var appendSeconds = document.getElementById("seconds")
107+
var buttonStart = document.getElementById('button-start');
108+
var buttonStop = document.getElementById('button-stop');
109+
var buttonReset = document.getElementById('button-reset');
110+
var Interval ;
111+
112+
buttonStart.onclick = function() {
113+
114+
clearInterval(Interval);
115+
Interval = setInterval(startTimer, 10);
116+
}
117+
118+
buttonStop.onclick = function() {
119+
clearInterval(Interval);
120+
}
121+
122+
buttonReset.onclick = function() {
123+
clearInterval(Interval);
124+
tens = "00";
125+
seconds = "00";
126+
appendTens.innerHTML = tens;
127+
appendSeconds.innerHTML = seconds;
128+
}
129+
130+
function startTimer () {
131+
tens++;
132+
133+
if(tens <= 9){
134+
appendTens.innerHTML = "0" + tens;
135+
}
136+
137+
if (tens > 9){
138+
appendTens.innerHTML = tens;
139+
}
140+
141+
if (tens > 99) {
142+
console.log("seconds");
143+
seconds++;
144+
appendSeconds.innerHTML = "0" + seconds;
145+
tens = 0;
146+
appendTens.innerHTML = "0" + 0;
147+
}
148+
149+
if (seconds > 9){
150+
appendSeconds.innerHTML = seconds;
151+
}
152+
}
153+
}
154+

‎Vanilla JavaScript Stopwatch/stopwatch.css

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
/* Variabes */
2+
/* Mixin's */
3+
body {
4+
background: #ffa600;
5+
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
6+
height: 100%;
7+
}
8+
9+
.wrapper {
10+
width: 800px;
11+
margin: 30px auto;
12+
color: #fff;
13+
text-align: center;
14+
}
15+
16+
h1,
17+
h2,
18+
h3 {
19+
font-family: "Roboto", sans-serif;
20+
font-weight: 100;
21+
font-size: 2.6em;
22+
text-transform: uppercase;
23+
}
24+
25+
#seconds,
26+
#tens {
27+
font-size: 2em;
28+
}
29+
30+
button {
31+
-moz-border-radius: 5px;
32+
-webkit-border-radius: 5px;
33+
border-radius: 5px;
34+
-khtml-border-radius: 5px;
35+
background: #ffa600;
36+
color: #fff;
37+
border: solid 1px #fff;
38+
text-decoration: none;
39+
cursor: pointer;
40+
font-size: 1.2em;
41+
padding: 18px 10px;
42+
width: 180px;
43+
margin: 10px;
44+
outline: none;
45+
}
46+
button:hover {
47+
-webkit-transition: all 0.5s ease-in-out;
48+
-moz-transition: all 0.5s ease-in-out;
49+
transition: all 0.5s ease-in-out;
50+
background: #fff;
51+
border: solid 1px #fff;
52+
color: #ffa600;
53+
}

‎Vanilla JavaScript Stopwatch/stopwatch.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<link rel="stylesheet" href="stopwatch.css">
5+
<script src="stopwatch.js"></script>
6+
</head>
7+
<div class="wrapper">
8+
9+
<h1>Stopwatch</h1>
10+
<h2>Vanilla JavaScript Stopwatch</h2>
11+
<p><span id="seconds">00</span>:<span id="tens">00</span></p>
12+
<button id="button-start">Start</button>
13+
<button id="button-stop">Stop</button>
14+
<button id="button-reset">Reset</button>
15+
</div>
16+
17+
</html>

‎Vanilla JavaScript Stopwatch/stopwatch.js

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
window.onload = function () {
2+
3+
var seconds = 0;
4+
var tens = 0;
5+
var appendTens = document.getElementById("tens")
6+
var appendSeconds = document.getElementById("seconds")
7+
var buttonStart = document.getElementById('button-start');
8+
var buttonStop = document.getElementById('button-stop');
9+
var buttonReset = document.getElementById('button-reset');
10+
var Interval ;
11+
12+
buttonStart.onclick = function() {
13+
14+
clearInterval(Interval);
15+
Interval = setInterval(startTimer, 10);
16+
}
17+
18+
buttonStop.onclick = function() {
19+
clearInterval(Interval);
20+
}
21+
22+
23+
buttonReset.onclick = function() {
24+
clearInterval(Interval);
25+
tens = "00";
26+
seconds = "00";
27+
appendTens.innerHTML = tens;
28+
appendSeconds.innerHTML = seconds;
29+
}
30+
31+
32+
33+
function startTimer () {
34+
tens++;
35+
36+
if(tens <= 9){
37+
appendTens.innerHTML = "0" + tens;
38+
}
39+
40+
if (tens > 9){
41+
appendTens.innerHTML = tens;
42+
43+
}
44+
45+
if (tens > 99) {
46+
console.log("seconds");
47+
seconds++;
48+
appendSeconds.innerHTML = "0" + seconds;
49+
tens = 0;
50+
appendTens.innerHTML = "0" + 0;
51+
}
52+
53+
if (seconds > 9){
54+
appendSeconds.innerHTML = seconds;
55+
}
56+
57+
}
58+
59+
60+
}

0 commit comments

Comments
 (0)