Day 11 — Events

Problem 1 Part 1

const Cchange = document.querySelector("#color-change");

Reference solution lives in ../js/homework.js (loaded at the bottom of this page).

Problem 2 Part 2

Cchange.addEventListener("click", () => {
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);
    
    const color = `rgb(${r}, ${g}, ${b})`
    console.log(color)
    document.body.style.backgroundColor = color;
})

Reference solution lives in ../js/homework.js (loaded at the bottom of this page).

Problem 3 Part 3

const liveInput = document.querySelector("#less")

Reference solution lives in ../js/homework.js (loaded at the bottom of this page).

Problem 4 Part 4

liveInput.addEventListener("input", () => {

Reference solution lives in ../js/homework.js (loaded at the bottom of this page).

Problem 5 Part 5

if(liveInput.value.length < 3) {
        liveInput.style.backgroundColor = "red";
    }
    else {
        liveInput.style.backgroundColor = "green";

Reference solution lives in ../js/homework.js (loaded at the bottom of this page).

Problem 6 Part 6

}
})

Reference solution lives in ../js/homework.js (loaded at the bottom of this page).

Problem 7 Part 7

const num1 = document.querySelector("#num1")
const num2 = document.querySelector("#num2")

Reference solution lives in ../js/homework.js (loaded at the bottom of this page).

Problem 8 Part 8

const sumbtn = document.querySelector("#sum")
const blwsum = document.querySelector("#below")

Reference solution lives in ../js/homework.js (loaded at the bottom of this page).

Problem 9 Part 9

sumbtn.addEventListener("click", (e) => {
    e.preventDefault();
    const sum = Number(num1.value) + Number(num2.value)
    blwsum.textContent = sum;
} )

Reference solution lives in ../js/homework.js (loaded at the bottom of this page).