Exercise Set 6

Exercise 1 of 12

Watch the class video. 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 12

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 12

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 12

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 12

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 12

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

Exercise 7 of 12

Watch the getting attribute video. Show the ID of the clicked button in the paragraph.

HTML

<button id="button1">Button 1</button>
<button id="button2">Button 2</button>
<button id="button3">Button 3</button>
<p id="idParagraph"></p>

JavaScript

let button1 = document.getElementById(`button1`)
let button2 = document.getElementById(`button2`)
let button3 = document.getElementById(`button3`)
let idParagraph = document.getElementById(`idParagraph`)

button1.addEventListener(`click`, showId)
button2.addEventListener(`click`, showId)
button3.addEventListener(`click`, showId)

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

Your code

Test your code

Exercise 8 of 12

Show the placeholder of the focused text box in the paragraph.

HTML

<input type="text" placeholder="person" id="textBox1"></input>
<input type="text" placeholder="place" id="textBox2"></input>
<input type="text" placeholder="thing" id="textBox3"></input>
<p id="placeholderParagraph"></p>

JavaScript

let textBox1 = document.getElementById(`textBox1`)
let textBox2 = document.getElementById(`textBox2`)
let textBox3 = document.getElementById(`textBox3`)
let placeholderParagraph = document.getElementById(`placeholderParagraph`)

textBox1.addEventListener(`focus`, showPlaceholder)
textBox2.addEventListener(`focus`, showPlaceholder)
textBox3.addEventListener(`focus`, showPlaceholder)

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

Your code

Test your code

Exercise 9 of 12

Show the src of the clicked image in the paragraph.

HTML

<img src="/img/cat.png" id="image1">
<img src="/img/dog.png" id="image2">
<img src="/img/wolf.png" id="image3">
<p id="srcParagraph"></p>

JavaScript

let image1 = document.getElementById(`image1`)
let image2 = document.getElementById(`image2`)
let image3 = document.getElementById(`image3`)
let srcParagraph = document.getElementById(`srcParagraph`)

image1.addEventListener(`click`, showSrc)
image2.addEventListener(`click`, showSrc)
image3.addEventListener(`click`, showSrc)

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

Your code

Test your code

Exercise 10 of 12

Change each text box's placeholder when focused.

HTML

<input type="text" placeholder="person" id="person"></input>
<input type="text" placeholder="place" id="place"></input>
<input type="text" placeholder="thing" id="thing"></input>

JavaScript

let person = document.getElementById(`person`)
let place = document.getElementById(`place`)
let thing = document.getElementById(`thing`)

person.addEventListener(`focus`, changePlaceholder)
place.addEventListener(`focus`, changePlaceholder)
thing.addEventListener(`focus`, changePlaceholder)

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

Your code

Test your code

Exercise 11 of 12

Change each text box's type to `range` when focused.

HTML

<input type="text" placeholder="red" id="red"></input>
<input type="text" placeholder="green" id="green"></input>
<input type="text" placeholder="blue" id="blue"></input>

JavaScript

let red = document.getElementById(`red`)
let green = document.getElementById(`green`)
let blue = document.getElementById(`blue`)

red.addEventListener(`focus`, changeType)
green.addEventListener(`focus`, changeType)
blue.addEventListener(`focus`, changeType)

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

Your code

Test your code

Exercise 12 of 12

Change each image's src to the wolf's src when clicked.

HTML

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

JavaScript

let cat = document.getElementById(`cat`)
let dog = document.getElementById(`dog`)
let wolf = document.getElementById(`wolf`)

cat.addEventListener(`click`, changeSrc)
dog.addEventListener(`click`, changeSrc)
wolf.addEventListener(`click`, changeSrc)

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

Your code

Test your code