let
when creating a
variable, but not when changing the value of the variable later.
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