HTML
<button id="backgroundColorButton">Change my background color</button>
JavaScript
let backgroundColorButton = document.getElementById(`backgroundColorButton`) backgroundColorButton.addEventListener(`click`, changeBackgroundColor) function changeBackgroundColor() { // your code will appear here }
Your code
Test your code
HTML
<button id="paragraphBackgroundColorButton">Change background color</button> <p id="backgroundColorParagraph">Change my background color</p>
JavaScript
let paragraphBackgroundColorButton = document.getElementById(`paragraphBackgroundColorButton`) let backgroundColorParagraph = document.getElementById(`backgroundColorParagraph`) paragraphBackgroundColorButton.addEventListener(`click`, changeParagraphBackgroundColor) function changeParagraphBackgroundColor() { // your code will appear here }
Your code
Test your code
Change my background color
HTML
<button id="colorButton">Change text color</button> <p id="colorParagraph">Change my text color</p>
JavaScript
let colorButton = document.getElementById(`colorButton`) let colorParagraph = document.getElementById(`colorParagraph`) colorButton.addEventListener(`click`, changeTextColor) function changeTextColor() { // your code will appear here }
Your code
Test your code
Change my text color
HTML
<button id="boxColorButton">Change text color</button> <div id="colorBox">Change my text color</div>
JavaScript
let boxColorButton = document.getElementById(`boxColorButton`) let colorBox = document.getElementById(`colorBox`) boxColorButton.addEventListener(`click`, changeBoxTextColor) function changeBoxTextColor() { // your code will appear here }
Your code
Test your code
HTML
<button id="fontSizeButton">Change font size</button> <p id="fontSizeParagraph">Change my font size</p>
JavaScript
let fontSizeButton = document.getElementById(`fontSizeButton`) let fontSizeParagraph = document.getElementById(`fontSizeParagraph`) fontSizeButton.addEventListener(`click`, changeFontSize) function changeFontSize() { // your code will appear here }
Your code
Test your code
Change my font size
HTML
<button id="boxFontSizeButton">Change font size</button> <div id="fontSizeBox">Change my font size</div>
JavaScript
let boxFontSizeButton = document.getElementById(`boxFontSizeButton`) let fontSizeBox = document.getElementById(`fontSizeBox`) boxFontSizeButton.addEventListener(`click`, changeBoxFontSize) function changeBoxFontSize() { // your code will appear here }
Your code
Test your code
HTML
<button id="widthButton">Change my width</button>
JavaScript
let widthButton = document.getElementById(`widthButton`) widthButton.addEventListener(`click`, changeWidth) function changeWidth() { // your code will appear here }
Your code
Test your code
HTML
<button id="boxWidthButton">Change width</button> <div id="widthBox"></div>
JavaScript
let boxWidthButton = document.getElementById(`boxWidthButton`) let widthBox = document.getElementById(`widthBox`) boxWidthButton.addEventListener(`click`, changeBoxWidth) function changeBoxWidth() { // your code will appear here }
Your code
Test your code
HTML
<button id="opacityButton">Change my opacity</button>
JavaScript
let opacityButton = document.getElementById(`opacityButton`) opacityButton.addEventListener(`click`, changeOpacity) function changeOpacity() { // your code will appear here }
Your code
Test your code
HTML
<button id="catOpacityButton">Change opacity</button> <img src="/img/cat.png" id="cat">
JavaScript
let catOpacityButton = document.getElementById(`catOpacityButton`) let cat = document.getElementById(`cat`) catOpacityButton.addEventListener(`click`, changeCatOpacity) function changeCatOpacity() { // your code will appear here }
Your code
Test your code
HTML
<button id="rotationButton">Change rotation</button>
JavaScript
let rotationButton = document.getElementById(`rotationButton`) rotationButton.addEventListener(`click`, changeRotation) function changeRotation() { // your code will appear here }
Your code
Test your code
HTML
<button id="dogRotationButton">Change rotation</button> <img src="/img/dog.png" id="dog">
JavaScript
let dogRotationButton = document.getElementById(`dogRotationButton`) let dog = document.getElementById(`dog`) dogRotationButton.addEventListener(`click`, changeDogRotation) function changeDogRotation() { // your code will appear here }
Your code
Test your code