To do list is a simple CRUD application that allows you to add, delete, update tasks that you are supposed to do.

Related tags

Learning resource javascript css html webpack
Overview

to do List

To do list is a simple CRUD application that allows you to add, delete, update tasks that you are supposed to do. screenshot

Built With

  • HTML-5
  • CSS3
  • Javacript modules
  • Webpack
  • Linters

Live Demo

Live site URL to Our Awesome Books Live Demo Link

Getting Started

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

Prerequisites

  • You only need a browser to run the html file in.

Setup

  • Create a new folder to store the files in.

Install

  • Open your command prompt or terminal and run.
  • git clone [email protected]:Nemwel-Boniface/todoList.git .

Usage

To use it run the following commands To get the configurations of the app run npm install To run the application run npm start

Run tests

  • To run tests run : npx hint . npx stylelint "**/*.{css,scss}" npx eslint .

Deployment

  • Project is deployed using
  • git push

Authors

👤 Author1

🤝 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

Major thanks to Nemwel

📝 License

This project is MIT licensed.

Comments
  • Use ES6 syntax where ever possible.

    Use ES6 syntax where ever possible.

    Hey, Great job with the project. I have a suggestion for you.

    • I can see that you have used a for loop for traversing an array which holds the hard coded values. You can rather use forEach() method to do the same.

    Good luck with the rest of the project. Happy coding. ⭐😊✌️

    opened by muneebulrehman 2
  • Todo List Milestone 1 : todolist project setup

    Todo List Milestone 1 : todolist project setup

    In this project I was able to :

    • Learn and apply webpack bundler to my project
    • Practice JavaScript DOM manipulation
    • Practice professional documentation
    opened by Nemwel-Boniface 1
  • todoList Milestone 4 : Setup todoList project gh-pages

    todoList Milestone 4 : Setup todoList project gh-pages

    In this Milestone I was able to implement:

    • Setup gh-pages for my project
    • Deployed my webpack project to Github pages
    • Update code for delete element to delete the correct element
    opened by Nemwel-Boniface 0
  • to-do List Milestone 3 : Interactive list

    to-do List Milestone 3 : Interactive list

    In this milestone I was able to :

    • Practice use of Javascript modules
    • Practice Javascript DOM manipulation
    • Practice use of ES6 syntax
    • Finish all CRUD functionality for my to-do list application

    Known Issue

    • sometimes when you delete the checked tasks and add new ones and delete them again the delete functionality "hangs". Delete directly from local storage and refresh the page and everything should be fine.
    opened by Nemwel-Boniface 0
  • To-do list milestone 2 : Crud

    To-do list milestone 2 : Crud

    In this milestone I was able to:

    • Generate my contents dynamically
    • Practice and implement CRUD functionality on my application
    • Practice use of ES6 syntax
    • Practice the use of JavaScript DOM manipulation
    • Practice storing and retrieving data from my local storage
    • Practiced use of webpack as a bundler for my code
    opened by Nemwel-Boniface 0
  • Suggestions for improvement

    Suggestions for improvement

    Hi @Nemwel-Boniface 👋 , Congratulations on your project, you put in great effort to work on this project and that is highly commendable. However, there are a few suggestions I will like you to implement;

    • [ ] It should be better after every change happens in local storage, we must make sure that the task.index is updated
    • [ ] It should e better to validate the input.value before adding the description to the list, to make sure that no empty value or duplicated value is being added to the list
    • [ ] It could be better to make your web app more secure by using only secure plugins/CDN, you can do that just by HTTPS instead of HTTP.
    • [ ] list overflow after adding a large number of tasks: link.

    Happy coding!!

    opened by levy002 0
  • JavaScript best Practices

    JavaScript best Practices

    I believe the project was well executed and I would like to note the following that I implemented in my code:

    1. KISS

    My project syntax is very simple and straightforward without any unnecessary complexity in it.

    2. YAGNI

    In my project, Only the code that is being used is present in the codebase. Any other piece of unnecessary code was removed.

    Found proposed changes

    This said, The code still has some refactoring to be done.

    opened by Nemwel-Boniface 0
Owner
Nemwel Boniface
I am a Microverse student, a Front-End web Developer competent in HTML, CSS, JavaScript, React, and Redux. Looking for new opportunities.
Nemwel Boniface
GitHub
The to-do list project is an app that allows users to successfully organize their day by inputting prioritized tasks. The project also allows users to carry out the CRUD operations for (add, edit and delete). Two special features of the app are that it saves tasks in the local storage of the user's browser, so when the user reloads or revisits the app, the user can view a list of tasks formerly inputted, and it allows users to prioritize their tasks by dragging up and down the list section.

TO-DO-LIST This is a To Do List Project that dynamically displays tasks to be done with interactions for removing and adding task when completed or no

Francis Ugorji 9 Nov 1, 2021
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 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
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
This project is a list manager that will allow a user organize a list of their tasks. They can conveniently create, update and delete tasks.

TO DO LIST APP This project is a list manager that will allow a user organize a list of their tasks. They can conveniently create, update and delete t

Kehinde Onifade 8 Oct 7, 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 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
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
In this project, I implement a Simple To Do List with the CRUD (create, read, update, delete) methods. I followed the JavaScript, CSS, HTML, DRY, KISS and YAGNI Best practices.

To Do list: add & remove In this project, I implement a Simple To Do List with the CRUD (create, read, update, delete) methods. All the elements of th

Olivier 6 Nov 20, 2022
In this project, I implement a Simple To Do List with the CRUD (create, read, update, delete) methods. All the elements of the user interface are fully functional.

To Do list: add & remove In this project, I implement a Simple To Do List with the CRUD (create, read, update, delete) methods. All the elements of th

Olivier 10 Jan 3, 2023
A Todo list app that allows the user to add tasks, delete, edit, chage, and clear all completed tasks. Built with JavaScript, CSS and Html.

To Do list: interactive list description: A todo list app that allow users to add new task, delete, edit, and clear all completed.Built with JavaScrip

IBRAHIM AHMAT 7 Aug 4, 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
A CRUD made with NodeJS. It's a book directory where you can see the books, add new ones, update them, or even delete .

BOOK-DIRECTORY-NODEJS A CRUD made with NodeJS. It's a book directory where you can see the books, add new ones, update them, or even delete . What I u

null 6 May 18, 2022
A CRUD made with NodeJS. It's a book directory where you can see the books, add new ones, update them, or even delete .

Book-Directory-NodeJS A CRUD made with NodeJS. It's a book directory where you can see the books, add new ones, update them, or even delete . What I u

null 5 May 13, 2022
Angular 14 Firebase CRUD with Realtime Database - AngularFireDatabase Object and List example: create, retrieve, update, delete

Angular 14 Firebase CRUD example with Realtime DataBase | AngularFireDatabase Build Angular 14 CRUD example with Firebase Realtime Database that uses

null 7 Dec 26, 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 interactive To-Do List Web Application that allows users to add, edit and delete tasks.

To-Do-List A To-Do list web application. Live Preview Click here to view Live Page Built with HTML CSS JavaScript Used best practices, ES6 e.t.c Setup

William Raga 15 Nov 3, 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
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