Day 10 — DOM basics

Topic 1 Part 1

const title = document.querySelector("#title");

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

Section 2 Part 2

title.textContent = "Hello, kalyan";
title.style.color = "crimson";
title.style.fontFamily = "Georgia, serif";

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

Section 3 Part 3

const themeBtn = document.getElementById("theme-btn")

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

Section 4 Part 4

document.body.classList.toggle("dark");

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

Section 5 Part 5

const names = ["Priya", "Aarav", "Riya", "Kabir"];

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

Section 6 Part 6

const nameList = document.getElementById("names-list");

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

Section 7 Part 7

names.forEach((name,index) => {
    const li = document.createElement("li")

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

Section 8 Part 8

li.textContent = `${index+1}. ${name}`;

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

Section 9 Part 9

li.classList.add("name-item")

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

Section 10 Part 10

nameList.appendChild(li);
})

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

Section 11 Part 11

const product = { name: "Laptop", price: 60000, brand: "Dell" };

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

Section 12 Part 12

const container = document.getElementById("cards")

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

Section 13 Part 13

const card = document.createElement("div") 
card.classList.add("card")

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

Section 14 Part 14

const title1 = document.createElement("h3")
title1.textContent = product.name

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

Section 15 Part 15

const brand = document.createElement("p")
brand.textContent = product.brand

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

Section 16 Part 16

const price = document.createElement("span")
price.textContent = product.price

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

Section 17 Part 17

card.append(title1)
card.append(brand)
card.append(price)

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

Section 18 Part 18

container.appendChild(card)

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

Section 19 Part 19

container.style.backgroundColor = "red";

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