This To-Do List app helps users manage tasks with features like adding, editing, and deleting tasks. By building it, you'll learn about DOM manipulation, localStorage integration, and basic JavaScript event handling.
What We Are Going To Create
We are creating a Todo application where
Users can add, edit (toggle between "Edit" and "Save"), and delete tasks dynamically.
Tasks are stored in local Storage for persistence, and the layout is responsive across devices.
Custom CSS with hover effects and animations ensures a sleek, user-friendly experience.
This HTML structure creates the basic layout for a to-do list app, providing an input field for new tasks, an "Add" button, and a container to display the task list.
In this example
A text input field and an "Add" button allow users to enter new tasks, all centered within a visually appealing gradient background.
Tasks are displayed in rounded, shadowed containers, with hover effects that slightly lift the task and change its background for a dynamic feel.
The edit and delete icons have color transitions and scaling effects, making interactions intuitive and visually responsive for better usability.
Todo List App - JavaScript code
This JavaScript code handles the functionality of the to-do list app, including adding tasks, editing, deleting, and saving them in the browser's local storage.
In this example
Selects the input field, button, and task list; retrieves stored tasks from localStorage and populates the task array.
Reads and trims input, creates a task object, updates localStorage, and re-renders tasks; shows an alert for empty input.
Uses the maketodo function to generate a styled task list with text, edit, and delete buttons.
Removes the task from the task array, updates localStorage, and deletes it from the DOM.
Toggles between "Edit" and "Save", allows inline text editing, updates localStorage, and refreshes the task list.
