HTML

<button id="moneyButton">Increase money by 1</button>
<p id="moneyParagraph">Money: $0</p>

JavaScript

let moneyButton = document.getElementById(`moneyButton`)
let moneyParagraph = document.getElementById(`moneyParagraph`)

let money = 0

moneyButton.addEventListener(`click`, increaseMoney)

function increaseMoney() {
  // your code will appear here
  moneyParagraph.innerHTML = `Money: $${money}`
}

Your code

HTML

<button id="scoreButton">Increase score by 2</button>
<p id="scoreParagraph">Score: 0</p>

JavaScript

let scoreButton = document.getElementById(`scoreButton`)
let scoreParagraph = document.getElementById(`scoreParagraph`)

let score = 0

scoreButton.addEventListener(`click`, increaseScore)

function increaseScore() {
  // your code will appear here
  scoreParagraph.innerHTML = `Score: ${score}`
}

Your code

HTML

<button id="pointsButton">Decrease points by 1</button>
<p id="pointsParagraph">Points: 0</p>

JavaScript

let pointsButton = document.getElementById(`pointsButton`)
let pointsParagraph = document.getElementById(`pointsParagraph`)

let points = 0

pointsButton.addEventListener(`click`, decreasePoints)

function decreasePoints() {
  // your code will appear here
  pointsParagraph.innerHTML = `Points: ${points}`
}

Your code

HTML

<button id="increaseWidthButton">Increase width by 10</button>

JavaScript

let increaseWidthButton = document.getElementById(`increaseWidthButton`)

let width = 200

increaseWidthButton.addEventListener(`click`, increaseWidth)

function increaseWidth() {
  // your code will appear here
  increaseWidthButton.style.width = `${width}px`
}

Your code

HTML

<button id="decreaseOpacityButton">Decrease opacity by 10</button>

JavaScript

let decreaseOpacityButton = document.getElementById(`decreaseOpacityButton`)

let opacity = 100

decreaseOpacityButton.addEventListener(`click`, decreaseOpacity)

function decreaseOpacity() {
  // your code will appear here
  decreaseOpacityButton.style.opacity = `${opacity}%`
}

Your code

HTML

<button id="numberButton">Double the number</button>
<p id="numberParagraph">Number: 1</p>

JavaScript

let numberButton = document.getElementById(`numberButton`)
let numberParagraph = document.getElementById(`numberParagraph`)

let number = 1

numberButton.addEventListener(`click`, doubleNumber)

function doubleNumber() {
  // your code will appear here
  numberParagraph.innerHTML = `Number: ${number}`
}

Your code

HTML

<button id="moneyMessageButton">Show message</button>
<p id="moneyMessageParagraph"></p>

JavaScript

let moneyMessageButton = document.getElementById(`moneyMessageButton`)
let moneyMessageParagraph = document.getElementById(`moneyMessageParagraph`)

let money = 10

moneyMessageButton.addEventListener(`click`, showMoneyMessage)

function showMoneyMessage() {
  if (// your code will appear here) {
    moneyMessageParagraph.innerHTML = `I have at least $10`
  }
}

Your code

HTML

<button id="scoreMessageButton">Show message</button>
<p id="scoreMessageParagraph"></p>

JavaScript

let scoreMessageButton = document.getElementById(`scoreMessageButton`)
let scoreMessageParagraph = document.getElementById(`scoreMessageParagraph`)

let score = 99.5

scoreMessageButton.addEventListener(`click`, showScoreMessage)

function showScoreMessage() {
  if (// your code will appear here) {
    scoreMessageParagraph.innerHTML = `My score is less than 100`
  }
}

Your code

HTML

<button id="pointsMessageButton">Show message</button>
<p id="pointsMessageParagraph"></p>

JavaScript

let pointsMessageButton = document.getElementById(`pointsMessageButton`)
let pointsMessageParagraph = document.getElementById(`pointsMessageParagraph`)

let points = 200.5

pointsMessageButton.addEventListener(`click`, showPointsMessage)

function showPointsMessage() {
  if (// your code will appear here) {
    pointsMessageParagraph.innerHTML = `I have more than 200 points`
  }
}

Your code

HTML

<button id="numberMessageButton">Show message</button>
<p id="numberMessageParagraph"></p>

JavaScript

let numberMessageButton = document.getElementById(`numberMessageButton`)
let numberMessageParagraph = document.getElementById(`numberMessageParagraph`)

let number = 0

numberMessageButton.addEventListener(`click`, showNumberMessage)

function showNumberMessage() {
  if (// your code will appear here) {
    numberMessageParagraph.innerHTML = `The number is not positive`
  }
}

Your code

HTML

<input type="text" placeholder="magic word" value="now" id="magicWordInput">
<button id="responseButton">Show response</button>
<p id="responseParagraph"></p>

JavaScript

let magicWordInput = document.getElementById(`magicWordInput`)
let responseButton = document.getElementById(`responseButton`)
let responseParagraph = document.getElementById(`responseParagraph`)

responseButton.addEventListener(`click`, showResponse)

function showResponse() {
  if (// your code will appear here) {
    responseParagraph.innerHTML = `You didn't say the magic word`
  }
}

Your code

HTML

<input type="text" placeholder="name" value="James Bond" id="nameInput">
<button id="greetingButton">Say greeting</button>
<p id="greetingParagraph"></p>

JavaScript

let nameInput = document.getElementById(`nameInput`)
let greetingButton = document.getElementById(`greetingButton`)
let greetingParagraph = document.getElementById(`greetingParagraph`)

greetingButton.addEventListener(`click`, sayGreeting)

function sayGreeting() {
  if (// your code will appear here) {
    greetingParagraph.innerHTML = `My name is Bond, James Bond`
  }
}

Your code