A minimalist ToDo list app to add, update and remove tasks easily

Related tags

Learning resource javascript flex webpack html5 css3 class material-icons linters
Overview

microverse-m2-todo-with-webpack

This is a minimalist ToDo list app to add, update and remove tasks easily.

image

Live demo

Live Demo Link

Built using

  • HTML
  • CSS
  • JavaScript
  • Webpack

Usage

start by cloning this repository by running:

git clone https://github.com/OybekKayumov/microverse-m2-webpack.git

cd to the folder

run this command to install all the packages needed

npm install

to run a live server on port 8080 run this command

npm run start

to build your project run:

npm run build

Author

👤 Oybek Kayumov

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

📝 License

This project is MIT licensed.!

Comments
  • Do I follow JavaScript best practices?

    Do I follow JavaScript best practices?

    • [ ] It will b better use ES6and use object destructuringto get the values from an object to avoid repeating a code.
    • [ ] The clear all completed would be better if it was a button not a div.
    • [ ] We can use + to convert a String to a number instead of the Numberfunction.
    opened by OybekKayumov 0
  • Peer-to Peer Review

    Peer-to Peer Review

    Great job with your project 👍 Your project is looking great, Its design looks perfect 💯. Your code is highly clean and organized.

    Good work and wish you all the best 😃

    opened by IfzaRasool 0
  • To Do list: interactive list

    To Do list: interactive list

    In this branch: -Added a new JavaScript file and import it as a module. -Added event listener to the checkbox. -Implemented a function for the "Clear all completed" button. -Stored the updated array of items in local storage, so the user gets the correct list values after the page reloads.

    opened by OybekKayumov 0
  • To Do list: add & remove

    To Do list: add & remove

    In this branch:

    • Created new .js file with 3 functions add, update, and remove.
    • Call the add function on enter press or click.
    • Call the update function on the enter press.
    • Call theremove function on trash icon click.
    opened by OybekKayumov 0
  • To Do list: list structure

    To Do list: list structure

    In this branch:

    • I used boilerplate from the previous webpackexercise.
    • I created an index.html, index.js, and a style.css files inside the src folder.
    • I created a tasks array with 4 tasks as objects, each one of them has a description, index, and completed values.
    • I created a render function to display the tasks list on the page.
    • I added styling to make look similar to the given example
    opened by OybekKayumov 0
Owner
Oybek Kayumov
Full-time student at Microverse| Full-Stack Developer| HTML& CSS | JavaScript | React | Ruby | Open to new job opportunities |
Oybek Kayumov
GitHub
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
TODO List is a simple website that displays a list of todo and allows you to add and remove todo from that list.

Todo TODO List is a simple website that displays a list of todo and allows you to add and remove todo from that list. App Screenshot Live Demo Todo Ap

Ishmael Kargbo 3 May 12, 2022
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
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
Todo-List is an online website where users can add a todo tasks. tasks can be removed , added, and edited. Built with Webpack and JavaScript.

To-do List Description To-do-list is an online website where users can add a todo tasks. tasks can be removed , added, and edited.Built with Webpack a

tarike bouari 9 Sep 9, 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
A Minimalist to do list website where user can add, remove and edit multiple tasks and All the changes user makes in his to do list is saved in browser local storage so that it can be accessed later.

Testing for Add Remove function in To Do List App Jest framework is used for testing. Created (addremove.test.js) for a file containing the add item a

Krishna Prasad Acharya 8 Aug 15, 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
"To Do List" is a minimalist project that displays a list of task and allows you to add and remove task from that list. Built with JavaScript

To Do List Structure Solo programming project for module 2 week 2 of the Microverse Program. Live Demo Live Demo Link "To Do List" is a minimalist pro

Yersel Hurtado 7 Mar 5, 2022
A simple To-do app project made using JavaScript ES6 and Webpack - Microverse. You can add, remove, check tasks, and remove all the tasks that were done at the same time. Feel free to see the live version, if you like it please give it a star!

To Do List a to do list javascript app buit using webpack and es6. Built With HTML CSS JavaScript Wepack Live Demo (if available) Live Demo Link Getti

Aron 8 Dec 17, 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 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 project is a To-do list app which users can store and edit their Todo Tasks. Users can also change the order of their todo

Project This project is about a todo app bundling using webpack Additional description about the project and its features. Built With HTML CSS Javascr

Richmond Adu-Kyere 2 Jun 17, 2022
A simple and basic app, where you can add your todo list and remove all selected or one of the items from the list

A simple and basic app, where you can add your todo list and remove all selected or one of the items from the list

Sediqullah Badakhsh 13 Jun 14, 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
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
DoMe is a ToDo App. you can add, delete and reorder elements of the todo list using drag and drop. You can also toggle between dark&light mode

DO ME Todo App Live Preview : DO ME Built With : - ReactJS - TailwindCSS Make sure you have: - Git - Nodejs version 14 or higher (we recommend using

Medjahdi Islem 5 Nov 18, 2022
A To-DO-List app that allows user to create, update, and remove their daily tasks in and from the browser localstorage. Built with HTLM5, CSS, JavaScript, and Webpack.

To-Do-List A To-DO-List app that allows user to create, update, and remove their daily tasks in and from the browser localstorage. Built with HTLM, CS

Steven Ntakirutimana 5 Jul 7, 2022