⏱️Build A StopWatch | CSS & JavaScript🚀
Tags: javascript, webdev, tutorial, beginners
Published: 2022-09-09 15:30:31

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.

{% youtube v0hZt3i9wIQ %}

**In this first part, we build the stopwatch's user interface with HTML and CSS:**

**HTML**
```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/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>

</body>

</html>
```
**CSS**
```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).**

```JavaScript
//Create Event Listeners

const 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 Below
let startTime
let elapsedTime = 0
let timerInterval

//Convert time to a format of hours, minutes, and milliseconds

function  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 innerHTML
function print(txt){
    document.getElementById('display').innerHTML = txt
}

// Create start, pause and reset functions

function 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