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

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

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

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

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

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

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

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

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

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

Change opacity

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

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

Change rotation