To Do List is a minimalist web app, but with all the functions that you need most for task management

  • By Juan Paulo Pérez-Tejada
  • Last update: Mar 29, 2022
  • Comments: 4

To Do List

A simple HTML list of To Do tasks

screenshot

Features

To Do List is a minimalist web app, but with all the functions that you need most for task management

Create Tasks

Add text in the input box and press enter. The task will be ordered at the bottom.

screenshot screenshot

Edit tasks

Click the text area. When the task is highlighted, you can edit your text. Changes will be saved after pressing enter. screenshot screenshot screenshot screenshot

Check tasks

Check and uncheck tast clicking the checkbox.

Clear all completed tasks

Remove all the tasks already done pressing the clear area

Built With

  • HTML/CSS
  • JavaScript
  • Webpack

Live Demo

Live Demo Link

Getting Started

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

Prerequisites

Setup

  • Clone the project from Github

git clone repolink

Install

Once cloned, you can run it from your web browser from the dist version.

Usage

  • Do any change in the /src file
  • Run npm to update dist from src npm run build

Deployment

Authors

👤 Author1

🤝 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

  • Hat tip to anyone whose code was used
  • Inspiration
  • Microverse partners!

📝 License

This project is MIT licensed.

Github

https://github.com/Maclenn77/To-Do-List

Comments(4)

  • 1

    List structure

    Hi, Microverse team!

    I'm submitting this project for creating a minimalist TODO list.

    • I set up the project with webpack, based on the previous webpack exercise.
    • I created an index.html file and write the HTML markup there.
    • I created an empty To Do List placeholder (<div> or <ul> element).
    • The index.html file was set as a template using the HTML Webpack Plugin.
    • I created an index.js file and set an array of some simple to-do tasks (array of objects).
    • Each task object contains three keys: description [string], completed [bool], index: [number].
    • I wrote a function to iterate over the tasks array and populate an HTML list item element for each task.
    • The dynamically created list of tasks is displayed in the dedicated placeholder.
    • The list appears in order of the index values for each task.
    • I created a style.css and set rules for the To-Do List.
    • CSS is loaded by Webpack Style/CSS Loader.
    • The list is intended to be a clone of the part of the minimalist project used as an example.

    Have a good day! :smiley_cat:

  • 2

    Peer-to-Peer Code Review

    Good work, JP! Your project looks great and you implemented all the functionality. Here is some feedback to consider:

    • Consider wrapping the contents of your HTML file in amain tag for semantics.
    • Consider clearing the input field after the user enters a new task.
  • 3

    Crud implementation: Add and remove elements

    Hi, Microverse reviewers!

    I've applied the requested changes for this project.

    • I removed all hardcoded items from the tasks array.
    • I create a new JavaScript file for the new functionalities. I called crud.js.
    • I implemented a function for adding a new task (add a new element to the array). (createTask(a, b))
    • I implemented a function for editing task descriptions (it's called update(a, b, c)). When you click the text, the color changes and the content is editable. Changes are saved when you press enter.
    • I implemented a function for deleting a task (remove an element from the array, it's called removeTaskFrom(a, b)).
    • I implement a function for the "Clear all completed" button (removeAllFrom(a). It uses filter method as suggested).
    • By default, new tasks have the property completed set to false and the property index set to the value of the new array length. I achieved this by creating a class for Task that sets the values from the beginning.
    • 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.

    Have a nice day! JP

  • 4

    Add interactivity with checkbox

    Hi, Microverse reviewers!

    I have completed this stage of the project. In the current version, the project:

    • has a separate module for the checkboxes. In this module, you can find two useful functions: isChecked(task), that checks if a task has been completed or not before loading the page and will mark it as checked if it is. checkbox(list, taskIndex). This function changes the value of a task as completed or not completed.
    • has an Event Listener for checking and unchecking. Each time that you change a checkbox, this will change the value of completed to true or false.
    • store in Local Storage the change of values.

    Everything is working by my side. Notify me of any issue that I missed.

    Have a good day! :sunglasses: JP