Concepts Used: DOM manipulation, event handling, selectors
Features:
- Add tasks
- Mark tasks as completed
- Delete tasks
<!DOCTYPE html>
<html>
<head>
<title>To-Do List</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.done { text-decoration: line-through; color: gray; }
</style>
</head>
<body>
<h2>My To-Do List</h2>
<input type="text" id="taskInput" placeholder="Enter task">
<button id="addBtn">Add Task</button>
<ul id="taskList"></ul>
<script>
$(document).ready(function(){
// Add new task
$("#addBtn").click(function(){
let task = $("#taskInput").val();
if(task !== ""){
$("#taskList").append("<li>" + task + " <button class='delete'>X</button></li>");
$("#taskInput").val("");
}
});
// Mark task as done
$(document).on("click", "li", function(){
$(this).toggleClass("done");
});
// Delete task
$(document).on("click", ".delete", function(e){
e.stopPropagation();
$(this).parent().remove();
});
});
</script>
</body>
</html>
Explanation:
- Uses
.append()to add tasks dynamically. .toggleClass()lets us mark tasks complete..on()handles dynamically created elements
Leave a Reply