94
Build a Notes App in JavaScript with Local Storage ππ
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:
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:
Source code is available on GitHub:
dcode-youtube
/
notes-app-javascript-localstorage
A Notes App built with vanilla JavaScript and Local Storage.
We'll have a
NotesAPI.js
file which contains 3 static methods for a basic CRUD operations:getAllNotes()
- retrieve all notes from Local StoragesaveNote()
- saves a single note (insert OR update)deleteNote()
- deletes a noteAnother 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 baronNoteAdd
- when the user clicks on the "Add Note" buttononNoteEdit
- when the user makes a change to the note title or bodyonNoteDelete
- when the user wants to delete a noteWe then have various methods in the view that will update parts of the UI:
updateNoteList()
- updates all the notes in the side barupdateActiveNote()
- sets a note as activeIn 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 π
94