HTML

<button id="greetingButton">Say greeting</button>
<p id="greetingParagraph"></p>

JavaScript

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

// your code will appear here

function sayGreeting() {
  greetingParagraph.innerHTML = `Welcome to exercise set 1`
}

Your code

HTML

<button id="jokeButton">Tell joke</button>
<p id="jokeParagraph"></p>

JavaScript

let jokeButton = document.getElementById(`jokeButton`)
let jokeParagraph = document.getElementById(`jokeParagraph`)

// your code will appear here

function tellJoke() {
  jokeParagraph.innerHTML = `What do you call 2000 mockingbirds?`
}

Your code

HTML

<button id="answerButton">Show answer</button>
<p id="answerParagraph"></p>

JavaScript

let answerButton = document.getElementById(`answerButton`)
let answerParagraph = document.getElementById(`answerParagraph`)

// your code will appear here

function showAnswer() {
  answerParagraph.innerHTML = `Two kilo mockingbird`
}

Your code

HTML

<p id="textParagraph">Click me</p>

JavaScript

let textParagraph = document.getElementById(`textParagraph`)

// your code will appear here

function changeText() {
  textParagraph.innerHTML = `Good job!`
}

Your code

HTML

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

JavaScript

let cat = document.getElementById(`cat`)
let catParagraph = document.getElementById(`catParagraph`)

// your code will appear here

function makeCatSound() {
  catParagraph.innerHTML = `Meow`
}

Your code

Test your code

HTML

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

JavaScript

let dog = document.getElementById(`dog`)
let dogParagraph = document.getElementById(`dogParagraph`)

// your code will appear here

function makeDogSound() {
  dogParagraph.innerHTML = `Woof`
}

Your code

Test your code

HTML

<button id="nameButton">Show name</button>
<p id="nameParagraph"></p>

JavaScript

let nameButton = document.getElementById(`nameButton`)
let nameParagraph = document.getElementById(`nameParagraph`)

nameButton.addEventListener(`click`, showName)

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

Your code

HTML

<button id="ageButton">Show age</button>
<p id="ageParagraph"></p>

JavaScript

let ageButton = document.getElementById(`ageButton`)
let ageParagraph = document.getElementById(`ageParagraph`)

ageButton.addEventListener(`click`, showAge)

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

Your code

HTML

<button id="messageButton">Show message</button>
<p id="messageParagraph"></p>

JavaScript

let messageButton = document.getElementById(`messageButton`)
let messageParagraph = document.getElementById(`messageParagraph`)

messageButton.addEventListener(`click`, showMessage)

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

Your code

HTML

<button id="eraseButton">Erase message</button>
<p id="messageDisplay">Erase me</p>

JavaScript

let eraseButton = document.getElementById(`eraseButton`)
let messageDisplay = document.getElementById(`messageDisplay`)

eraseButton.addEventListener(`click`, eraseMessage)

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

Your code

HTML

<button id="changeButton">Change my text</button>

JavaScript

let changeButton = document.getElementById(`changeButton`)

changeButton.addEventListener(`click`, changeText)

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

Your code

HTML

<button id="boxButton">Show message in box</button>
<div id="box"></div>

JavaScript

let boxButton = document.getElementById(`boxButton`)
let box = document.getElementById(`box`)

boxButton.addEventListener(`click`, showMessageInBox)

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

Your code