This project features:
- Use webpack to bundle JavaScript.
- Learn how to use proper ES6 syntax.
- Use ES6 modules to write modular JavaScript.
- Set up a new project with webpack that is based on the webpack exercise you have already completed.
- Create an index.html file and write your HTML markup here. Create an empty To Do List placeholder (or
- element). - The index.html file must be set as a template using the HTML Webpack Plugin.
- Create an index.js file and set an array of some simple to do tasks (array of objects). Each task object should contain three keys: 1.description [string]. 2.completed [bool]. 3.index: [number].
- Write a function to iterate over the tasks array and populate an HTML list item element for each task.
- On page load render the dynamically created list of tasks in the dedicated placeholder. The list should apear in order of the index values for each task.
- Create a style.css and set rules for the To Do List. CSS must be loaded by Webpack Style/CSS Loader. Your list should be a clone of the part of the minimalist project captured in the video below.
- Add a new JavaScript files and import it as a module:
- it will contain methods related to the status updates (completed: true / false).
- Add event listener to the checkbox (change).
- Update items object's value for completed key upon user actions.
- Store the updated array of items in local storage, so the user gets the correct list values after the page reloads.
- Delete one single task from panel and local storage, or clean all the panel and localStorage.
- Html, CSS, and JavaScript;
- Git and GitHub.
- Node.js
To get a local copy up and run the project, follow these simple example steps:
You can download the code to your personal computer cloning the repository using the following command:
git clone https://github.com/anapdh/todo-app.git
After cloning the repository and opening it in your code editor, run the following code in the terminal:
npm install
Run the application by typing
npm run start
or by launching your local webserver after bundle: http://localhost:8080/.👩🏼💻 Ana Paula Hübner
- GitHub: @anapdh
- LinkedIn: LinkedIn
- Twitter: @dev_anahub
Contributions, issues, and feature requests are welcome!
Feel free to check the issues page.
Give a ⭐️ if you like this project!
This project is MIT licensed.