Exercise Set 2

Exercise 1 of 6

Watch the setting style video. Change the button's background color when it's clicked.

HTML

<button id="changeColorButton">Change background color</button>

JavaScript

var changeColorButton = document.getElementById("changeColorButton");

changeColorButton.addEventListener("click", changeColor);

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

You must be signed in to type your code.

Exercise 2 of 6

Change the button's width when it's clicked. Use the width style.

HTML

<button id="changeWidthButton">Change width</button>

JavaScript

var changeWidthButton = document.getElementById("changeWidthButton");

changeWidthButton.addEventListener("click", changeWidth);

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

You must be signed in to type your code.

Exercise 3 of 6

Change the paragraph's color when the button is clicked. Use the color style.

HTML

<button id="changeTextColorButton">Change color</button>
<p id="changeColorParagraph">Change my color</p>

JavaScript

var changeTextColorButton = document.getElementById("changeTextColorButton");
var changeColorParagraph = document.getElementById("changeColorParagraph");

changeTextColorButton.addEventListener("click", changeTextColor);

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

You must be signed in to type your code.

Exercise 4 of 6

Change the paragraph's font size when the button is clicked. Use the font-size style.

HTML

<button id="changeSizeButton">Change font size</button>
<p id="changeSizeParagraph">Change my font size</p>

JavaScript

var changeSizeButton = document.getElementById("changeSizeButton");
var changeSizeParagraph = document.getElementById("changeSizeParagraph");

changeSizeButton.addEventListener("click", changeSize);

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

You must be signed in to type your code.

Exercise 5 of 6

Change the cat's opacity when the button is clicked. Use the opacity style.

HTML

<button id="changeOpacityButton">Change opacity</button>
<img src="/img/cat.png" id="cat">

JavaScript

var changeOpacityButton = document.getElementById("changeOpacityButton");
var cat = document.getElementById("cat");

changeOpacityButton.addEventListener("click", changeOpacity);

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

You must be signed in to type your code.

Exercise 6 of 6

Change the dog's rotation when the button is clicked. Use the transform style.

HTML

<button id="changeRotationButton">Change rotation</button>
<img src="/img/dog.png" id="dog">

JavaScript

var changeRotationButton = document.getElementById("changeRotationButton");
var dog = document.getElementById("dog");

changeRotationButton.addEventListener("click", changeRotation);

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

You must be signed in to type your code.