‧͙⁺˚*･༓☾🐺☽༓･*˚⁺‧͙

Todo_VanillaJS

2 min read

project Repo: GitHub - Prakhargarg-2010196/Todo_VanillaJS: This is an implementation of Todo app in vanilla js

How to build a Todo List App with JavaScript

Understanding the Problem

The problem is to make a todo app that helps in creating a todo , updating a todo , deleting a todo and displaying a todo. We have to persist the todos in an array into the local storage and then retrieve them for display. The app would have a simple user interface with a input element for inputting the todos , A view container for viewing the todos which would have each todo element represented as a list item with two buttons for editing and modifying the todos.

Plan

Input

Todo app would have following inputs

  • todo : Object {content:‘string’,id:‘number’,status:‘boolean’}
  • User will input the data from input field.

Output

  • Display a list of todos with edit and delete functionality.

Pseudo Code

  1. There would be three functions
    1. Model : controlling the data
    2. Controller:Controlling the functionality like events
    3. View : Controlling how data gets represented.
  2. First check if there are already todos in the local storage
    1. Change the DOM to represent all the todos by looping through all the todos in the local storage by fetching them from the model.
  3. For creating a new todo
    1. User enters the input from the input element
      1. Todo would have a id which is calculated from the array length.
      2. Todo would have a status as false which will uncheck the tick box
    2. Clicks the Create button (click event fired)
    3. View sends the data through the controller to the Model
      1. Model Updates the data in the local storage and then fires the update view event back to the controller which in turn refreshes the todos display to the view.
  4. For Deleting a todo we need its id which we attached during creation phase.
    1. After clicking delete button the id is sent through the controller to the model and model deletes it from the local array first and then updates the data to local storage and again refreshes the view.
  5. Editing the Todo we need id
    1. After clicking the edit button the edit button gets removed from the dom and two new buttons are replaced with it one is for confirming the edit and another for cancelling the edit.

Graph View