In this project, I built a simple HTML list of To Do tasks. The list was styled according to the specifications in the given template. This simple web page was built using webpack and served by a webpack dev server. I have poppulated the HTML with an array of tasks from Javascript which is rendered dynamically on reload. Next I added some functionality to the application to make it interactive. The user will be able to mark task completion by selecting the corresponding checkbox (or undo it by unchecking the checkbox). The updated tasks list will be stored in local storage, so the user gets the correct list values after the page reloads.
For the final milestone of this project, I implemented the CRUD (create, update, delete) methods. Users can add new tasks by clicking the enter icon or pressing the enter key after writing the task description. Users can edit tasks by click on the icon on each task, editing the description, and pressing enter. Users can remove tasks by clicking on the delete icon. Users can clear the completed tasks by clicking on the button. All the elements of the user interface are fully functional and the application is completed.
- HTML
- CSS
- npm
- Javascript
- webpack
To get a local copy up and running follow these simple example steps.
- VS Code
- Chrome Browser
- Gitbash
$ git clone https://github.com/Kingstalux/Webpack$ cd webpack- run the command
code .to open the file in VS Code - run the command
Shift+Alt+Rto open the file in the browser
👤 Ngu Kingsely
- GitHub: @Kingstalux
- Twitter: @NguKingsley
- LinkedIn: Ngu Kingsely
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.