To Do list: Interactive list.

In this project, I built a simple HTML list of To Do tasks. The list was styled according to the specifications listed in this lesson. This simple web page was built using webpack and served by a webpack dev server. and also I implemented the CRUD (create, read, update, delete) methods. All the elements of the user interface is fully functional and my application will is complete. I also added some functionality to my 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.

Learning objectives

complete-website-with-nav

• To Use webpack to bundle JavaScript.
• To Learn how to use proper ES6 syntax.
• To Use ES6 modules to write modular JavaScript.

Built With

• HTML
• CSS
• VANILLA JAVASCRIPT
• WEB PACK

Additional Tools

• WebHint
• ESlint
• Stylelint
• Node Packet Manager
• Git and GitHub

Getting Started

To get a local copy of this project up and running on your local machine follow the steps below.

Prerequisites

• Basic html, css and medium Javascript know how.
• Git installation
• A text editor
• A terminal
• A web browser to view output e.g Google Chrome
• An IDE e.g Visual studio code

Setup

• Clone this repository or download the Zip folder:

git clone https://github.com/GraceAbike/To-Do-List.git

• Navigate to the location of the folder in your machine:

you@your-Pc-name:~$ cd <folder>

Usage

• After Cloning this repo to your local machine
• Open the index.html in your browser

Run Tests

To track linter errors locally follow these steps:

Download all the dependencies run:

npm install

Track HTML linter errors run:

npx hint .

Track CSS linter errors run:

npx stylelint "**/*.{css,scss}"

Track JavaScript linter errors run:

npx eslint .

Deployment

• I used GitHub Pages to deploy my website
• For more information about publishing sources, see "About github page"

Author

👤 Grace Abike

• GitHub: @GraceAbike
• Twitter: @GraceAbike1
• LinkedIn: Grace Abike
• Angel: Grace-Abike

Credits

• Project from Microverse💕 Javacript & Networking module (Module 2)
• Images inspired by Google Fonts

Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project and how we manage to build it!

Acknowledgments

• Thanks to the Microverse team for the great curriculum.
• Thanks to the Code Reviewer(s) for the insightful feedbacks.
• A great thanks to My coding partner(s), morning session team, and standup team for their contributions.
• Hat tip to anyone whose code was used.

📝 License

This project is MIT licensed