This is a Webpack based to-do-list project. With this app, users can add thier daily routine tasks to the list, mark them as complet, edit them or delete them.

Related tags

Learning resource javascript webpack to-do-list microverse
Overview

To Do List

This is a Webpack based to-do-list project. With this app, users can add thier daily routine tasks to the list, mark them as complet, edit them or delete them.

Major Technologies

HTML5 CSS JAVASCRIPT NPM WEBPACK

Demo

To Do List

Install & Setup

To setup and install this sample To-Do List project, follow the below steps:

  • Clone this project by the command:
$ git clone https://github.com/aliatayee/to-do-list.git
  • Then switch to the project folder by the bellow query:
$ cd to-do-list
  • Then run the below command to install dependencies
$ npm i
  • Finally, run the below command to start the project.
$ npm start

Run tests

To run the tests for linters locally, you must have node installed on your computer. Install the necessary packages. Run npx stylelint "*/.{css,scss}" Run npx hint . Run npx eslint .

Prerequisites

  • IDE to edit and run the code (We use Visual Studio Code 🔥 ).
  • Git to versionning your work.

Authors

👤 Ali

🤝 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!

Acknowledgments

  • Hat tip to anyone whose code was used
  • Inspiration
  • etc
Comments
  • To do test part 2

    To do test part 2

    Testing To-Do List (part 2)

    in this milestone we have developed the following test parts:

    • [ ] Add test functionality for edit tasks using jest
    • [ ] Add test functionality for edit compelted task
    • [ ] Add test functionality for clear all completed tasks

    Note : after cloning the repo, please run npm install to install dependencies and run npm test to test the project.

    opened by aliatayee 0
  • Testing To-Do List (Add/Remove)

    Testing To-Do List (Add/Remove)

    Testing To-Do List (part 1)

    in this milestone we have developed the following parts:

    • [ ] Setup and configure jest framework for unit testing
    • [ ] Add test functionality for removing tasks using jest
    • [ ] Add test functionality for adding to do task using jest

    Note : after cloning the repo, please run npm install to install dependencies and run npm test to test the project.

    opened by aliatayee 0
  • Add interactive list functionality

    Add interactive list functionality

    Interactive List

    in this milestone I have developed the following parts:

    • Add checkbox functionality to mark the task as completed
    • Add a clear button event listener to remove all completed tasks
    opened by aliatayee 0
  • To-Do List (Add & Remove)

    To-Do List (Add & Remove)

    To-Do List (Add & Remove)

    in this milestone i have developed the following parts:

    • Add task functionality through user input and store to local storage
    • Get task list from local storage
    • Remove functionality when click on remove button
    • Edit functionality by clicking on tasks
    • Completed task functionality
    opened by aliatayee 0
  • Add todo list initial structure using webpack

    Add todo list initial structure using webpack

    To-Do List using webpack

    in this milestone I have developed the following parts:

    • Project structure configured
    • Webpack with all required dependencies configured
    • CSS loaders configured
    • Initial structure of To-Do List defined
    • Style applied
    opened by aliatayee 0
  • JavaScript best practice (Self Review)

    JavaScript best practice (Self Review)

    • [ ] The following part of the code in the index.js is not DRY https://github.com/aliatayee/to-do-list/blob/8fda8a75a30a7e384c5c48e68cba070923ad570f/src/index.js#L48-L57
    opened by aliatayee 0
Owner
Ali Aqa Atayee
Full-Stack Software Developer | MERN Stack Developer | Problem Solver | Graphic & Motion Designer | UI/UX Designer | Open to new opportunities.
Ali Aqa Atayee
GitHub https://aliatayee.github.io/to-do-list/
A todo-list app designed to help users manage their tasks. Users can create a task, read tasks, update tasks, delete task, check completed tasks and delete all checked tasks. Also contains basic tests. Built with WebPack,, Modular JavaScript, Jest Libary and LocalStorage.

todolist This project is created to understand the use of ES6 with Webpack Built With HTML, CSS and Javascript. Webpack. Live Demo (if available) http

Shotola Ololade 3 Oct 13, 2022
A simple to do list app built with HTML, CSS and JavaScript. Users can add daily tasks, edit the tasks, delete the tasks when it's done

To Do List This is a website that allows users to manage the tasks. users can add every task to do and when the task is done users can delete the task

Mustafa Fahimy 8 Jul 21, 2022
A simple JS To Do List bundled using Webpack. You can add new tasks, edit existing tasks, check completed tasks, and delete tasks from the list. It is built mainly with Javascript.

To-Do-List A simple HTML list of To Do built using webpack and served by a webpack dev server. Live Link See Demo Built With HTML, CSS, Javascript To

Michael Ugochukwu 3 May 10, 2022
It is a simple yet powerful to do list app in which you can add daily to-do tasks.you can edit, remove, check it to change its status to complete or not complete. it would save all the data and changes in local storage and track your daily tasks whether you have completed them or not.Built with vanilla JavaScript

To Do list - minimalist It is a simple yet powerful to do list app in which you can add daily to-do tasks. it would save all the data and changes in l

Zuhaib Amjad 5 Oct 9, 2022
A web app which help you to save your daily tasks, mark them as completed and edit and delete them. Built with JavaScript

To-Do List A simple to-do list to help you organize your daily tasks. Built With HTML. CSS. JavaScript: ES6, Modules, Classes, Arrow Functions, Events

Williams Colmenares 13 Dec 17, 2022
A web app which help you to save your daily tasks, mark them as completed and edit and delete them. Built with JavaScript

To-Do List A simple to-do list to help you organize your daily tasks. Built With HTML. CSS. JavaScript: ES6, Modules, Classes, Arrow Functions, Events

Williams Colmenares 11 Aug 10, 2022
This is a simple web application of a To-do List in which you can add, remove and edit all your tasks and also you can mark each task as completed and delete all completed ones.

To-Do List A simple web application of a to do list Built With HTML, CSS, JS, ES6 & Webpack Getting Started In this repository I created To-Do List SP

Juan Sebastian Sotomayor 12 Apr 11, 2022
To Do list is a small but useful project to make list app , you can add tasks delete tasks and modify tasks, the project built using HTML, CSS, JavaScript

Project Name The To-Do-List app description this is a project in the second week of the second module in microverse. its a useful to do list that save

Alzubair Alqaraghuli 5 Jul 25, 2022
A simple todo list app that allows users to add, delete, edit, and clear all completed tasks, built with HTML, CSS, Javascript and webpack.

todo list In this website you will add books and also watch the lists of books. Built With HTML CSS JavaScript See Live click here Authors ?? HaaDiiii

Hamid Ali 10 Oct 7, 2022
To-Do List project is the application for a to-do list, users can add and remove tasks from the to-do list. Mark tasks as completed.

To Do App To-Do List project is the application for a to-do list, users can add and remove tasks from the to-do list. Mark tasks as completed. Users c

Ishpaul Singh 6 Jul 21, 2022
An app to manage tasks. A user can add, delete and edit a task and mark it as completed, It uses simple GUI and relies on DOM manipulation in pure JS and using local storage.

An app to manage tasks. A user can add, delete and edit a task and mark it as completed, It uses simple GUI and relies on DOM manipulation in pure JS and using local storage.

KHITER Mohamed Achraf 6 Aug 20, 2022
A simple to do list webpage where you can log the daily tasks you have to do, mark them as checked, modify them, reorder them and remove them. Made using HTML, CSS and JavaScript.

To-Do-List This Webpage is for an app called To-Do-List which helps you add, remove or check tasks you have to do. It is a simple web page which conta

Zeeshan Haider 9 Mar 12, 2022
This is a Microverse (@microverseinc) project in which I created a To-do list using Webpack. User can add a task, delete it, edit its description, and clear the completed tasks.

Microverse To-Do list This is a Microverse (@microverseinc) project in which I created a To-do list using webpack. Requirements Build a Todo list usin

Manel Hammouche 11 Aug 3, 2022
Microverse Module 02 Project: This is an educational project to make a TodoList web application, where the users can add new todo, remove todo, edit todo, mark todo as completed, and remove all completed todo. Built with Webpack

todo-list This project is about building a list of To Do tasks. Where you can save your daily activities and help in daily evaluation. Live demo you v

divine charlotte 25 Jan 3, 2023
A simple HTML list of To Do tasks built using webpack, JS ES6 and CSS. This app allows users to add and delete tasks to organize their days.

To-Do List "To-do list" is an app that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as compl

Karla Delgado 15 Sep 26, 2022
An interactive list of tasks where you can add, remove, edit, mark as completed and clear all done tasks. Tested with Jest.

To do List This project its an interactive list of task where you can add and remove tasks dinamically Project Images Add new Tasks Edit Existing Task

Alex Puente 7 Nov 9, 2022
This is a To-Do List. It shows a minimalist design with the next features: Add new tasks, edit tasks, markup completed tasks, and erase all completed tasks. Built with JavaScript.

Project Name To Do List Built With HTML CSS JavaScript Live Demo To do List Live Demo Link Getting Started This is a To Do List. It shows a minimalist

Santiago Cárdenas 6 Jun 9, 2022
To-Do list a web app for tracking personal progress through the day. Users can input a list of tasks and mark them as completed once they are done. Built with JavaScript and Webpack

To-do-List-Project To Do List Project Description. This project creates a simple HTML list of To Do tasks. It was built using webpack and served by a

Olawale Olapetan 7 Jul 8, 2022
This an CRUD app built were users can create, update and delete specific day to day tasks as they wish. The app is built using webpack and served with webpack dev server

Todo-List This an CRUD app built were users can create, update and delete specific day to day tasks as they wish. The app is built using webpack and s

Duane David 10 Sep 28, 2022