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
Test your code
Money: $0
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
Test your code
Score: 0
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
Test your code
Points: 0
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
Test 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
Test 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
Test your code
Number: 1
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
Test 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
Test 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
Test 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
Test 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
Test 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
Test your code