Todos App - vanilla JavaScript

Table of contents

• Overview
  • Screenshot
  • Features
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

Screenshot

Links

• Live Site Demo
• Code Repository

Features

• State management using LocalStorage:
  1. Todos are being saved and retrieved on app start
  2. The drag and drop feature is implemented in a way that the new list order is always being saved and retrieved
  3. Selected theme is stored and remembered on refresh
• Basic CRUD operations such as:
  1. Adding a new Todo item
  2. Reading the Todos list from LocalStorage
  3. Deleting individual todos / all todos from the list
  4. Editing Todos text or marking them as completed
• Filtering by all/active/complete todos
• Drag and drop to reorder items on the list
• Todos left counter
• Helpful tooltips on large screen sizes
• Toggling between light and dark mode
• Responsive layout

My process

Built with

• Mobile-first workflow
• Semantic HTML5 markup
• Scss
• BEM
• Flexbox
• CSS Grid
• JavaScript
• Webpack
• TippyJs

What I learned

While building this project I wanted to improve my JavaScript skills while searching for better ways of structuring the codebase of a project. Frameworks and libraries nowadays make it easier for us developers to organize our code but jumping straight into that lane was not something that I was considering because I am a firm believer of starting from the basics and understanding the key concepts of a subject before moving forward.

This thought process brought me to the Model View Whatever architectural patterns, or Model View * in short. The key idea behind it is to split the Application logic into three separate parts:

All patterns that derive from this can be traced back to the Model View Controller pattern which is basically made of:

• the Model, handling all the data related logic. It only cares about the data it manages but it does not render that data to the screen.
• the View, handling the presentational logic and displaying the current model state. The view the model listens to changes inside the model data and renders it to the output device.
• the Controller, concerned with the business logic, it receives user inputs and updates the model

Some benefits that these architectural patterns provide are:

• Separation of Concerns: each component strictly does what it supposed to only. They all have a purpose, and those purposes are different.
• Flexibility - it provides the grounds to easily implement new features thus making the application more scalable.
• Better code structure - the MVC patterns promote an easier understanding of a codebase speeding up the flow when other developers might need to jump in to work on a new project.

In this project I implemented a variation of the MVC pattern called Model View Presenter. The key differences are:

• The Model has the same responsibilities as in the MVC pattern. It might still emit new events when its data change but now it is the Presenter that listens to them and no longer the View.
• The View is passive: it only receives the data but it does not manipulate it in any way. This task is shifted to the Presenter.
• The Presenter no longer receives the user inputs like the Controller. User inputs are being handled by the View which then sends the information to the Presenter. The Presenter validates user inputs and updates the Model. It then receives back the state of the app from the Model and decides exactly what needs to be sent to the View.

!! Note that in this project I have used callbacks to handle the communication between components but this can also be done with CustomEvents or the Observer or Publisher/Subscriber patterns.

Continued development

I will continue to research and implement variations of the Model View * architectural pattern while also improving my general vanilla Javascript skills. While I do agree that such an implementation might actually be an overkill for a simple todo application, I think that it was actually really beneficial for me because it taught many new concepts and helped me realize the importance of a well structured codebase, not only for me but for someone who might review my code as well.

Useful resources

• Todo app challenge on Frontend Mentor - This gave me the basic styling guidelines to follow while building this project which I used as a starting point on which I built upon where I felt that it was needed.

Author

• Github - @MariusHor
• Frontend Mentor - @MariusHor