Class

Level 2

Lesson

Exercise 1

Exercise 2

In HTML, add a class attribute to label an element:

<button class="selected">

In CSS, use a . to style elements by class:

.selected {
  border: 2px solid black;
}

In JavaScript, use the classList property and add method to add a class to an element:

this.classList.add(`selected`)

Use the remove method to remove a class from an element:

this.classList.remove(`selected`)

Use the contains method to check if an element has a particular class:

if (this.classList.contains(`selected`) == false) {

}

Exercise 1 of 6

Add the selected class to a button when clicked.

HTML

<button id="addClassButton1">Button 1</button>
<button id="addClassButton2">Button 2</button>
<button id="addClassButton3">Button 3</button>

CSS

.selected {
  border: 2px solid black;
}

JavaScript

let addClassButton1 = document.getElementById(`addClassButton1`)
let addClassButton2 = document.getElementById(`addClassButton2`)
let addClassButton3 = document.getElementById(`addClassButton3`)

addClassButton1.addEventListener(`click`, addSelectedClass)
addClassButton2.addEventListener(`click`, addSelectedClass)
addClassButton3.addEventListener(`click`, addSelectedClass)

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

Your code

Test your code

Exercise 2 of 6

Add the error class to a paragraph when clicked.

HTML

<p id="addClassParagraph1">Paragraph 1</p>
<p id="addClassParagraph2">Paragraph 2</p>
<p id="addClassParagraph3">Paragraph 3</p>

CSS

.error {
  color: red;
}

JavaScript

let addClassParagraph1 = document.getElementById(`addClassParagraph1`)
let addClassParagraph2 = document.getElementById(`addClassParagraph2`)
let addClassParagraph3 = document.getElementById(`addClassParagraph3`)

addClassParagraph1.addEventListener(`click`, addErrorClass)
addClassParagraph2.addEventListener(`click`, addErrorClass)
addClassParagraph3.addEventListener(`click`, addErrorClass)

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

Your code

Test your code

Paragraph 1

Paragraph 2

Paragraph 3

Exercise 3 of 6

Remove the selected class from a button when clicked.

HTML

<button id="removeClassButton1" class="selected">Button 1</button>
<button id="removeClassButton2" class="selected">Button 2</button>
<button id="removeClassButton3" class="selected">Button 3</button>

CSS

.selected {
  border: 2px solid black;
}

JavaScript

let removeClassButton1 = document.getElementById(`removeClassButton1`)
let removeClassButton2 = document.getElementById(`removeClassButton2`)
let removeClassButton3 = document.getElementById(`removeClassButton3`)

removeClassButton1.addEventListener(`click`, removeSelectedClass)
removeClassButton2.addEventListener(`click`, removeSelectedClass)
removeClassButton3.addEventListener(`click`, removeSelectedClass)

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

Your code

Test your code

Exercise 4 of 6

Remove the error class from a paragraph when clicked.

HTML

<p id="removeClassParagraph1" class="error">Paragraph 1</p>
<p id="removeClassParagraph2" class="error">Paragraph 2</p>
<p id="removeClassParagraph3" class="error">Paragraph 3</p>

CSS

.error {
  color: red;
}

JavaScript

let removeClassParagraph1 = document.getElementById(`removeClassParagraph1`)
let removeClassParagraph2 = document.getElementById(`removeClassParagraph2`)
let removeClassParagraph3 = document.getElementById(`removeClassParagraph3`)

removeClassParagraph1.addEventListener(`click`, removeErrorClass)
removeClassParagraph2.addEventListener(`click`, removeErrorClass)
removeClassParagraph3.addEventListener(`click`, removeErrorClass)

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

Your code

Test your code

Paragraph 1

Paragraph 2

Paragraph 3

Exercise 5 of 6

Write a condition to toggle the button's selected class.

HTML

<button id="toggleClassButton1">Button 1</button>
<button id="toggleClassButton2">Button 2</button>
<button id="toggleClassButton3">Button 3</button>

CSS

.selected {
  border: 2px solid black;
}

JavaScript

let toggleClassButton1 = document.getElementById(`toggleClassButton1`)
let toggleClassButton2 = document.getElementById(`toggleClassButton2`)
let toggleClassButton3 = document.getElementById(`toggleClassButton3`)

toggleClassButton1.addEventListener(`click`, toggleSelectedClass)
toggleClassButton2.addEventListener(`click`, toggleSelectedClass)
toggleClassButton3.addEventListener(`click`, toggleSelectedClass)

function toggleSelectedClass() {
  if (// your code will appear here) {
    this.classList.add(`selected`)
  }
  else {
    this.classList.remove(`selected`)
  }
}

Your code

Test your code

Exercise 6 of 6

Write a condition to toggle the paragraphs's error class.

HTML

<p id="toggleClassParagraph1">Paragraph 1</p>
<p id="toggleClassParagraph2">Paragraph 2</p>
<p id="toggleClassParagraph3">Paragraph 3</p>

CSS

.error {
  color: red;
}

JavaScript

let toggleClassParagraph1 = document.getElementById(`toggleClassParagraph1`)
let toggleClassParagraph2 = document.getElementById(`toggleClassParagraph2`)
let toggleClassParagraph3 = document.getElementById(`toggleClassParagraph3`)

toggleClassParagraph1.addEventListener(`click`, toggleErrorClass)
toggleClassParagraph2.addEventListener(`click`, toggleErrorClass)
toggleClassParagraph3.addEventListener(`click`, toggleErrorClass)

function toggleErrorClass() {
  if (// your code will appear here) {
    this.classList.add(`error`)
  }
  else {
    this.classList.remove(`error`)
  }
}

Your code

Test your code

Paragraph 1

Paragraph 2

Paragraph 3

Last section Next section