In this project, we create a dynamic To-Do List application using modern JavaScript (ES6) features, along with Bootstrap 5 for styling. This project encapsulates key concepts such as DOM manipulation, event handling, and data persistence using localStorage.
Project Features:
Add New Tasks:
Users can input new tasks into a form.
Each task is displayed in a styled list.
Mark Tasks as Completed:
Users can mark tasks as completed by clicking a "Complete" button.
Completed tasks are visually indicated with a strikethrough effect.
Delete Tasks:
Users can remove tasks from the list by clicking a "Delete" button.
Deleted tasks are also removed from localStorage.
Persistent Storage:
Tasks are stored in localStorage, ensuring that the list persists even after the browser is closed and reopened.
Technologies Used:
JavaScript (ES6): For implementing the core functionality.
Bootstrap 5: For responsive and modern styling of the application.
localStorage: To persist the tasks between browser sessions.
Babel: To transpile modern JavaScript into a version compatible with older browsers.
Webpack: To bundle JavaScript files for efficient delivery.
Learning Outcomes:
DOM Manipulation: Learn how to create, update, and delete DOM elements dynamically.
Event Handling: Understand how to handle user inputs and events using JavaScript.
Data Persistence: Get familiar with storing and retrieving data using localStorage.
Modern JavaScript Development: Use Babel and Webpack to set up a modern development environment.
github.com/ssi...
14 окт 2024
