Some of Our Sources
- BoingBoing
- Six Revisions
- FanExtra - PSD
- Noupe
- Fudge Graphics
- Stylized Web
- Specky Boy
- CSS Tricks
- Spyre Studios
- Willems Lab
Help Webnuz
Referal links:
September 9, 2022 03:30 pm GMT
Original Link: https://dev.to/robsonmuniz16/build-a-stopwatch-css-javascript-4o64
Build A StopWatch | CSS & JavaScript
Learn how to build a stopwatch in HTML, CSS and JavaScript using modern syntax. A timer stopwatch using start, stop and reset event listeners on click.
In this first part, we build the stopwatch's user interface with HTML and CSS:
HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Stopwatch JavaScript</title> <link rel="stylesheet" href="style.css"> <script defer src="app.js"></script> </link></head><body> <div class="stopwatch"> <h1>Stopwatch <span class="gold">JavaScript</span></h1> <div class="circle"> <span class="time" id="display">00:00:00</span> </div> <div class="controls"> <button> <ion-icon class="play" name="play-outline"></ion-icon> <ion-icon class="pause" name="pause-outline"></ion-icon> </button> <button> <ion-icon class="reset" name="refresh-outline"></ion-icon> </button> </div> </div> <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script></body></html>CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');body { background-color: #31394c; color: #fff;}h1 { font-size: 48px; font-family: 'Poppins', sans-serif; font-weight: 200; text-align: center; line-height: 59px; padding: 0 64px; margin: 0;}.stopwatch { margin-top: 15rem; display: grid; justify-items: center; grid-row-gap: 23px; width: 100%; padding-top: 25px;}.gold { font-weight: 900; color: #f2c94c; text-shadow: 0 0 0px #fff, 0 0 50px #f2c94c;}.time { font-family: sans-serif, monospace; font-weight: 300; font-size: 48px;}.circle { margin-top: 5rem; display: flex; justify-content: center; align-items: center; border: 2px solid; width: 270px; height: 270px; border-radius: 50%; font-family: sans-serif;}.controls { display: flex; justify-content: space-between; width: 178px;}button { background: transparent; padding: 0; border: none; margin: 0; outline: none; font-size: 50px; color: #fff; cursor: pointer; transition: all 0.5s ease;}button:active { transform: scale(.90); }button:hover { color: #f2c94c;}.play { display: block;}.pause { display: none;}Then we'll make the user interface functional with JavaScript (the stopwatch works).
//Create Event Listenersconst playButton = document.querySelector('.play')const pauseButton = document.querySelector('.pause')const resetButton = document.querySelector('.reset')playButton.addEventListener('click', start)pauseButton.addEventListener('click', pause)resetButton.addEventListener('click', reset)//Declare variable to use in our Functions Belowlet startTimelet elapsedTime = 0let timerInterval//Convert time to a format of hours, minutes, and millisecondsfunction timeToString(time){ let diffInHrs = time / 3600000 let hh = Math.floor(diffInHrs) let diffInMin = (diffInHrs - hh) * 60 let mm = Math.floor(diffInMin) let diffInSec = (diffInMin - mm) * 60 let ss = Math.floor(diffInSec) let diffInMs = (diffInSec - ss) * 100 let ms = Math.floor(diffInMs) let formattedMM = mm.toString().padStart(2, '0') let formattedSS = ss.toString().padStart(2, '0') let formattedMS = ms.toString().padStart(2, '0') return `${formattedMM}:${formattedSS}:${formattedMS}`}function showButton(buttonKey){ const buttonToShow = buttonKey === 'play' ? playButton : pauseButton const buttonToHide = buttonKey === 'play' ? pauseButton :playButton buttonToShow.style.display = 'block' buttonToHide.style.display = 'none'}//Create Function to Modify innerHTMLfunction print(txt){ document.getElementById('display').innerHTML = txt}// Create start, pause and reset functionsfunction start(){ startTime = Date.now() - elapsedTime timerInterval = setInterval(function printTime(){ elapsedTime = Date.now() - startTime print(timeToString(elapsedTime)) },10) showButton('pause')}function pause(){ clearInterval(timerInterval) showButton('play')}function reset(){ clearInterval(timerInterval) print('00:00:00') elapsedTime = 0 showButton('play')} Follow Me If You Want to Increase Your Dev Skills with Project-Based Learning:
YouTube: https://bit.ly/WDevMadeEasy
Facebook: https://bit.ly/3cp2S5W
Instagram (New): https://bit.ly/3ura3TW
Original Link: https://dev.to/robsonmuniz16/build-a-stopwatch-css-javascript-4o64
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To