Lesson 4 - Challenge 2 - STARTER

by nathanesa

HTML

<div id='container'>

  <div id='display'>
  0 : 0
  </div>

  <div id='buttons'>
    <button onclick='start()'>START</button>
    <button onclick="stop()">STOP</button><br>
    <button>RESET</button>
  </div>  

</div>

CSS

body{
  background-color: #445;
}

div {
  text-align: center;
  font-size: 60px;
}

#container{
  background-color: white;
  margin-top: 200px;
  border: solid;
  border-radius: 10px;
  width: 250px;
  height: 225px;
  margin-left: auto;
  margin-right: auto;
}

JavaScript

let seconds = 0;
let minutes = 0;
let timer;

// Updates the time by increasing the number of seconds by 1, then displaying the new time.
function updateTime() {
  seconds = seconds + 1;
  document.getElementById('display').innerHTML = minutes + ' : ' + seconds;
}

// Starts the stopwatch.
function start() {
	timer = setInterval(updateTime, 1000);
}

// Pauses the stopwatch.
function stop() {
 	clearInterval(timer);
}