📗 Table of Contents

• 📗 Table of Contents
• 📖 To-Do List
  • 🛠 Built With
    • Tech Stack
    • Key Features
    • New Feature
  • 🚀 Live Demo
  • 💻 Getting Started
    • Prerequisites
    • Setup
    • Install
    • Usage
    • Run tests
    • Deployment
  • 👥 Authors
  • 🔭 Future Features
  • 🤝 Contributing
  • ⭐️ Show your support
  • 📝 License

📖 To-Do List

"To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete. A simple website that allows user to create a To-do list.

🛠 Built With

Tech Stack

Client

• HTML5
• CSS3
• JAVASCRIPT ES6
• Webpack

Key Features

• Project setup by webpack.
• HTML file setup using the HTML Webpack plugin.
• Populate the array of objects to the HTML.
• The array of objects that contain the to-do list is rendered dynamically and in order of the index value for each task.
• Create a CSS using the webpack Style/CSS loader.
• Create a new Js with add, remove and update functions.
• Update the remaining items after deleting.
• ToDo list saved in the local storage.
• Function for "Clear all completed" button implemented
• Add event listener to checkboxes of the list and mark the object as complete and incomplete depending on the checkbox.
• Add interactivity for description and checkbox
• Store the updated array of items in the local storage.
• Test file created for a file containing the add item and delete item functions.
• Test case created for Mock HTML to test if add/delete functions add or remove exactly one
• element to/from the list in the DOM.

New Feature

Test Added for: 

• Editing the task description function.
• Updating an item's 'completed' status function.
• The "Clear all completed" function.
• DOM manipulation functions.

(back to top)

🚀 Live Demo

Here is the link for live version

• Live Demo Link

(back to top)

💻 Getting Started

To get a local copy up and running follow these simple example steps.

Prerequisites

• In order to run this project you need: Visual Studio code or any Code Editor

Setup

Clone this repository to your desired folder:

  cd my-folder
  git clone https://github.com/biruk-bereka/Todolist-Webpack.git

Install

Install this project with:

npm install

Usage

Run tests

-testing with jest

npm test

Deployment

(back to top)

👥 Authors

👤 Biruk Bereka

• GitHub: @biruk-bereka
• LinkedIn:@Biruk Bereka

👤 Jugoslav Achkoski

• GitHub: jugosack
• Twitter: Jugoslav Achkoski
• LinkedIn: Jugoslav Achkoski

(back to top)

🔭 Future Features

Future features

• Styling todo list

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

⭐️ Show your support

If you like this project please star in here on Github

(back to top)

📝 License

This project is MIT licensed.

(back to top)