Introduction
हेलो दोस्तों आज हम इस post में To-Do List का एक mini project create करेंगे जिसमे हम javascript का इस्तेमाल करके HTML element को कैसे get करा सकते है और get element पे click event कैसे करा सकते है उसके basic समझेंगे!.
Javascript To-Do Lists project
Javascript के इस्तेमाल करके हम simple एक To-Do List application create करेंगे इस application में user अपना task create, manage और track कर सकता है!.User new task add कर सकता है और task ख़तम होने पर वह completed कर सकता है और task list से task को remove बी कर सकता है!.
HTML Structure
To-Do List project create करने से पहले हमें HTML structure ready करने की जरुरत होगी तो html की मदद से To-Do List का एक structure create करेंगे!. जिसमे हम user से input get करने के लिए <input> element और user data को add करने के लिए <button> element और user data को display करने के लिए <ul> empty element लेंगे जब बी user new task add करेगा तो उस task को हम <ul> element में <li> element के साथ display करेंगे!.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>To do list using javascript</title>
</head>
<body>
<div class="to_do_list">
<div class="todo-container">
<h1>My To-Do List</h1>
<div class="input-container">
<input type="text" id="taskInput" placeholder="Add a new task...">
<button id="addTaskBtn">Add Task</button>
</div>
<ul id="taskList"></ul>
</div>
</div>
</body>
</html>
Javascript Event handle
HTML structure ready होने के बाद add task को manage करने javascript का इस्तेमाल करेंगे. जिसमे user के button पर click event add task को complated और remove करने के लिए event ये सभी event को हम javascript के इस्तेमाल से handle करेंगे!.
Javascript event
<script>
// Get references to HTML elements
const taskInput = document.getElementById("taskInput");
const addTaskBtn = document.getElementById("addTaskBtn");
const taskList = document.getElementById("taskList");
// Event listener for adding tasks
addTaskBtn.addEventListener("click", addTask);
// Event listener for completing or deleting tasks
taskList.addEventListener("click", handleTaskClick);
</script>
Add task event:
जैसे ही user add task button पर click करेगा तो addTask function call होगा और एक new task create होगा और ul element में append होगा!.
function addTask() {
const taskText = taskInput.value.trim();
if (taskText !== "") {
const taskItem = document.createElement("li");
taskItem.textContent = taskText;
taskList.appendChild(taskItem);
taskInput.value = "";
}
}
Task manage completed or deleted
User के द्वारा task successfuly add हो जानेके बाद task को completed करने लिए और task को remove करने के लिए handleTaskClick function का इस्तेमाल किया है!.
<script>
function handleTaskClick(event) {
const clickedElement = event.target;
if (clickedElement.tagName === "LI") {
clickedElement.classList.toggle("completed");
} else if (clickedElement.classList.contains("completed")) {
const taskItem = clickedElement.parentElement;
taskItem.remove();
}
}
</script>
Javascript To-Do List source code
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>To do list using javascript</title>
</head>
<body>
<style>
.todo-container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.todo-container h1 {
text-align: center;
margin-top: 0;
}
.input-container {
display: flex;
margin-bottom: 10px;
}
.input-container input {
flex-grow: 1;
padding: 10px;
border: none;
border-radius: 3px;
}
.input-container button {
padding: 10px 20px;
background-color: #4caf50;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
ul {
list-style: none;
padding: 0;
}
ul li {
display: flex;
align-items: center;
padding: 10px;
background-color: #fff;
border-radius: 3px;
margin-bottom: 5px;
}
ul li.completed {
background-color: #f5f5f5;
color: green;
border: 1px solid;
}
ul li:last-child {
margin-bottom: 0;
}
</style>
<div class="to_do_list">
<div class="todo-container">
<h1>My To-Do List</h1>
<div class="input-container">
<input type="text" id="taskInput" placeholder="Add a new task...">
<button id="addTaskBtn">Add Task</button>
</div>
<ul id="taskList"></ul>
</div>
</div>
<script>
// Get references to HTML elements
const taskInput = document.getElementById("taskInput");
const addTaskBtn = document.getElementById("addTaskBtn");
const taskList = document.getElementById("taskList");
// Event listener for adding tasks
addTaskBtn.addEventListener("click", addTask);
// Event listener for completing or deleting tasks
taskList.addEventListener("click", handleTaskClick);
// Function to add tasks
function addTask() {
const taskText = taskInput.value.trim();
if (taskText !== "") {
const taskItem = document.createElement("li");
taskItem.textContent = taskText;
taskList.appendChild(taskItem);
taskInput.value = "";
}
}
// Function to handle task completion or deletion
function handleTaskClick(event) {
const clickedElement = event.target;
if (clickedElement.tagName === "LI") {
clickedElement.classList.toggle("completed");
} else if (clickedElement.classList.contains("completed")) {
const taskItem = clickedElement.parentElement;
taskItem.remove();
}
}
</script>
</body>
</html>
