Exercise Set 3

Exercise 1 of 12

Watch the this video. Change each button's background color when clicked.

HTML

<button id="colorButton1">Button 1</button>
<button id="colorButton2">Button 2</button>
<button id="colorButton3">Button 3</button>

JavaScript

let colorButton1 = document.getElementById(`colorButton1`)
let colorButton2 = document.getElementById(`colorButton2`)
let colorButton3 = document.getElementById(`colorButton3`)

colorButton1.addEventListener(`click`, changeColor)
colorButton2.addEventListener(`click`, changeColor)
colorButton3.addEventListener(`click`, changeColor)

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

Your code

Test your code

Exercise 2 of 12

Change each button's opacity when clicked. Use the opacity style.

HTML

<button id="opacityButton1">Button 1</button>
<button id="opacityButton2">Button 2</button>
<button id="opacityButton3">Button 3</button>

JavaScript

let opacityButton1 = document.getElementById(`opacityButton1`)
let opacityButton2 = document.getElementById(`opacityButton2`)
let opacityButton3 = document.getElementById(`opacityButton3`)

opacityButton1.addEventListener(`click`, changeOpacity)
opacityButton2.addEventListener(`click`, changeOpacity)
opacityButton3.addEventListener(`click`, changeOpacity)

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

Your code

Test your code

Exercise 3 of 12

Change each image's opacity when clicked.

HTML

<img src="/img/cat.png" id="opacityImage1">
<img src="/img/dog.png" id="opacityImage2">
<img src="/img/wolf.png" id="opacityImage3">

JavaScript

let opacityImage1 = document.getElementById(`opacityImage1`)
let opacityImage2 = document.getElementById(`opacityImage2`)
let opacityImage3 = document.getElementById(`opacityImage3`)

opacityImage1.addEventListener(`click`, changeImageOpacity)
opacityImage2.addEventListener(`click`, changeImageOpacity)
opacityImage3.addEventListener(`click`, changeImageOpacity)

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

Your code

Test your code

Exercise 4 of 12

Change each image's rotation when clicked. Use the transform style.

HTML

<img src="/img/cat.png" id="rotationImage1">
<img src="/img/dog.png" id="rotationImage2">
<img src="/img/wolf.png" id="rotationImage3">

JavaScript

let rotationImage1 = document.getElementById(`rotationImage1`)
let rotationImage2 = document.getElementById(`rotationImage2`)
let rotationImage3 = document.getElementById(`rotationImage3`)

rotationImage1.addEventListener(`click`, changeImageRotation)
rotationImage2.addEventListener(`click`, changeImageRotation)
rotationImage3.addEventListener(`click`, changeImageRotation)

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

Your code

Test your code

Exercise 5 of 12

Change each button's text to `on` when clicked.

HTML

<button id="button1">off</button>
<button id="button2">off</button>
<button id="button3">off</button>

JavaScript

let button1 = document.getElementById(`button1`)
let button2 = document.getElementById(`button2`)
let button3 = document.getElementById(`button3`)

button1.addEventListener(`click`, changeText)
button2.addEventListener(`click`, changeText)
button3.addEventListener(`click`, changeText)

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

Your code

Test your code

Exercise 6 of 12

Erase each paragraph when clicked.

HTML

<p id="paragraph1">Erase me</p>
<p id="paragraph2">Erase me</p>
<p id="paragraph3">Erase me</p>

JavaScript

let paragraph1 = document.getElementById(`paragraph1`)
let paragraph2 = document.getElementById(`paragraph2`)
let paragraph3 = document.getElementById(`paragraph3`)

paragraph1.addEventListener(`click`, eraseText)
paragraph2.addEventListener(`click`, eraseText)
paragraph3.addEventListener(`click`, eraseText)

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

Your code

Test your code

Paragraph 1

Paragraph 2

Paragraph 3

Exercise 7 of 12

Set the paintbrush variable to a color when the dip brush button is clicked.

HTML

<button id="dipBrushButton">Dip brush</button>
<button id="applyBrushButton">Apply brush</button>
<p id="brushParagraph">Brush color: none</p>

JavaScript

let dipBrushButton = document.getElementById(`dipBrushButton`)
let applyBrushButton = document.getElementById(`applyBrushButton`)
let brushParagraph = document.getElementById(`brushParagraph`)
  
let paintbrush

dipBrushButton.addEventListener(`click`, dipBrush)
applyBrushButton.addEventListener(`click`, applyBrush)

function dipBrush() {
  // your code will appear here
  brushParagraph.innerHTML = `Brush color: ${paintbrush}`
}

function applyBrush() {
  this.style.backgroundColor = paintbrush
}

Your code

Test your code

Brush color: none

Exercise 8 of 12

Set the opacity variable to an opacity value when the select opacity button is clicked.

HTML

<button id="selectOpacityButton">Select opacity</button>
<button id="applyOpacityButton">Apply opacity</button>
<p id="opacityParagraph">Selected opacity: none</p>

JavaScript

let selectOpacityButton = document.getElementById(`selectOpacityButton`)
let applyOpacityButton = document.getElementById(`applyOpacityButton`)
let opacityParagraph = document.getElementById(`opacityParagraph`)
  
let opacity

selectOpacityButton.addEventListener(`click`, selectOpacity)
applyOpacityButton.addEventListener(`click`, applyOpacity)

function selectOpacity() {
  // your code will appear here
  opacityParagraph.innerHTML = `Selected opacity: ${opacity}`
}

function applyOpacity() {
  this.style.opacity = opacity
}

Your code

Test your code

Selected opacity: none

Exercise 9 of 12

Set the fontSize variable to a number when the select font size button is clicked.

HTML

<button id="selectFontSizeButton">Select font size</button>
<button id="applyFontSizeButton">Apply font size</button>
<p id="fontSizeParagraph">Selected font size: none</p>

JavaScript

let selectFontSizeButton = document.getElementById(`selectFontSizeButton`)
let applyFontSizeButton = document.getElementById(`applyFontSizeButton`)
let fontSizeParagraph = document.getElementById(`fontSizeParagraph`)
  
let fontSize

selectFontSizeButton.addEventListener(`click`, selectFontSize)
applyFontSizeButton.addEventListener(`click`, applyFontSize)

function selectFontSize() {
  // your code will appear here
  fontSizeParagraph.innerHTML = `Selected font size: ${fontSize}px`
}

function applyFontSize() {
  fontSizeParagraph.style.fontSize = `${fontSize}px`
}

Your code

Test your code

Selected font size: none

Exercise 10 of 12

Set the width variable to a number when the select width button is clicked.

HTML

<button id="selectWidthButton">Select width</button>
<button id="applyWidthButton">Apply width</button>
<p id="widthParagraph">Selected width: none</p>

JavaScript

let selectWidthButton = document.getElementById(`selectWidthButton`)
let applyWidthButton = document.getElementById(`applyWidthButton`)
let widthParagraph = document.getElementById(`widthParagraph`)
  
let width

selectWidthButton.addEventListener(`click`, selectWidth)
applyWidthButton.addEventListener(`click`, applyWidth)

function selectWidth() {
  // your code will appear here
  widthParagraph.innerHTML = `Selected width: ${width}px`
}

function applyWidth() {
  this.style.width = `${width}px`
}

Your code

Test your code

Selected width: none

Exercise 11 of 12

Set the rotation variable to a number when the select rotation button is clicked.

HTML

<button id="selectRotationButton">Select rotation</button>
<button id="applyRotationButton">Apply rotation</button>
<p id="rotationParagraph">Selected rotation: none</p>

JavaScript

let selectRotationButton = document.getElementById(`selectRotationButton`)
let applyRotationButton = document.getElementById(`applyRotationButton`)
let rotationParagraph = document.getElementById(`rotationParagraph`)
  
let rotation

selectRotationButton.addEventListener(`click`, selectRotation)
applyRotationButton.addEventListener(`click`, applyRotation)

function selectRotation() {
  // your code will appear here
  rotationParagraph.innerHTML = `Selected rotation: rotate(${rotation}deg)`
}

function applyRotation() {
  this.style.transform = `rotate(${rotation}deg)`
}

Your code

Test your code

Selected rotation: none

Exercise 12 of 12

Set the items variable to a number when the add to cart button is clicked.

HTML

<button id="cartButton">Add to cart</button>
<button id="checkoutButton">Checkout</button>
<p id="cartParagraph">Items in cart: 0</p>
<p id="costParagraph">Cost per item: $10</p>
<p id="checkoutParagraph">Total cost: $0</p>

JavaScript

let cartButton = document.getElementById(`cartButton`)
let checkoutButton = document.getElementById(`checkoutButton`)
let cartParagraph = document.getElementById(`cartParagraph`)
let checkoutParagraph = document.getElementById(`checkoutParagraph`)
  
let items = 0

cartButton.addEventListener(`click`, addToCart)
checkoutButton.addEventListener(`click`, checkout)

function addToCart() {
  // your code will appear here
  cartParagraph.innerHTML = `Items in cart: ${items}`
}

function checkout() {
  checkoutParagraph.innerHTML = `Total cost: $${items * 10}`
}

Your code

Test your code

Items in cart: 0

Cost per item: $10

Total cost: $0