Exercise Set 4

Exercise 1 of 6

Watch the incrementing variable video. Increase the number when the button is clicked.

HTML

<button id="increaseNumberButton">Increase number</button>
<p id="numberParagraph">Number: 0</p>

JavaScript

var increaseNumberButton = document.getElementById("increaseNumberButton");
var numberParagraph = document.getElementById("numberParagraph");

var number = 0;

increaseNumberButton.addEventListener("click", increaseNumber);

function increaseNumber() {
  // your code will appear here
  numberParagraph.innerHTML = "Number: " + number;
}

You must be signed in to type your code.

Exercise 2 of 6

Decrease the points when the button is clicked.

HTML

<button id="decreasePointsButton">Decrease points</button>
<p id="pointsParagraph">Points: 0</p>

JavaScript

var decreasePointsButton = document.getElementById("decreasePointsButton");
var pointsParagraph = document.getElementById("pointsParagraph");

var points = 0;

decreasePointsButton.addEventListener("click", decreasePoints);

function decreasePoints() {
  // your code will appear here
  pointsParagraph.innerHTML = "Points: " + points;
}

You must be signed in to type your code.

Exercise 3 of 6

Watch the if statement video. Write a condition to match the message.

HTML

<button id="showTempMessageButton">Show message</button>
<p id="tempMessageParagraph"></p>

JavaScript

var showTempMessageButton = document.getElementById("showTempMessageButton");
var tempMessageParagraph = document.getElementById("tempMessageParagraph");

var temp = 60;

showTempMessageButton.addEventListener("click", showTempMessage);

function showTempMessage() {
  if (// your code will appear here) {
    tempMessageParagraph.innerHTML = "It's at least 60 degrees outside";
  }
}

You must be signed in to type your code.

Exercise 4 of 6

Write a condition to match the message.

HTML

<button id="showTemperatureMessageButton">Show message</button>
<p id="temperatureMessageParagraph"></p>

JavaScript

var showTemperatureMessageButton = document.getElementById("showTemperatureMessageButton");
var temperatureMessageParagraph = document.getElementById("temperatureMessageParagraph");

var temperature = 55;

showTemperatureMessageButton.addEventListener("click", showTemperatureMessage);

function showTemperatureMessage() {
  if (// your code will appear here) {
    temperatureMessageParagraph.innerHTML = "It's less than 60 degrees outside";
  }
}

You must be signed in to type your code.

Exercise 5 of 6

Watch the timing events video. Show the message three seconds after the button is clicked.

HTML

<button id="showDelayedMessageButton">Show delayed message</button>
<p id="delayedMessageParagraph"></p>

JavaScript

var showDelayedMessageButton = document.getElementById("showDelayedMessageButton");
var delayedMessageParagraph = document.getElementById("delayedMessageParagraph");

showDelayedMessageButton.addEventListener("click", startTimeout);

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

function showDelayedMessage() {
  delayedMessageParagraph.innerHTML = "This is a delayed message";
}

You must be signed in to type your code.

Exercise 6 of 6

Start an automatic counter when the button is clicked.

HTML

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

JavaScript

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

var counter = 0;

startCounterButton.addEventListener("click", startCounter);

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

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

You must be signed in to type your code.

Last section Next section