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
Test 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
Test 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
Test 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
Test your code
Player 1's turn
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
Test your code
Time: 0
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
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
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
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
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