HTML

<button id="richMessageButton">Show message</button>
<p id="richMessageParagraph"></p>

JavaScript

let richMessageButton = document.getElementById(`richMessageButton`)
let richMessageParagraph = document.getElementById(`richMessageParagraph`)

let rich = false

richMessageButton.addEventListener(`click`, showRichMessage)

function showRichMessage() {
  if (// your code will appear here) {
    richMessageParagraph.innerHTML = `Get a job`
  }
}

Your code

HTML

<button id="famousMessageButton">Show message</button>
<p id="famousMessageParagraph"></p>

JavaScript

let famousMessageButton = document.getElementById(`famousMessageButton`)
let famousMessageParagraph = document.getElementById(`famousMessageParagraph`)

let famous = true

famousMessageButton.addEventListener(`click`, showFamousMessage)

function showFamousMessage() {
  if (// your code will appear here) {
    famousMessageParagraph.innerHTML = `Everybody knows you`
  }
}

Your code

HTML

<button id="button">off</button>

JavaScript

let button = document.getElementById(`button`)

let on = false

button.addEventListener(`click`, toggleText)

function toggleText() {
  if (// your code will appear here) {
    this.innerHTML = `on`
    on = true
  }
  else {
    this.innerHTML = `off`
    on = false
  }
}

Your code

HTML

<button id="turnButton">Take turn</button>
<p id="turnParagraph">Player 1's turn</p>

JavaScript

let turnButton = document.getElementById(`turnButton`)
let turnParagraph = document.getElementById(`turnParagraph`)

let player1Turn = true

turnButton.addEventListener(`click`, takeTurn)

function takeTurn() {
  if (// your code will appear here) {
    turnParagraph.innerHTML = `Player 2's turn`
    player1Turn = false
  }
  else {
    turnParagraph.innerHTML = `Player 1's turn`
    player1Turn = true
  }
}

Your code

HTML

<img src="/img/cat.png" id="cat">

JavaScript

let cat = document.getElementById(`cat`)

let catVisible = true

cat.addEventListener(`click`, toggleOpacity)

function toggleOpacity() {
  if (catVisible == true) {
    this.style.opacity = `0%`
    // your code will appear here
  }
  else {
    this.style.opacity = `100%`
    catVisible = true
  }
}

Your code

Test your code

HTML

<img src="/img/dog.png" id="dog">

JavaScript

let dog = document.getElementById(`dog`)

let dogRotated = false

dog.addEventListener(`click`, toggleRotation)

function toggleRotation() {
  if (dogRotated == false) {
    this.style.transform = `rotate(180deg)`
    // your code will appear here
  }
  else {
    this.style.transform = `rotate(0deg)`
    dogRotated = false
  }
}

Your code

Test your code

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

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

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

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

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

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