In this project, I built a simple HTML list of To Do tasks with focus on it structure using Javascript to load the html elements dynamically. In addition, I implemented the CRUD (create, read, update, delete) methods as a way to add, remove or update the task list. This simple web page was built using webpack and served by a webpack dev server.
-
A new project was setup with webpack that is based on the webpack exercise completed earlier.
-
Create an index.html file and write your HTML markup here. Create an empty To Do List placeholder using
<div>element. The index.html file was 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:
i. description [
string]ii. completed [
bool]iii. index: [
number] -
Created 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 appear in order of the index values for each task.
-
Create a style.css and set rules for the To Do List. CSS was loaded by Webpack Style/CSS Loader.
- [Optional] Install git bash to your machine to enable you to clone this repo.
- install Visual Studio to be able to host a local live version.
- Install a browser to view the local live version.
To get a local copy up and running follow these simple example steps.
- Internet connection
- A github account
- Open your GitHub account the repository's link
- copy the repo's link and clone it by writing
git clone https://github.com/fmanimashaun/To-do-List.giton your git bash terminal. npm installto install the dependencies
- run
npm run testto run the tests.
- run
npm run startto run it locally.
👤 Engr. Animashaun Fisayo
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.