A web page that allows you to manage your todo list. You can create, delete and mark todos as done, and you can refresh the page and not lose your list. Built with JavaScript.
I will build a simple HTML list of To Do tasks in this project. This simple web page will be built using webpack and served by a webpack dev server.
Project requirements
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:
description [string].
completed [bool].
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 appear in order of the index values for each task.
I will build a simple HTML list of To Do tasks in this project. This simple web page will be built using webpack and served by a webpack dev server.
Project requirements
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 (
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:- description [string].
- completed [bool].
- 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 appear in order of the index values for each task.