From d63bf8ae0079350e09faf95ea67dca05bd658a0e Mon Sep 17 00:00:00 2001 From: MaheenShahzad Date: Sun, 29 Oct 2023 00:19:24 +0500 Subject: [PATCH] Vanilla JavaScript Stopwatch I have created a stop watch using JavaScript --- Vanilla JavaScript Stopwatch/README.md | 154 ++++++++++++++++++++ Vanilla JavaScript Stopwatch/stopwatch.css | 53 +++++++ Vanilla JavaScript Stopwatch/stopwatch.html | 17 +++ Vanilla JavaScript Stopwatch/stopwatch.js | 60 ++++++++ 4 files changed, 284 insertions(+) create mode 100644 Vanilla JavaScript Stopwatch/README.md create mode 100644 Vanilla JavaScript Stopwatch/stopwatch.css create mode 100644 Vanilla JavaScript Stopwatch/stopwatch.html create mode 100644 Vanilla JavaScript Stopwatch/stopwatch.js diff --git a/Vanilla JavaScript Stopwatch/README.md b/Vanilla JavaScript Stopwatch/README.md new file mode 100644 index 000000000..b0e740b4b --- /dev/null +++ b/Vanilla JavaScript Stopwatch/README.md @@ -0,0 +1,154 @@ +# Simple Stopwatch Web Application + +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. + +## How to Use + +1. Open the `index.html` file in a web browser. + +2. The stopwatch will start at 00:00. + +3. Click the "Start" button to begin the stopwatch. + +4. Click the "Stop" button to pause the stopwatch. + +5. Click the "Reset" button to reset the stopwatch to 00:00. + +## Project Structure + +- `index.html`: The HTML file containing the structure of the webpage. +- `stopwatch.css`: The CSS file for styling the webpage. +- `stopwatch.js`: The JavaScript file responsible for stopwatch functionality. + +## CSS Styles for Simple Stopwatch Web Application +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. + +## Styles Overview + +### Global Styles + +- `body`: Sets the background color to `#ffa600`, which is a shade of orange. +- Sets the font family for the entire page to a list of fallback fonts to ensure readability. + +### Wrapper Styles + +- `.wrapper`: Defines the styles for the main content wrapper. + - Sets a fixed width of `800px`. + - Centers the wrapper horizontally on the page using `margin`. + - Sets the text color to white (`#fff`) for better visibility on the orange background. + +### Heading Styles + +- `h1`, `h2`, `h3`: Defines the styles for headings. + - Sets the font family to "Roboto" and specifies font-weight, size, and text transformation. + - These styles give the headings a modern, uppercase appearance. + +### Stopwatch Digits + +- `#seconds`, `#tens`: Styles for the stopwatch digits. + - Increases the font size for better visibility. + +### Button Styles + +- `button`: Defines the styles for buttons. + - Sets rounded corners using various vendor-specific properties for maximum browser compatibility. + - Sets the background color to the same orange as the body. + - Text color is white (`#fff`). + - Adds a white border. + - Adjusts padding, width, and margins. + - Removes the default button outline. + +- `button:hover`: Defines styles for button hover states. + - Transitions the background color, border, and text color to create a hover effect. + - When hovered over, the button's background becomes white, and the text color changes to the orange color used in the body. + +## Usage + +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. + +Feel free to adjust colors, fonts, and other properties to match your desired design. + +To apply these styles, link this CSS file in your HTML document, like so: + + + +## JavaScript Timer + +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. + +```javascript +window.onload = function () { + + var seconds = 0; + var tens = 0; + var appendTens = document.getElementById("tens") + var appendSeconds = document.getElementById("seconds") + var buttonStart = document.getElementById('button-start'); + var buttonStop = document.getElementById('button-stop'); + var buttonReset = document.getElementById('button-reset'); + var Interval ; + + buttonStart.onclick = function() { + + clearInterval(Interval); + Interval = setInterval(startTimer, 10); + } + + buttonStop.onclick = function() { + clearInterval(Interval); + } + + buttonReset.onclick = function() { + clearInterval(Interval); + tens = "00"; + seconds = "00"; + appendTens.innerHTML = tens; + appendSeconds.innerHTML = seconds; + } + + function startTimer () { + tens++; + + if(tens <= 9){ + appendTens.innerHTML = "0" + tens; + } + + if (tens > 9){ + appendTens.innerHTML = tens; + } + + if (tens > 99) { + console.log("seconds"); + seconds++; + appendSeconds.innerHTML = "0" + seconds; + tens = 0; + appendTens.innerHTML = "0" + 0; + } + + if (seconds > 9){ + appendSeconds.innerHTML = seconds; + } + } +} + diff --git a/Vanilla JavaScript Stopwatch/stopwatch.css b/Vanilla JavaScript Stopwatch/stopwatch.css new file mode 100644 index 000000000..c85e36874 --- /dev/null +++ b/Vanilla JavaScript Stopwatch/stopwatch.css @@ -0,0 +1,53 @@ +/* Variabes */ +/* Mixin's */ +body { + background: #ffa600; + font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + height: 100%; + } + + .wrapper { + width: 800px; + margin: 30px auto; + color: #fff; + text-align: center; + } + + h1, + h2, + h3 { + font-family: "Roboto", sans-serif; + font-weight: 100; + font-size: 2.6em; + text-transform: uppercase; + } + + #seconds, + #tens { + font-size: 2em; + } + + button { + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + border-radius: 5px; + -khtml-border-radius: 5px; + background: #ffa600; + color: #fff; + border: solid 1px #fff; + text-decoration: none; + cursor: pointer; + font-size: 1.2em; + padding: 18px 10px; + width: 180px; + margin: 10px; + outline: none; + } + button:hover { + -webkit-transition: all 0.5s ease-in-out; + -moz-transition: all 0.5s ease-in-out; + transition: all 0.5s ease-in-out; + background: #fff; + border: solid 1px #fff; + color: #ffa600; + } \ No newline at end of file diff --git a/Vanilla JavaScript Stopwatch/stopwatch.html b/Vanilla JavaScript Stopwatch/stopwatch.html new file mode 100644 index 000000000..b5d159d6c --- /dev/null +++ b/Vanilla JavaScript Stopwatch/stopwatch.html @@ -0,0 +1,17 @@ + + + + + + +
+ +

Stopwatch

+

Vanilla JavaScript Stopwatch

+

00:00

+ + + +
+ + \ No newline at end of file diff --git a/Vanilla JavaScript Stopwatch/stopwatch.js b/Vanilla JavaScript Stopwatch/stopwatch.js new file mode 100644 index 000000000..3a94b3627 --- /dev/null +++ b/Vanilla JavaScript Stopwatch/stopwatch.js @@ -0,0 +1,60 @@ +window.onload = function () { + + var seconds = 0; + var tens = 0; + var appendTens = document.getElementById("tens") + var appendSeconds = document.getElementById("seconds") + var buttonStart = document.getElementById('button-start'); + var buttonStop = document.getElementById('button-stop'); + var buttonReset = document.getElementById('button-reset'); + var Interval ; + + buttonStart.onclick = function() { + + clearInterval(Interval); + Interval = setInterval(startTimer, 10); + } + + buttonStop.onclick = function() { + clearInterval(Interval); + } + + + buttonReset.onclick = function() { + clearInterval(Interval); + tens = "00"; + seconds = "00"; + appendTens.innerHTML = tens; + appendSeconds.innerHTML = seconds; + } + + + + function startTimer () { + tens++; + + if(tens <= 9){ + appendTens.innerHTML = "0" + tens; + } + + if (tens > 9){ + appendTens.innerHTML = tens; + + } + + if (tens > 99) { + console.log("seconds"); + seconds++; + appendSeconds.innerHTML = "0" + seconds; + tens = 0; + appendTens.innerHTML = "0" + 0; + } + + if (seconds > 9){ + appendSeconds.innerHTML = seconds; + } + + } + + + } \ No newline at end of file