ToDo list app is a simple web app that helps you organize your day, by adding, checking and deleting daily tasks

Related tags

Learning resource javascript webpack html5 css3 linters
Overview

TODO List App

"To-do list" is a WebApp tool that helps to organize your day. It simply lists the tasks that you need to do and allows you to mark them as completed.

Preview

image

Built With

  • HTML5
  • CSS3
  • JavaScript

Additional Tools

  • Webpack
  • Linters
  • eslint
  • stylelint

Live Demo (if available)

Experience a live Demo 🚀

Getting Started

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

Prerequisites

  • Basic knowledge of HTML, CSS and JavaScript.
  • NPM and webpack knowledge is a plus.
  • Text editor IDE.
  • Terminal.
  • Any web browser.

Setup

  • To Clone this repository, copy and paste the command below on your terminal
https://github.com/adel-gu/TODO-LIST.git
  • or Download it as a ZIP folder via the green button "Code" above ⬆️ .

Usage

Navigate to the cloned or downloaded directory, open the dist folder, look for index.html file, and using your browser open that file.

Author

👤 Adel Guitoun

🤝 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

📝 License

This project is MIT licensed.

Comments
  • Test Todo part2

    Test Todo part2

    Changes we've made in this PR:

    • Implemented unit test case for editing the task description function.
    • Implemented unit test case for updating an item's 'completed' status function.
    • Implemented unit test case for "Clear all completed" function.
    opened by adel-gu 1
  • interactive list

    interactive list

    In This PR I implement the changes below ✔

    • Added check.js file to contain methods about the status of the tasks.
    • Added event listener to the checkbox (change).
    • Update the completed Task value when the user checks the task checkbox element.
    • Implement a "Clear all completed " function using the filter method in src/utils/delete.js.
    • Store the updated array of items in local storage
    opened by adel-gu 1
  • To Do list: list structure.

    To Do list: list structure.

    Accomplishments in this PR 🎯

    • Use webpack repo template to Set up the ToDo list project.
    • Create a tasks.js file to set the array of simple to do tasks (array of objects).
    • Build the Function to iterate over the tasks array and populate an HTML list item element for each task, inside src/module/AppUi.js file.
    • Render the tasks on page load, inside the src/module/base.js file.
    • Style the App, with src/style.css file.
    opened by adel-gu 1
  • Test todo

    Test todo

    In this PR we Implement the changes below 👍🏼

    opened by adel-gu 0
  • Add & Remove

    Add & Remove

    In this PR I did Accomplish the following 😎

    • Hardcoded items from the tasks array are Removed.
    • Create a new JavaScript file for each new functionality, inside src/utils directory.
    • Adding new task functionality Implemented.
    • Deleting a task functionality Implemented.
    • Editing a task functionality Implemented.
    • Update all remaining items' indexes when a task is deleted, Implemented.
    • All changes to the To-Do List are saved in local storage.

    Live Demo link

    opened by adel-gu 0
  • Peer to peer code review

    Peer to peer code review

    Hello @adel-gu :wave:, you have done amzing job there on unit testing.

    Here is the only issue we feel should be improved to make your code better:

    • Please apply the principle of DRY to make your code less redundant
    opened by devMunyi 1
  • Do I follow JavaScript best practices?

    Do I follow JavaScript best practices?

    Code Investigating for JavaScript best practices

    • DRY!?

      • All JavaScript files are clean of code repeating ✔.

    • KISS!?

      • Not using the Short-circuit Evaluation in : https://github.com/adel-gu/TODO-LIST/blob/60365dc636d09d95f0ebe3ad68e086550842b0c5/src/modules/utils/read.js#L3-L10
    opened by adel-gu 0
Owner
Adel Guitoun
Full-Stack Web Developer, with love for software architecting. Stack🔆: JavaScript, Ruby, Rails, React, Redux. Open to new opportunities!
Adel Guitoun
GitHub https://adel-gu.github.io/TODO-LIST/dist/
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
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 daily activity tracking application that helps to organize your daily tasks and keep track of tasks that have been completed, or yet to be completed.

To-Do-List This is my To-Do List project in the Microverse curriculum. Built With HTML CSS Javascript (Webpack) GitHub Live Demo Live Demo Link Gettin

Hammed Adisa 8 May 7, 2022
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 app that helps a user monitor daily activities by adding, storing and deleting activities.Built with HTML,CSS and JavaScript

To-do-list A simple list app that allows a user to add and remove tasks. Built With HTML CSS JS Webpack Live Demo Click To-do-list to see the page. Ge

Catherine K 7 Apr 8, 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
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
Web app for adding your daily tasks in todo list

Web app for adding your daily tasks in todo list. You can check task when your task is finished and it will be mark as finsih. Also you can delete and change description of tasks.

Sanja Mandic 15 Dec 14, 2022
Todo List is a simple web-based application that gives users the ability to organize their work and life daily tasks. Built with JavaScript, HTML/CSS.

Javascript Project Todo List Using Javascript to create a simple Todo List project. Populating the todo list and then removing from the list. Built Wi

Ghazanfar Ali 9 Sep 28, 2022
Todo application is a web app that helps to organise your daily activities. It lists all the activities that you need to be completed and allows you to mark them as complete or not. Tasks can also be dragged and dropped in any position. It's a minimalistic website built using JavaScript ES6, Webpack and CSS

Todo Application Todo application is a web app that helps to organise your daily activities. It lists all the activities that you need to be completed

Shamuobe Buingo Joseph 5 May 3, 2022
"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. You will build a simple website that allows for doing that, and you will do it using ES6 and Webpack!

To-do-list Description "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 t

Cindy Dorantes 12 Oct 18, 2022
A simple application used to organize your day to day activity. Tasks can be added and removed from this list.

Minimalist ToDo List A minimalist list of TODOs. Built With HTML, CSS, JavaScript Webpack Jest NPM Node Getting Started In order to obtain a local cop

Eva Lavinia Bucur 10 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
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. I build a simple website that allows for doing that, and I do it using ES6 and Webpack!

Project Name : 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 mar

Chris Siku 13 Aug 22, 2022
This is the version to be reviewed - "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. A simple website that allows for doing that, and built using ES6 and Webpack!

Todo-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 comple

Didier Peran Ganthier 4 Dec 20, 2022
This is a website for creating to-do tasks. "To-do list" is a tool that helps to organize your day. The main objective is to understand how to use proper ES6 syntax.

TO DO LIST To Do List This is a website for creating to-do tasks. "To-do list" is a tool that helps to organize your day. This project is part of the

Aleksandra Ujvari 2 Oct 3, 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 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
The app helps you to add todo items to your list, mark completed ones and also delete finished items. Its a handy tool for your day today activies. Check out the live demo.

Todo List App The app helps you to add todo items to your list, mark completed ones and also delete finished items. Its a handy tool for your day toda

Atugonza ( Billions ) Joel 14 Apr 22, 2022