How to create a todo list in javascript
Table of Contents
Introduction: Welcome to Day 1 of our advanced JavaScript project series! In this exciting journey, we’ll be building an interactive to-do list application from scratch. As skilled coders, you’re ready to embrace the challenges of advanced projects and create something truly magical.
Throughout this blog post, we’ll craft the HTML structure, design stunning CSS styles, and unleash the power of JavaScript to build a fully functional to-do list. So, sharpen your coding wand, summon your creativity, and let’s get started on this captivating adventure!
How to create a todo list <DEMO>
Advanced To-Do List
By: Updategadh
Section 1: HTML Structure – Laying the Foundation
To begin our journey, we need to create a solid foundation for our to-do list. We’ll start by crafting the HTML structure to organize our tasks and input field.
HTML Code:
htmlCopy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced To-Do List - Day 1</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Advanced To-Do List</h1>
<div class="input-container">
<input type="text" id="taskInput" placeholder="Add a new task...">
<button id="addButton">Add</button>
</div>
<ul id="taskList">
<!-- Tasks will be dynamically added here -->
</ul>
</div>
<script src="script.js"></script>
</body>
</html>
In this HTML structure, we’ve set up a container to hold our to-do list. Inside the container, we have an input field to add new tasks and a button to add them. The tasks will be displayed as an unordered list (<ul>).
Section 2: Styling with CSS – Designing the User Interface
A visually appealing user interface is crucial for a captivating to-do list. Let’s sprinkle our project with some CSS magic to make it truly enchanting.
CSS Code:
cssCopy code/* Code Style: CSS styles for our interactive to-do list */
body {
font-family: 'Arial', sans-serif;
background-color: #f2f2f2;
margin: 0;
padding: 0;
}
.container {
max-width: 500px;
margin: 20px auto;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
padding: 20px;
}
h1 {
text-align: center;
color: #007bff;
}
.input-container {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
#taskInput {
flex: 1;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
#addButton {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
#addButton:hover {
background-color: #0056b3;
}
ul {
list-style: none;
padding: 0;
}
li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #ccc;
}
.deleteButton {
background-color: #ff4545;
color: #fff;
border: none;
border-radius: 5px;
padding: 5px 10px;
cursor: pointer;
}
.deleteButton:hover {
background-color: #d42c2c;
}
We’ve designed a clean and elegant interface for our to-do list in this CSS code. The styles highlight the input field, the “Add” button, and each task.
Section 3: JavaScript Magic – Adding Functionality
Now comes the exciting part: adding the JavaScript magic to make our to-do list interactive. We’ll use JavaScript to add tasks, mark them as completed, and delete them when necessary.
JavaScript Code:
javascriptCopy code// Code Style: JavaScript code for our interactive to-do list
const taskInput = document.getElementById("taskInput");
const addButton = document.getElementById("addButton");
const taskList = document.getElementById("taskList");
addButton.addEventListener("click", addTask);
function addTask() {
const taskText = taskInput.value.trim();
if (taskText === "") return;
const taskItem = document.createElement("li");
taskItem.innerHTML = `
<span>${taskText}</span>
<button class="deleteButton">Delete</button>
`;
taskList.appendChild(taskItem);
taskInput.value = "";
const deleteButton = taskItem.querySelector(".deleteButton");
deleteButton.addEventListener("click", deleteTask);
}
function deleteTask(event) {
const taskItem = event.target.parentElement;
taskList.removeChild(taskItem);
}
In this JavaScript code, we’ve created functions to add and delete tasks. When the “Add” button is clicked, a new task is added to the list. When the “Delete” button for each task is clicked, the task is removed from the list.
Section 4: Styling with CSS – Adding Interactivity
To further enhance the interactivity of our to-do list, we’ll add some CSS transitions to make it feel more responsive.
CSS Code:
cssCopy code/* Code Style: Additional CSS styles for interactive elements */
button {
transition: background-color 0.3s ease;
}
button:active {
transform: scale(0.95);
}
These CSS styles add a smooth transition effect to buttons when they are clicked, making the experience
How to Install Node.js and NPM on Windows
Javascript course in 30 days — Day 1
Dairy Farm Shop Management System Using PHP and MySQL
Youtube Demo Video :-
Download Project Code “How to create a todo list“ Click on Below Link
