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.

Related tags

Learning resource To-Do-List
Overview

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 desing with the nex features:

Add new tasks

Edit tasks

Markup completed tasks

Erase completed tasks

This project was made with HTML, CSS and Javascript.

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

Setup

  • Clone the repository.
  • In your code editor terminal run npm install to install all the dependencies needed.
  • In your code editor terminal run npm run start to start the local server.

Authors

👤 Author

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Acknowledgments

Show your support

Give a ⭐️ if you like this project!

📝 License

This project is MIT licensed.

Comments
  • Morning Session Peer To Peer Review

    Morning Session Peer To Peer Review

    Great Job you have done so far but there are some observation and recommendation;

    • It would be a good idea that when you try click the 3 dot button to delete the task, it should only shows the delete icon for the chosen task.
    opened by Adanzeakonobi 1
  • Peer to peer code review

    Peer to peer code review

    You did a great job so far!

    We have some suggestions:

    • It would be better if you add a reset to the function when creating the task in order to clear the input.
    • You can use icons instead of images.
    opened by emiliazm 1
  • Automated tests

    Automated tests

    Tasks done:

    -Added tests to add and remove elements to the array. -Added tests to add and remove elements to the DOM. -Added tests to add and remove elements from the local storage. -Installed and configures Jest to do tests.

    opened by Santiago220991 0
  • List interactive

    List interactive

    Tasks done:

    • Added check.js file.
    • Added event listeners to the checkbox.
    • Added function clear in list_functions.js to clear all completed tasks in the array.
    opened by Santiago220991 0
  • To Do List: Add & Remove

    To Do List: Add & Remove

    Tasks done:

    • Added list_functions.js file as a module.
    • Added functions add, edit and erase to list_functions.js.
    • Added local storage feature.

    Note: To erase any task, first click on the edit button then click on the erase button.

    opened by Santiago220991 0
  • Morning session peer-to-peer code review

    Morning session peer-to-peer code review

    Kindly consider changing your styles so that editing and the item fonts are the same. Focus outline on items would be best to not appear when editing.

    The project looks very good so far, I would suggest implementing a drag and drop for the whole list so that users can move it around.

    opened by Danie12345 0
  • Code review by peer

    Code review by peer

    Great job, you can please also test the add and remove functions that update the localstorage. There is a method from jest that you can use: expect.ToHaveLength() to test the length property of an object.

    opened by acolombo1 0
  • HTML and CSS best practices.

    HTML and CSS best practices.

    I think there are just a few things you can do to improve your project.

    -Kindly, please use semantic tags in your project. You could replace the title div tag with a header tag. You should also use an h1 tag for your title to help browsers to find easily your page. https://github.com/Santiago220991/To-Do-List/blob/57fab743c5df1d5d0a8b9da825f76bb514660dcb/src/template.html#L11

    opened by Santiago220991 0
  • DRY, KISS and YAGNI

    DRY, KISS and YAGNI

    I consider you can implement the next suggestions in order to improve your project.

    • Kindly please don't repeat this section of code to make your code DRY. You can save this section of code in a variable to avoid repeating the code.

    https://github.com/Santiago220991/To-Do-List/blob/57fab743c5df1d5d0a8b9da825f76bb514660dcb/src/index.js#L72-L79 https://github.com/Santiago220991/To-Do-List/blob/57fab743c5df1d5d0a8b9da825f76bb514660dcb/src/index.js#L81-L88

    opened by Santiago220991 0
Owner
Santiago Cárdenas
"Full-Stack developer, Electronics and Telecommunications engineer, coding enthusiast. Stack: JavaScript, Ruby, Rails, React, Redux. Open to new opportunities."
Santiago Cárdenas
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
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
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 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
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
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 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 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
A simple To-Do List app built using JavaScript, where users can add, edit and remove tasks from the list as well as marking them as completed.

To-Do List This is a to-do list application. Built With Languages: HTML5 & CSS3 JavaScript Preprocessors: Sass Technologies: Webpack Conventions and M

Gabriel Santo 3 Jun 25, 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 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
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
"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 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
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
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
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
Simple To-do list build using HTML5, CSS3, JavaScript and Webpack. You can add new tasks, remove and edit them.

Simple To-do list build using HTML5, CSS3, JavaScript and Webpack. You can add new tasks, remove and edit them.

Esteban Munoz 6 Mar 5, 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