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
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
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
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
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
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
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
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
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
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
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
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