A web app which help you to save your daily tasks, mark them as completed and edit and delete them. Built with JavaScript

Overview

To-Do List

A simple to-do list to help you organize your daily tasks.

Built With

  • HTML.
  • CSS.
  • JavaScript: ES6, Modules, Classes, Arrow Functions, Events.
  • Webpack.

Live Demo

Live Demo Link

Getting Started

To get a local copy up and running follow the next steps: -Copy the SSH key of the repository and make a 'git clone' in your terminal using the copied key, then you will be able to deploy this project locally.

👤 Author

🤝 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

  • Microverse Module 2
  • Project indications here

📝 License

This project is MIT licensed.

Comments
  • Peer-to-peer code review 12/07/2022

    Peer-to-peer code review 12/07/2022

    First of all, congratulations on your code, the app looks great, and there are no known bugs 🔥 💯

    Here are a few suggestions to improve on it: https://github.com/wdavidcch/to-do-list/blob/d0a04d0ef2104c40ff87edf019b4b0077f147171/src/index.js#L29-L39

    • [x] Here if you put the input in a form with a button, both with "type = 'submit' " you can just have an event listener for "submit", it'll grab both click and keypress, the way it is right now you don't need the preventDefault since it's not a form
    opened by lucas-crodrigues 1
  • Testing To Do list: part 2

    Testing To Do list: part 2

    In this part of the testing project, we tested functions responsible for the status and content updates.

    • We used jest framework for testing.
    • Created a file containing the following functions for testing: a function for editing the task description. a function for updating an item's 'completed' status. the "Clear all completed" function.
    • We used the mock storage object to mock the localStorage updates.
    • Mock the HTML elements to test DOM manipulation functions.
    • We used the describe() method.
    opened by williamscch 0
  • Testing To Do list: part 1

    Testing To Do list: part 1

    In this pair-programming project, we wrote unit tests for the To Do list application using the JEST framework. This is the 1st part where we tested functions responsible for adding and deleting list items.

    Some of the features for testing we implemented are:

    • Create a test file that contains the add item and delete item functions that we tested.
    • Some of the functions we had update localStorage and manipulate the DOM. For those, we used mocks: Mock a storage object to "imitate" localStorage operations. Mock HTML to test if add/delete functions add or remove exactly one
    • element from the list in the DOM.
    • We group your tests using the describe() method.
    • We added a --coverage flag to our test script in package.json.
    opened by williamscch 0
  • Do I follow JavaScript best practices? Exercise

    Do I follow JavaScript best practices? Exercise

    • The modular structure of the js code is not well organized. The file names should be descriptive to find them more accessible.
    • The function to add a new task is too long and complex to understand, I should split that into parts and keep it simple.
    • I should delete all the old code that I left as comments and I am not using it anymore to follow the best practices.
    • I should have more modules to have a more organized code.
    opened by williamscch 0
  • To Do list: interactive list

    To Do list: interactive list

    In this project, I added new functionality to my application to make it more interactive.

    • Now the user can mark task completion by selecting the corresponding checkbox (or undo it by unchecking it).
    • The updated tasks list is stored in local storage.
    • I added a new JavaScript file and imported it as a module, it contains methods related to the status updates (completed: true/false).
    • I added an event listener to the checkbox (change).
    • Also I updated the object's value for the completed key upon user actions.
    • Implemented a function for the "Clear all completed" button (use filter() method).
    • The updated array of items is stored in local storage, so the user gets the correct list values after the page reloads.
    opened by williamscch 0
  • To Do list: add & remove

    To Do list: add & remove

    In this project, I implemented the CRUD (create, update, delete) methods to make all the elements fully functional in the UI.

    Using modular JavaScript ES6 I build the following features for the web app:

    • Implement a function for adding a new task (add a new element to the array).
    • Implement a function for deleting a task (remove an element from the array).
    • Implement a function for editing task descriptions.
    • By default new tasks have the property completed set to false and the property index set to the value of the new array length.
    • Deleting a task updates all remaining items' indexes, so they represent the current list order and are unique.
    • All changes to the To-Do List are saved in local storage.
    opened by williamscch 0
  • To Do list: list structure

    To Do list: list structure

    In this project, I build a simple list of To-Do tasks. This simple web page was built using webpack and served by a webpack dev server.

    I implemented the whole webpack configuration that I learned in previous exercises.

    I used an array of objects to display the new tasks on the screen, and also to give the object an index so I will be able to remove them using that index in the next steps of the project.

    opened by williamscch 0
Owner
Williams Colmenares
Preparing myself on @microverseinc to be a Full-Stack Developer. Passionate to learn new things every day. Currently looking for new opportunities.
Williams Colmenares
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 To Do List application that allows users to save, edit, mark completed, and delete their to-dos, and save their list when application is closed. Build with JavaScript.

To Do List A simple To Do List online application that allows users to save, and manipulate their to-dos, and save their list when application is clos

Mahmoud Rizk 10 Dec 20, 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 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
zieeco 12 Jul 8, 2022
This is a Webpack based to-do-list project. With this app, users can add thier daily routine tasks to the list, mark them as complet, edit them or delete them.

To Do List This is a Webpack based to-do-list project. With this app, users can add thier daily routine tasks to the list, mark them as complet, edit

Ali Aqa Atayee 12 Oct 30, 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 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 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 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 to do list webpage where you can log the daily tasks you have to do, mark them as checked, modify them, reorder them and remove them. Made using HTML, CSS and JavaScript.

To-Do-List This Webpage is for an app called To-Do-List which helps you add, remove or check tasks you have to do. It is a simple web page which conta

Zeeshan Haider 9 Mar 12, 2022
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
The website which can help you to organize your daily or weekly activities and review them when you need them. you can add, remove and delete an activity

To Do list To do project is webpack project that list activities someone can do at a specific time In this TO-DO list, you can add or remove you activ

Joffrey NKESHIMANA 5 Jul 21, 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
A web app which help you to save you a list of your favorite books, they will be saved on your local storage to never loose them even if you close the page. Built wiht JavaScript

Awesome Books In this project I build a page to save a list of your favorites books, you can add new books, delete it and they will be saved in the lo

Williams Colmenares 9 Dec 17, 2022