Simple Note Taking Application

Personally use this often as a:

clipboard (to save links)
to-do list
vocabulary list
quote saver
reminders

Description

This is a simple and lightweight CRUD application made with just pure HTML5, CSS3, and JavaScript.

The app's purpose is to help the user jot down notes during their browser session, study or even use as a clipboard to store information.

This app uses local storage to save notes right in the browser!

More details about Local Storage

The app satisfies the following use cases:

User can perform CRUD operations

User can Create notes
User can Read notes
User can Update notes
User can Delete notes

Notes are stored in the browser so it can be accessed across different browser sessions using the same web browser (Chrome, FireFox, Edge, Opera).

Technologies:

HTML5, CSS3, JavaScript

How to use

Create a note by adding a title where Name… is located, and add your note text where Start writing… is located
Read Notes
Update the note by hovering over the top right of the field to see the control panel to Edit or Delete
After pressing Edit, the note can be changed by typing into the fields highlighted with a different color, then go back to the control panel in the top right and press Save
Delete a note by hovering over the top right of it and press Delete and a window message will pop up to confirm, then press OK

Instructions to run a local copy

Clone this repository and save to a folder on a laptop (or on GitHub click Code > Download Zip)
Go to the directory (folder) where code is stored
```
cd /note-taking-app
```
Open up index.html in any browser
- bookmark the page to use later

Color Customization

You can change the colors to suit your preferences, all located in styles.css file under the :root.

Colors are saved under a css variable
e.g., to change background color of the page modify the hexadecimal value after --bg: and replace #02001D to color of your choice.

Local Storage

Shared between all tabs and windows from the same origin
- If data is set in one window, the change becomes visible in another one.
The data does not expire. It remains after the browser restart and even after OS reboot
Only have to be on the same origin (domain/port/protocol), the URL path can be different
Limit is around ~5mb, depending on the browser

So closing/opening the browser or opening the same page in a different window will not remove the data.

To see the notes being saved in Local Storage

press [F12] to open Developer Tools in the browser, while app (or index.html) is open
Click Application tab
On the left panel go to Storage > Local Storage

Note: If you do not want notes to be saved on your browser, try opening the app in "incognito" or "private browsing" so data will be cleared when the last "private" tab is closed

To assuage any privacy concerns, notes are not saved in any other place other than your own local machine's web browser

basilhayek / note-taking-app