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
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
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
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
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
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
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
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
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
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
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
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