Day 11 — Events

Hands-on

Topic 1 Part 1 
const button = document.querySelector("#counter-btn")
const countSpan = document.querySelector("#count")

Try the steps, then compare with ../js/hands-on.js (loaded at the bottom of this page).

Section 2 Part 2 
let count = 0;
button.addEventListener("click", () => {
    if(count < 10) {
        count++;
        countSpan.textContent =  count;
    } else  {
        countSpan.textContent = "Stop Clicking"
    }
})

Try the steps, then compare with ../js/hands-on.js (loaded at the bottom of this page).

Section 3 Part 3 
const LiveInput = document.querySelector("#live-input")
const preview = document.querySelector("#preview")

Try the steps, then compare with ../js/hands-on.js (loaded at the bottom of this page).

Section 4 Part 4 
LiveInput.addEventListener("keydown", (e) => {
    preview.textContent = e.key;
})

Try the steps, then compare with ../js/hands-on.js (loaded at the bottom of this page).

Section 5 Part 5 
const regForm = document.querySelector("#reg-form")
const nameFiled = document.querySelector("#name-field")
const welcome = document.querySelector("#welcome")

Try the steps, then compare with ../js/hands-on.js (loaded at the bottom of this page).

Section 6 Part 6 
welcome.textContent = "please enter your name"
regForm.addEventListener("submit" , (e)=> {
    e.preventDefault();
   
    if(nameFiled === "") {
        welcome.textContent = "please enter your name"
    } else {
    welcome.textContent = `Welcome, ${nameFiled.value}`
    }

Try the steps, then compare with ../js/hands-on.js (loaded at the bottom of this page).

Section 7 Part 7 
})

Try the steps, then compare with ../js/hands-on.js (loaded at the bottom of this page).

Section 8 Part 8 
document.querySelectorAll("#todo-list li").forEach(li => {
  li.addEventListener("click", () => {
    li.classList.toggle("done");
    
  });

Try the steps, then compare with ../js/hands-on.js (loaded at the bottom of this page).

Section 9 Part 9 
})

Try the steps, then compare with ../js/hands-on.js (loaded at the bottom of this page).