A notes app is a great project for anyone learning HTML, CSS and JavaScript as it allows you to explore 3 key layers of a front-end application:

• interacting with API
• business logic
• UI (view)

Tutorial

I'd usually go into detail of the code in these posts, but this project is a little too big. Instead, I'll give an overview and if you want more detail, you can check it out on my YouTube channel, dcode:

View the Source Code

Source code is available on GitHub:

Local Storage API

We'll have a NotesAPI.js file which contains 3 static methods for a basic CRUD operations:

• getAllNotes() - retrieve all notes from Local Storage
• saveNote() - saves a single note (insert OR update)
• deleteNote() - deletes a note

UI (View)

Another file, NotesView.js will contain a class which we instantiate, and will take in the root #app element as well as a few event-based functions:

• onNoteSelect - when the user clicks on a note in the side bar
• onNoteAdd - when the user clicks on the "Add Note" button
• onNoteEdit - when the user makes a change to the note title or body
• onNoteDelete - when the user wants to delete a note

We then have various methods in the view that will update parts of the UI:

• updateNoteList() - updates all the notes in the side bar
• updateActiveNote() - sets a note as active

Tying It All Together

In an App.js file, we tie the API layer and the UI layer together by hooking onto the handlers to perform our CRUD actions. This can also be thought of as a "controller".

All done 🚀