Boolean

Level 2

Lesson

Exercise 1

Exercise 2

A variable value can be a Boolean, which is something that is either true or false. Example of checking if a variable called raining is false:

if (raining == false) {
  console.log(`leave the umbrella`)
}

The name Boolean comes from the English mathematician George Boole, who did work in the field of logic.

Exercise 1 of 6

Write a condition to check if rich is false.

HTML

<button id="richMessageButton">Show message</button>
<p id="richMessageParagraph"></p>

JavaScript

let richMessageButton = document.getElementById(`richMessageButton`)
let richMessageParagraph = document.getElementById(`richMessageParagraph`)

let rich = false

richMessageButton.addEventListener(`click`, showRichMessage)

function showRichMessage() {
  if (// your code will appear here) {
    richMessageParagraph.innerHTML = `Get a job`
  }
}

Your code

Test your code

Exercise 2 of 6

Write a condition to check if famous is true.

HTML

<button id="famousMessageButton">Show message</button>
<p id="famousMessageParagraph"></p>

JavaScript

let famousMessageButton = document.getElementById(`famousMessageButton`)
let famousMessageParagraph = document.getElementById(`famousMessageParagraph`)

let famous = true

famousMessageButton.addEventListener(`click`, showFamousMessage)

function showFamousMessage() {
  if (// your code will appear here) {
    famousMessageParagraph.innerHTML = `Everybody knows you`
  }
}

Your code

Test your code

Exercise 3 of 6

Write a condition to toggle the light.

HTML

<button id="lightButton">Flip switch</button>
<p id="lightParagraph">Dark</p>

JavaScript

let lightButton = document.getElementById(`lightButton`)
let lightParagraph = document.getElementById(`lightParagraph`)

let lightOn = false

lightButton.addEventListener(`click`, flipSwitch)

function flipSwitch() {
  if (// your code will appear here) {
    lightParagraph.innerHTML = `Light`
    lightOn = true
  }
  else {
    lightParagraph.innerHTML = `Dark`
    lightOn = false
  }
}

Your code

Test your code

Dark

Exercise 4 of 6

Write a condition to toggle the player turn.

HTML

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

JavaScript

let turnButton = document.getElementById(`turnButton`)
let turnParagraph = document.getElementById(`turnParagraph`)

let player1Turn = true

turnButton.addEventListener(`click`, takeTurn)

function takeTurn() {
  if (// your code will appear here) {
    turnParagraph.innerHTML = `Player 2's turn`
    player1Turn = false
  }
  else {
    turnParagraph.innerHTML = `Player 1's turn`
    player1Turn = true
  }
}

Your code

Test your code

Player 1's turn

Exercise 5 of 6

Set catVisible so that clicking the cat toggles its opacity.

HTML

<img src="/img/cat.png" id="cat">

JavaScript

let cat = document.getElementById(`cat`)

let catVisible = true

cat.addEventListener(`click`, toggleOpacity)

function toggleOpacity() {
  if (catVisible == true) {
    this.style.opacity = `0%`
    // your code will appear here
  }
  else {
    this.style.opacity = `100%`
    catVisible = true
  }
}

Your code

Test your code

Exercise 6 of 6

Set dogRotated so that clicking the dog toggles its rotation.

HTML

<img src="/img/dog.png" id="dog">

JavaScript

let dog = document.getElementById(`dog`)

let dogRotated = false

dog.addEventListener(`click`, toggleRotation)

function toggleRotation() {
  if (dogRotated == false) {
    this.style.transform = `rotate(180deg)`
    // your code will appear here
  }
  else {
    this.style.transform = `rotate(0deg)`
    dogRotated = false
  }
}

Your code

Test your code

Last section Next section