Day 10 — DOM basics

Topic 1 Part 1

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

Code below mirrors ../js/lesson.js. Open DevTools → Console to see output when the script runs.

Section 2 Part 2

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

Code below mirrors ../js/lesson.js. Open DevTools → Console to see output when the script runs.

Section 3 Part 3

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

Code below mirrors ../js/lesson.js. Open DevTools → Console to see output when the script runs.

Section 4 Part 4

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

Code below mirrors ../js/lesson.js. Open DevTools → Console to see output when the script runs.

Section 5 Part 5

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

Code below mirrors ../js/lesson.js. Open DevTools → Console to see output when the script runs.

Section 6 Part 6

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

Code below mirrors ../js/lesson.js. Open DevTools → Console to see output when the script runs.

Section 7 Part 7

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

Code below mirrors ../js/lesson.js. Open DevTools → Console to see output when the script runs.

Section 8 Part 8

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

Code below mirrors ../js/lesson.js. Open DevTools → Console to see output when the script runs.

Section 9 Part 9

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

Code below mirrors ../js/lesson.js. Open DevTools → Console to see output when the script runs.

Section 10 Part 10

nameList.appendChild(li);
})

Code below mirrors ../js/lesson.js. Open DevTools → Console to see output when the script runs.

Section 11 Part 11

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

Code below mirrors ../js/lesson.js. Open DevTools → Console to see output when the script runs.

Section 12 Part 12

const container = document.getElementById("cards")

Code below mirrors ../js/lesson.js. Open DevTools → Console to see output when the script runs.

Section 13 Part 13

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

Code below mirrors ../js/lesson.js. Open DevTools → Console to see output when the script runs.

Section 14 Part 14

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

Code below mirrors ../js/lesson.js. Open DevTools → Console to see output when the script runs.

Section 15 Part 15

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

Code below mirrors ../js/lesson.js. Open DevTools → Console to see output when the script runs.

Section 16 Part 16

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

Code below mirrors ../js/lesson.js. Open DevTools → Console to see output when the script runs.

Section 17 Part 17

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

Code below mirrors ../js/lesson.js. Open DevTools → Console to see output when the script runs.

Section 18 Part 18

container.appendChild(card)

Code below mirrors ../js/lesson.js. Open DevTools → Console to see output when the script runs.

Section 19 Part 19

container.style.backgroundColor = "red";

Code below mirrors ../js/lesson.js. Open DevTools → Console to see output when the script runs.

Section 20 container.style.minHeight = "100px";

// container.style.minHeight = "100px";

Code below mirrors ../js/lesson.js. Open DevTools → Console to see output when the script runs.