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.

To-do List

📗 Table of Contents

• 📗 Table of Contents
• 📖 To-do List
  • How to build the "To-do list" website?
    • Project 1: List structure
    • Project 2: Interactive list
    • Project 3: Add and remove items
  • 🛠 Built With
    • Tech Stack
    • Tools i have used for this project
    • Key Features
  • 🚀 Live Demo
  • 💻 Getting Started
    • Prerequisites
    • Setup
    • Install
    • Usage
    • Run tests
    • Deployment
  • 👥 Authors
  • 🔭 Future Features
  • 🤝 Contributing
  • ⭐️ Show your support
  • 🙏 Acknowledgments
  • 📝 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.

How to build the "To-do list" website?

• Project 1: List structure.
• Project 2: Interactive list.
• Project 3: Add and remove items.

Project 1: List structure

• 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 (<div> or <ul> 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:
  1. description [string].
  2. completed [bool].
  3. 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.
• Create a style.css and set rules for the To Do List. CSS must be loaded by Webpack Style/CSS Loader. Your list should be a clone of the part of the minimalist project captured in the video below.

• All your source files (index.html, index.js and style.css) must be located in /src directory and your distribution files will be generated by webpack and served by webpack dev server from /dist folder.

Project 2: Interactive list

• Add a new JavaScript file and import it as a module:
• it will contain methods related to the status updates (completed: true / false).
• Add event listener to the checkbox (change).
• Update items object's value for completed key upon user actions.
• Implement a function for the "Clear all completed" button (use filter() method).
• Store the updated array of items in local storage, so the user gets the correct list of values after the page reloads (which means that any changes made to the list should be preserved).

Project 3: Add and remove items

• Remove all hardcoded items from the tasks array.
• Create a new JavaScript file for the new functionality.
• Implement a function for adding a new task (add a new element to the array).
• Implement a function for deleting a task (remove an element from the array).
• Implement a function for editing task descriptions.
• By default new tasks should have the property completed set to false and the property index set to the value of the new array length (i.e. if you're adding a 5th task to the list, the index of that task should equal to 5).
• Deleting a task should update all remaining items' indexes, so they represent the current list order and are unique(i.e. if you're deleting the first task index 1 from the list, the index of the next task(2) should set to 1)..
• All changes to the To Do List should be saved in local storage.

🛠 Built With

Tech Stack

Client Side / Front-End

• HTML
• CSS
• Javascript

Server Side / Back-End

• JSON
• ES6
• Webpack

Package, Library, Framework

• webpack
• webpack cli
• lodash
• html-webpack-plugin
• style-loader
• css-loader
• webpack-dev-server

Tools i have used for this project

Code Convention, Code Analysis

• ESLint
• Webhint
• Stylelint
• Lighthouse
• node_modules checker

Version Control, CI/CD, Hosting Service

• Github Pages
• Github Actions
• Git

IDE, Desktop Apps, Other Tools

• Visual Studio Code
• Github Desktop

Key Features

• Adding a new item.
• Removing a selected item.
• Marking a selected item as complete.
• Removing all items marked as complete at once.
• Reordering a selected item (as drag-and-drop)

(back to top)

🚀 Live Demo

• Click the following url for ... Live Demo ...

(back to top)

💻 Getting Started

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

Prerequisites

In order to run this project you need:

• git version 2.38.x
• node.js version > 12.x
• IDE (visual studio code, etc)
• browser (chrome, firefox, edge, safari)

Setup

Clone this repository to your desired folder:

  cd my-folder
  git [email protected]:fickryiman/ToDo-List.git

Install

Install this project with:

  cd my-project
  npm install

Usage

To run the project, execute the following command:

  npm run build (production environment)
  npm start (development environment)

Run tests

To run tests, run the following command: Run Github Actions Test

  npm test

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

  auto fix linter with --fix
  npx stylelint "**/*.{css,scss}" --fix
  npx eslint . --fix

Deployment

You can deploy this project using: GitHub Pages Example:

https://fickryiman.github.io/ToDo-List/

(back to top)

👥 Authors

👤 Author 1

• GitHub: @fickryiman
• Facebook: @fickry.bil.iman
• LinkedIn: fickry-bil-iman

(back to top)

🔭 Future Features

• add login to user with social media auth or google auth
• create mobile version
• create time completion and alarm
• Store data to realtime database

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the https://github.com/fickryiman/ToDo-List/issues.

(back to top)

⭐️ Show your support

If you like this project please follow me on my GitHub: @fickryiman or connect on my LinkedIn: @fickry-bil-iman.

(back to top)

🙏 Acknowledgments

First thing first, I would like to say Alhamdulillah, Thanks to my Families, Microverse and Micronaut's, Reviewer's, Thank you for all of the experiences, lesson and everythings.

(back to top)

📝 License

This project is MIT licensed.

(back to top)