Notista (Project)

demo | github | tutorial

Key Takaways

In order to practice and learn JavaScript, HTML and CSS, I followed a tutorial that builds a note taking app (yes, another one) using pure vanilla JS.

Model-View-ViewModel (MVVM) Architecture

What is interesting was the app architecture. Specifically, there were three separate JS files which each handled a specific functionality of the app, specifically:

• NotesView.js - Handled all UI functionality and interacted directly with the DOM of the webpage by inserting and manipulating HTML. View in MVVM
• App.js - Acted as boundary between NotesView and NotesAPI by calling and receiving data from NotesAPI and sending data to NotesView. ViewModel in MVVM
• NotesAPI.js - Interacted directly with localstorage as a “database”. Model or Repository in MVVM.

To learn more about MVVM, here

CSS

The CSS made it look very professional. It used flexbox which I hope to learn more about.

HTML and JavaScript

I learnt so much about HTML and JavaScript separately and also how they can work together.

• Custom data properties were used to track ids of each note.
• localstorage can be used to store data locally.
• General JS syntax like arr.ForEach(function) or arr.find(predicate)
• Structuring HTML with div elements and proper class names or when to use id

Lastly

I hope to be able, without following a tutorial, implement a Todo application (yes, very creative I know … ) usign the same concepts and vanilla JS.

Overall it was a very fun project to build and tutorial to follow.