Personally use this often as a:
- clipboard (to save links)
- to-do list
- vocabulary list
- quote saver
- reminders
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
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).
HTML5, CSS3, JavaScript
- 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
orDelete
- 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 pressSave
- Delete a note by hovering over the top right of it and press
Delete
and a window message will pop up to confirm, then pressOK
-
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
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.
- 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 (orindex.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