Exercise Set 5

Exercise 1 of 6

Make a variable called raining, and set it to false. Read the Boolean page.

HTML

<button id="showRainingMessageButton">Show message</button>
<p id="rainingMessageParagraph"></p>

JavaScript

var showRainingMessageButton = document.getElementById("showRainingMessageButton");
var rainingMessageParagraph = document.getElementById("rainingMessageParagraph");

// your code will appear here

showRainingMessageButton.addEventListener("click", showRainingMessage);

function showRainingMessage() {
  if (raining == false) {
    rainingMessageParagraph.innerHTML = "Leave the umbrella";
  }
}

You must be signed in to type your code.

Exercise 2 of 6

Make a variable called snowing, and set it to true.

HTML

<button id="showSnowingMessageButton">Show message</button>
<p id="snowingMessageParagraph"></p>

JavaScript

var showSnowingMessageButton = document.getElementById("showSnowingMessageButton");
var snowingMessageParagraph = document.getElementById("snowingMessageParagraph");

// your code will appear here

showSnowingMessageButton.addEventListener("click", showSnowingMessage);

function showSnowingMessage() {
  if (snowing == true) {
    snowingMessageParagraph.innerHTML = "Bring a sled";
  }
}

You must be signed in to type your code.

Exercise 3 of 6

Write a condition so that clicking the button toggles its color.

HTML

<button id="toggleColorButton">Toggle color</button>

JavaScript

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

var colorApplied = false;

toggleColorButton.addEventListener("click", toggleColor);

function toggleColor() {
  if (// your code will appear here) {
    toggleColorButton.style.backgroundColor = "yellow";
    colorApplied = true;
  }
  else {
    toggleColorButton.style.backgroundColor = "";
    colorApplied = false;
  }
}

You must be signed in to type your code.

Exercise 4 of 6

Write a condition so that clicking the button toggles the message.

HTML

<button id="takeTurnButton">Take turn</button>
<p id="turnParagraph">Player 1's turn</p>

JavaScript

var takeTurnButton = document.getElementById("takeTurnButton");
var turnParagraph = document.getElementById("turnParagraph");

var turn = "player1";

takeTurnButton.addEventListener("click", takeTurn);

function takeTurn() {
  if (// your code will appear here) {
    turnParagraph.innerHTML = "Player 2's turn";
    turn = "player2";
  }
  else if (turn == "player2") {
    turnParagraph.innerHTML = "Player 1's turn";
    turn = "player1";
  }
}

You must be signed in to type your code.

Exercise 5 of 6

Stop rotating the wolf when the stop button is clicked. Read the clearInterval page.

HTML

<button id="startRotationButton">Start rotation</button>
<button id="stopRotationButton">Stop rotation</button>
<img src="/img/wolf.png" id="wolf">

JavaScript

var startRotationButton = document.getElementById("startRotationButton");
var stopRotationButton = document.getElementById("stopRotationButton");
var wolf = document.getElementById("wolf");

var degrees = 0;
var intervalId = null;

startRotationButton.addEventListener("click", startRotation);
stopRotationButton.addEventListener("click", stopRotation);

function startRotation() {
  intervalId = setInterval(rotate, 10);
}

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

function rotate() {
  degrees = degrees + 1;
  wolf.style.transform = "rotate(" + degrees + "deg)";
}

You must be signed in to type your code.

Exercise 6 of 6

Start an automatic counter when the start button is clicked, and have it stop when the stop button is clicked.

HTML

<button id="startCounterButton">Start counter</button>
<button id="stopCounterButton">Stop counter</button>
<p id="counterParagraph">Counter: 0</p>

JavaScript

var startCounterButton = document.getElementById("startCounterButton");
var stopCounterButton = document.getElementById("stopCounterButton");
var counterParagraph = document.getElementById("counterParagraph");

var counter = 0;
var timerId = null;

startCounterButton.addEventListener("click", startCounter);
stopCounterButton.addEventListener("click", stopCounter);

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

function stopCounter() {
  clearInterval(timerId);
}

function increaseCounter() {
  counter = counter + 1;
  counterParagraph.innerHTML = "Counter: " + counter;
}

You must be signed in to type your code.

Last section Next section