Visual Components

• A. Input field to insert a ToDo
• B. To Do unchecked (task uncomplete)
• C. To Do checked (task completed)
• D. Toggle buttons to view respective items:
  • All: All items, completed & uncompleted
  • Active: Tasks to be completed
  • Completed: Tasks completed
• E. Toggle All button: Check or uncheck all items
• F. This button will clear all the tasks that had been completed
• G. Counter of remain tasks to be completed

How it Works

the app are based on MVC pattern. What it means? lets explain this into a graphic

Source: Wikipedia

• The model is responsible for managing the data of the application. It receives user input from the controller.
• The view means presentation of the model in a particular format.
• The controller responds to the user input and performs interactions on the data model objects. The controller receives the input, optionally validates it and then passes the input to the model.

File structure (js)

├── js
|  ├── app.js
|  ├── controller.js
|  ├── helpers.js
|  ├── model.js
|  ├── store.js
|  ├── template.js
|  └── view.js

On the next section we will focus on the MVC pattern.

Now I will explain fastly the another files:

Template

This file contains how the name say: the template for the application that would be manipulated by the View component of MVC

Store

This file store the data inserted on our application and would create an storage on the client side

Helpers

This file contain helper functions that could be called frequently in this case there are some computation that could be do it frequently. Maybe the snapshot of a piece of this helpers could help you figure out:

Go to Top

The MVC

Here are the essential components (files) of our app.

App

First of all let see the app.js file which encloses all the modules where you will see practically how these works (see comments):

function Todo(name) {
      //Db on client created
		this.storage = new app.Store(name);
      // Model that manipulates the storage
		this.model = new app.Model(this.storage);
      // Template created
		this.template = new app.Template();
      // View that manipulates the Template
		this.view = new app.View(this.template);
      // Controller that iterates with view on model
		this.controller = new app.Controller(this.model, this.view);
	}

Giving a name to our ToDo thus that would be the name of the storage

   let nameTodo = 'todos-vanillajs';

Creation of our app

	var todo = new Todo(nameTodo);

This function set the view takin as reference the anchor part of the URL (see note below)

   function setView() {
      todo.controller.setView(document.location.hash);
   }

So, when the home page loads the setView would take the value of ' / ' Thus the first view displayed would be "all items (ToDos)"

   $on(window, 'load', setView);

When the "window's hash" changes the setView place the view with the respective hash: i.e '#active' will display the Tasks uncompleted of our ToDo

   $on(window, 'hashchange', setView);

Notes: For more information about location.hash go to w3schools or about the Window.location go to MDN web docs

Go to Top -------/-------/------- Next -> Model