Austin J Blake

Notes App

A fully functional note-taking application written in pure Javascript and utilizing LocalStorage

This Note-taking app is another example of combining core Javascript principles into a useful and real-world application. No frameworks or JQuery needed.

Designing the app was split into two parts:

• A "Home" page with a list of all saved notes, and an option to create a new one

• The "Edit" page where a note is created or updated-contains fields for a title and body

The home page functions similar to the to-do app, with Notes being presented in an unordered list format, featuring the title. Underneath is a dynamically generated text element stating the last time this particular note was editied. I used the popular "moment" library to help achieve this.

A new note is created as an object with five "key: value" pairs--id, title, body, createdAt, updatedAt. A library called "uuid" is used to give each note a unique random id to track it. This id is also passed into the url when a new note is generated or an old note is clicked on. This hash allows a single template-like Edit page to pull data for each note as it is clicked on. The user's information is set to localStorage in JSON format and then retrieved when on either the Home or Edit page.

In addition to the ability to filter notes with the search bar, notes can be sorted by last edited, recently created, or alphabetically. This is done with the sort method applied to the desired object value and also ignores case sensitivity for easier filtering.