> Tiny Notes

In this tutorial, we’re going to create a simple but powerful note-taking app. The notes you create will be stored in your browser’s local storage, meaning they’ll remain intact even if you close and reopen the browser. You can add and remove notes easily, and they’ll persist unless you manually clear your browser’s storage or use the app’s "remove" feature.

We’ll break down the app into several sections to cover:

1. Setting up local storage to keep notes persistent.
2. Creating notes dynamically with JavaScript.
3. Displaying, adding, and removing notes.
4. Storing data in local storage.

Let’s dive into the details!

Table of Contents

• Overview
• Setting Up Local Storage
• Rendering Notes
• Adding and Removing Notes
• Conclusion

Overview

This note-taking app stores notes in the browser’s local storage, so even if the page is refreshed or the browser is closed and reopened, your notes will remain. We’ll build this functionality using JavaScript to dynamically create the notes, display them, and handle user interactions like adding new notes or removing existing ones.

Setting Up Local Storage

Local storage allows us to store data directly in the browser. For this app, we’ll store the notes as key-value pairs, where each note has an ID and a corresponding text value. If the user has notes already stored, we’ll load those when the app initializes. If not, we’ll initialize with a default welcome note.

JavaScript Setup

Here’s how we initialize the local storage and check if there are any saved notes:

const generateNotes = () => {
   const localStorage = window.localStorage;
   let notes = localStorage.getItem('notes') ? JSON.parse(localStorage.getItem('notes')) 
      : { 
         "1634359781154": {
            "text": "Welcome to Tiny Notes, a tiny app with big dreams! Nothing lasts forever, but your notes will remain unless you clear your browser's local storage or click 'remove' down below.", 
            "id": 1634359781154
         }
      };

• localStorage.getItem('notes'): Checks if there are any saved notes in local storage.

• If no notes exist, we initialize the app with a welcome note.

• The notes are stored as an object, where each note has a unique ID (Date.now()) and its corresponding text.

Rendering Notes

We’ll create a function called renderNotes that dynamically generates the HTML structure for each note. This function will loop through the stored notes, format them, and append them to the page.

HTML Structure

The structure for each note includes the note text, the creation date, and a "remove" button:

const formatNote = note => {
   let noteModule = document.createElement('div');
   noteModule.className = 'note-module';
   let noteText = document.createElement('span');
   let noteSegment = document.createElement('div');
   noteSegment.className = 'note-segment';
   let date = document.createElement('span');
   let remove = document.createElement('button');
   remove.className = 'remove';
   remove.style.color = '#FFAB00';
   remove.innerHTML = 'remove';
   remove.onclick = () => removeNote(note.id);

   noteText.innerHTML = note.text;
   date.innerHTML = new Date(note.id).toDateString();

   noteSegment.append(date);
   noteSegment.append(remove);
   noteModule.append(noteText);
   noteModule.append(noteSegment);

   return noteModule;
};

• Each note is displayed as a div containing:
  • The note text (note.text).
  • The note's creation date (converted from the note's id, which is a timestamp).
  • A "remove" button that deletes the note when clicked.

Rendering the Notes

The renderNotes function loops through the notes object and renders each note on the page:

const renderNotes = () => {
   notebook.innerHTML = ''; // Clear previous notes
   Object.values(notes).reverse().forEach(note => {
      let formattedNote = formatNote(note);
      notebook.append(formattedNote); // Add each formatted note to the notebook
   });
};

• We reverse the order of the notes so that the newest notes appear at the top.
• Each note is formatted and appended to the notebook.

Adding and Removing Notes

Next, we’ll create functions to handle adding and removing notes. The addNote function allows the user to submit a new note, while removeNote deletes a note from both the UI and local storage.

Adding a Note

When the user submits a new note through the form, we add it to the notes object, store it in local storage, and render it on the page:

const addNote = text => {
   const note = {
     text: text,
     id: Date.now(),
   };
   notes[note.id] = note;
   localStorage.setItem('notes', JSON.stringify(notes)); // Save to local storage
   let formattedNote = formatNote(note);
   notebook.prepend(formattedNote); // Add the new note to the top
};

• Each note is assigned a unique id based on the current timestamp (Date.now()).
• The note is stored in local storage and immediately rendered in the notebook.

Removing a Note

The removeNote function deletes the selected note and updates both the UI and local storage:

const removeNote = id => {
   delete notes[id]; // Remove the note from the notes object
   localStorage.setItem('notes', JSON.stringify(notes)); // Update local storage
   renderNotes(); // Re-render the remaining notes
};

• The note is deleted from the notes object using its id, and the updated notes list is saved to local storage.
• After removing the note, we call renderNotes() to refresh the display.

Conclusion

And there you have it! We’ve built a simple yet effective note-taking app using JavaScript and local storage. The app allows users to create and remove notes, with all data persisting between browser sessions.

Happy Hacking!