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