Create a clone of Emilia Andrzejewska to-do list UI structure
- Use webpack to bundle JavaScript.
- Learn how to use proper ES6 syntax.
- Use ES6 modules to write modular JavaScript.
- Use linters with webpack to check for linters
- Remove all hardcoded items from the tasks array.
- Create a new JavaScript file for the new functionality.
- Implement a function for adding a new task (add a new element to the array).
- Implement a function for deleting a task (remove an element from the array).
- Implement a function for editing task descriptions.
- By default new tasks should have the property completed set to false and the property index set to the value of the -- new array length (i.e. if you're adding a 5th task to the list, the index of that task should equal to 5).
- Deleting a task should update all remaining items' indexes, so they represent the current list order and are unique(i.e. if you're deleting the first task index 1 from the list, the index of the next task(2) should set to 1)..
- All changes to the To Do List should be saved in local storage.
- Add a new JavaScript file 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.
- Implement a function for the "Clear all completed" button (use filter() method).
- Store the updated array of items in local storage, so the user gets the correct list values after the page relo
- Major languages: HTML, JavaScript ES6
- Frameworks: N/A
- Technologies used: Linters, Git, npm, webpack
To get a local copy up and running follow these simple example steps.
👤 Author1
- GitHub: @kessio
- Twitter: @kessio_sharon
- LinkedIn: sharon-kessio
- Acknowledge Emilia Andrzejewska whose to-do list project was used to create the UI of this project
Contributions, issues, and feature requests are welcome!
Feel free to check the issues page.
Give a ⭐️ if you like this project!
N/A