Timing Events

To have a function run automatically over and over again, use the setInterval function, which takes in two arguments. The first argument specifies what function to run automatically. The second argument specifies how often to run the function, specified in milliseconds. There are 1000 milliseconds in 1 second. Example of having a function called doSomething run automatically every second: 
setInterval(doSomething, 1000)
To stop a function from running, use the clearInterval function. When calling setInterval, an interval ID is returned, which can be stored in a variable. When calling clearInterval, pass in the interval ID. Example: 
let intervalId = setInterval(doSomething, 1000)
clearInterval(intervalId)
To have a function run just once after a delay, use the setTimeout function, which is very similar to setInterval. Example of having a function called doSomething run after 3 seconds: 
setTimeout(doSomething, 3000)
To stop the function from running, use the clearTimeout function, which is very similar to clearInterval. Example: 
let timeoutId = setTimeout(doSomething, 3000)
clearTimeout(timeoutId)

Exercise 1 of 6

Start the timer when the button is clicked.

HTML

<button id="startTimerButton">Start</button>
<p id="timeParagraph">Time: 0</p>

JavaScript

let startTimerButton = document.getElementById(`startTimerButton`)
let timeParagraph = document.getElementById(`timeParagraph`)

let time = 0

startTimerButton.addEventListener(`click`, startTimer)

function startTimer() {
  // your code will appear here
}

function runTimer() {
  time = time + 1
  timeParagraph.innerHTML = `Time: ${time}`
}

Your code

Test your code

Time: 0

Exercise 2 of 6

Automatically increase the button's width when clicked.

HTML

<button id="autoWidthButton">Auto increase width</button>

JavaScript

let autoWidthButton = document.getElementById(`autoWidthButton`)

let width = 200

autoWidthButton.addEventListener(`click`, autoIncreaseWidth)

function autoIncreaseWidth() {
  // your code will appear here
}

function increaseWidth() {
  width = width + 1
  autoWidthButton.style.width = `${width}px`
}

Your code

Test your code

Exercise 3 of 6

Stop the counter when the stop button is clicked.

HTML

<button id="startCounterButton">Start</button>
<button id="stopCounterButton">Stop</button>
<p id="countParagraph">Count: 0</p>

JavaScript

let startCounterButton = document.getElementById(`startCounterButton`)
let stopCounterButton = document.getElementById(`stopCounterButton`)
let countParagraph = document.getElementById(`countParagraph`)

let count = 0
let intervalId

startCounterButton.addEventListener(`click`, startCounter)
stopCounterButton.addEventListener(`click`, stopCounter)

function startCounter() {
  intervalId = setInterval(runCounter, 100)
}

function stopCounter() {
  // your code will appear here
}

function runCounter() {
  count = count + 1
  countParagraph.innerHTML = `Count: ${count}`
}

Your code

Test your code

Count: 0

Exercise 4 of 6

Stop decreasing the paragraph's font size when the stop button is clicked.

HTML

<button id="autoFontSizeButton">Auto decrease font size</button>
<button id="stopFontSizeButton">Stop</button>
<p id="fontSizeParagraph">This message will shrink</p>

JavaScript

let autoFontSizeButton = document.getElementById(`autoFontSizeButton`)
let stopFontSizeButton = document.getElementById(`stopFontSizeButton`)
let fontSizeParagraph = document.getElementById(`fontSizeParagraph`)

let fontSize = 18
let autoFontSizeId

autoFontSizeButton.addEventListener(`click`, autoDecreaseFontSize)
stopFontSizeButton.addEventListener(`click`, stopFontSize)

function autoDecreaseFontSize() {
  autoFontSizeId = setInterval(decreaseFontSize, 500)
}

function stopFontSize() {
  // your code will appear here
}

function decreaseFontSize() {
  fontSize = fontSize - 1
  fontSizeParagraph.style.fontSize = `${fontSize}px`
}

Your code

Test your code

This message will shrink

Exercise 5 of 6

Show the message after 1 second when the button is clicked. Do NOT use setInterval.

HTML

<button id="delayedMessageButton">Show delayed message</button>
<p id="delayedMessageParagraph"></p>

JavaScript

let delayedMessageButton = document.getElementById(`delayedMessageButton`)
let delayedMessageParagraph = document.getElementById(`delayedMessageParagraph`)

delayedMessageButton.addEventListener(`click`, showDelayedMessage)

function showDelayedMessage() {
  // your code will appear here
}

function displayMessage() {
  delayedMessageParagraph.innerHTML = `This is a delayed message`
}

Your code

Test your code

Exercise 6 of 6

Change the button's background color after 1 second when clicked. Do NOT use setInterval.

HTML

<button id="backgroundColorButton">Change background color after delay</button>

JavaScript

let backgroundColorButton = document.getElementById(`backgroundColorButton`)

backgroundColorButton.addEventListener(`click`, changeBackgroundColorAfterDelay)

function changeBackgroundColorAfterDelay() {
  // your code will appear here
}

function changeBackgroundColor() {
  backgroundColorButton.style.backgroundColor = `yellow`
}

Your code

Test your code

Last section Next section