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.

Related tags

Learning resource javascript webpack html5 css3 todo-list
Overview

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 using:

  • HTML5
  • CSS3
  • JavaScript (ES6)
  • Webpack
  • Linters (Lighthouse, Webhint, Stylelint, Eslint)

Built With

  • HTML5
  • CSS3
  • JavaScript (ES6)
  • Webpack
  • Linters (Lighthouse, Webhint, Stylelint, Eslint)

Live Demo

Check Live Demo here.

Getting Started

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

Prerequisites

  • A web browser (like Google Chrome, Opera...).
  • A code editor (like Atom, VScode...).

Setup

To setup the webpage locally: click on "Code" (dropdown list) then "Download ZIP".

Deployment

To run the project open the downloaded folder (after extraction) then run the "index.html" file in your browser.

Authors

👤 Manel Hammouche

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

  • Hat tip to code reviewers and to everyone who reviewed the project and made suggestions.

📝 License

This project is MIT licensed.

Comments
  • Morning Session Peer-to-Peer Code Review

    Morning Session Peer-to-Peer Code Review

    Good job so far here are some suggestions you could implement to improve your code:

    • You could make your code DRY by refactoring the repeated lines of code in the task.js file, check this line it is repeated multiple times.
    • It is better if you could change the color of the focused input for better UX.
    • You could unmark a task as completed when the user edits a completed task.
    opened by kelvinbush 0
  • To-do list: Drag and Drop feature

    To-do list: Drag and Drop feature

    In this branch I added a new JavaScript file for the drag & drop feature in which we can:

    • drag a list item and drop it in the list to reorder the items according to the dropping location.
    • fixed some bugs that were introduced in the status tracking functionality.
    opened by ha-manel 0
  • Peer to peer code review

    Peer to peer code review

    Good Job so far👌✔ The following are the suggested features that you can implement to make your code even better.

    • Consider adding the "arrow turn down left" font awesome icon as seen in the given template
    opened by mwenyoa 0
  • To-do list: Interactive list

    To-do list: Interactive list

    🎯 In this branch I:

    • Added a status class to manipulate and update the status of the tasks.
    • Added styling to the completed tasks.
    • Added functionality to the clear completed button.
    opened by ha-manel 0
  • To-do list: Add, edit, and remove functionalities

    To-do list: Add, edit, and remove functionalities

    🎯 In this branch I:

    • Added a JavaScript class for the to-do tasks in a separate file.
    • Added add , edit , and remove methods to the Tasks class.
    • Added functionality to the refresh button to reload the page upon click.
    opened by ha-manel 0
  • To-do List: List Structure

    To-do List: List Structure

    🎯 In this branch I:

    • Initialized the project with npm and set up Webpack.
    • Added HTML elements for the to-do list.
    • Styled the to-do list.
    • Created an array of to-do list items as objects.
    • Added JavaScript function to populate the to-do list from localStorage.
    opened by ha-manel 0
Owner
Manel Hammouche
Full-Stack Developer at Microverse. JavaScript enthusiast. Open to new opportunities.
Manel Hammouche
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 simple to-do list application that helps to organize your daily tasks and keep track of the task you have completed and the task you are yet to have completed, and also deleting the completed task leaving those yet to be completed.

To-Do-List A To-Do-List App helps users to get their task cordinated and organised. This project is from microverse javascript curriculum which tests

zieeco 12 Jul 8, 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
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 To-Do-List app that input's a task by user and saves itself in the localStorage with a unique ID and when the task it checked as complete, user can click on clear all task to remove the task form the UI and localStorage. Built using JavaScript ES6

To Do List App It's an app in which user will be able to add tasks into the list and when completed the user can check it as complete!. Built With HTM

Satyam Sharma 3 Jul 8, 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
A simple todo list app written in javascript and html with basic CSS styling This project makes use of webpack to bundle the code. I implemented 3 functionalities on the this project namely: Add task edit task delete task using Js

My To-Do List A simple todo list app written in javascript and html with basic CSS styling This project makes use of webpack to bundle the code. I imp

Richard Chileya 5 Nov 11, 2022
A to do list where you can add tasks, mark completed tasks and clear all completed tasks.

To Do List A to do list where you can add tasks, mark completed tasks and clear all completed tasks. You can rearrange the order of the tasks by doubl

Amira 7 Mar 4, 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
This project entails a To-do-List whereby a user can input the tasks they want to do, check the tasks done and also clear all tasks when all of them are completed. It is efficient for a user who want to manage their time and keep track of their day.

Screenshot Here is a screenshot for the project. To-Do-List Project This is a Microverse project that entails a to-do-list which one is able to add an

Grayce Muthui 8 Jun 16, 2022
Module '2' Week two '2' project. The following technologies are used: HTML, CSS , Webpack, and JavaScript. Features of this app are rendered dynamically. It allows user to pinned or add task the will be doing on it. Local storage session is implemented. Task stay on app when user refresh or reload page. Task can be checked when completed.

To Do list: Description the project. Built With Major languages Frameworks Technologies used Screenshot of project Built With HTML, JAVASCRIPT, CSS, a

Evans Kupour 8 Nov 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
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 to-do list Web application that lets the user add, remove and reorder to do lists and checks a task when completed with a button to delete all completed task

TO DO LISTS A Web application that lets the user add, remove and reorder to do lists Built With Html,JS,CSS Webpack and other dependencies Git, Github

Promise Okechukwu 14 Nov 1, 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
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
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
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 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