More Styles
For a refresher, look at the
setting style exercises.
Exercise 1 of 6
Change the button's width when clicked.
Use the
width
style.
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
Exercise 2 of 6
Change the box's width when the button is clicked.
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
Exercise 3 of 6
Change the button's opacity when clicked.
Use the
opacity
style.
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
Exercise 4 of 6
Change the cat's opacity when the button is clicked.
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
Exercise 5 of 6
Change the button's rotation when clicked.
Use the
transform
style.
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
Exercise 6 of 6
Change the dog's rotation when the button is clicked.
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
