DOM + EVENTS + PROJECT – JavaScript Day 2
๐ DAY 2: DOM EVENTS PROJECTDOM EVENTS PROJECT
What is the DOM?
DOM (Document Object Model) = how JavaScript โseesโ your HTML.
๐ It lets you:
- Select elements
- Change content
- Respond to user actions
๐ 1. Selecting Elements
let title = document.getElementById("title");
console.log(title);Other ways:
document.querySelector(".className");
document.querySelectorAll("p");โ๏ธ 2. Changing Content
document.getElementById(“title”).innerText = “New Text”;
document.getElementById("title").innerText = "New Text";Change HTML:
element.innerHTML = "<b>Hello</b>";๐จ 3. Changing Styles
document.getElementById("title").style.color = "blue";๐ฑ๏ธ 4. Events (User Interaction)
Example: Click
button.addEventListener("click", function() {
alert("Button clicked!");
});โจ๏ธ 5. Input Event
input.addEventListener("input", function() {
console.log(input.value);
});๐ ๏ธ ๐งช PROJECT 2: TO-DO LIST APP
This is your first real-world app ๐ฅ
๐ฆ Features:
- Add task
- Display tasks
- Delete task
๐ป FULL CODE
<!DOCTYPE html>
<html>
<head>
<title>To-Do App</title>
</head>
<body>
<h2>To-Do List</h2>
<input id="taskInput" placeholder="Enter task">
<button id="addBtn">Add Task</button>
<ul id="taskList"></ul>
<script>
let input = document.getElementById("taskInput");
let button = document.getElementById("addBtn");
let list = document.getElementById("taskList");
button.addEventListener("click", function() {
let task = input.value;
if (task === "") return;
let li = document.createElement("li");
li.innerText = task;
// Delete button
let deleteBtn = document.createElement("button");
deleteBtn.innerText = "Delete";
deleteBtn.addEventListener("click", function() {
li.remove();
});
li.appendChild(deleteBtn);
list.appendChild(li);
input.value = "";
});
</script>
</body>
</html>๐ฏ YOUR TASK (VERY IMPORTANT)
Upgrade this app:
โ Add these features:
- โ Mark task as completed (click to strike through)
- โ Save tasks (use
localStorage) - โ Press Enter key to add task
๐ก Hints (Try yourself first!)
โ Strike-through:
li.style.textDecoration = "line-through";โ Save to localStorage:
localStorage.setItem("tasks", JSON.stringify(array));โ Get from localStorage:
JSON.parse(localStorage.getItem("tasks"));What You Just Learned
- DOM manipulation
- Event handling
- Dynamic elements
- Real app logic
๐ This is core JavaScript power
g0z7ww
ictf2e
1yqz1b
5v2kdl
00zg1z
re7e1h
tn2ww8
uz0hxi
mh4cfu
bmq90p
8rngel
s9v88c
dkorb1
0lpz0a
All the best
tcpajv
k90mj9
Thanks , I have just been looking for info
approximately this subject for ages and yours
is the greatest I’ve found out till now. However,
what concerning the bottom line? Are you positive about the source?
Enjoy every single day