How to Build a Sticky Notes App with Local Storage

Hello there, aspiring coder! 🎉 Are you ready to build something fun and functional? Today, we’ll guide you through building a simple sticky notes app using HTML, CSS, and JavaScript, with data stored in your browser’s local storage. Don’t worry if you’re a beginner — we’ll tackle each step together!

By the end of this tutorial, you’ll have a mini-tool to jot down quick thoughts or reminders right in your browser, and the best part? They’ll stick around, even if you refresh the page. Let’s dive in!

Getting Started

Before we begin coding, ensure you have a code editor installed (like Visual Studio Code) and you’re familiar with opening an HTML file in your browser.

Project Setup

First, let’s set up our project folder. Create a folder named sticky-notes-app and inside it, create three files: index.html, style.css, and app.js.

1. Crafting the HTML Structure

Let’s start with the index.html file. This is the foundation where we’ll build our sticky notes app interface.

html



    
    
    
    


    

        
Sticky Notes

        Add Note
        

    

    

This simple setup includes a title, a button to add new notes, and a container for existing notes. Easy-peasy!

2. Designing the Interface with CSS

Let’s add some style to make our app visually appealing. Open style.css and input the following styles:

css
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    color: #333;
    text-align: center;
    padding: 20px;
}

#app {
    max-width: 600px;
    margin: 0 auto;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

#notes-container {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.note {
    background-color: #ffeb3b;
    padding: 20px;
    border-radius: 8px;
    position: relative;
}

We’ve given our app a simple, bright look. The grid layout for notes ensures they adjust nicely no matter the screen size.

3. Bringing It All Together with JavaScript

Now for the exciting part — making the app interactive! Here’s where we’ll use JavaScript to add, store, and display notes.

Open app.js and add this code:

javascript
document.getElementById('add-note').addEventListener('click', addNote);

function getNotes() {
    return JSON.parse(localStorage.getItem('notes') || '[]');
}

function saveNotes(notes) {
    localStorage.setItem('notes', JSON.stringify(notes));
}

function addNote() {
    const notes = getNotes();
    const noteText = prompt('Enter your note text:');
    if (noteText) {
        const note = { id: Date.now(), text: noteText };
        notes.push(note);
        saveNotes(notes);
        displayNotes();
    }
}

function deleteNote(id) {
    const notes = getNotes();
    const filteredNotes = notes.filter(note => note.id !== id);
    saveNotes(filteredNotes);
    displayNotes();
}

function displayNotes() {
    const notesContainer = document.getElementById('notes-container');
    notesContainer.innerHTML = '';
    const notes = getNotes();
    notes.forEach(note => {
        const noteDiv = document.createElement('div');
        noteDiv.className = 'note';
        noteDiv.innerHTML = `
            
${note.text}

            Delete
        `;
        notesContainer.appendChild(noteDiv);
    });
}

// Initial render
displayNotes();

How It Works:

– Adding a Note: We handle the click event on the “Add Note” button, get the note text from the user, and store it in local storage alongside a unique ID.
– Displaying Notes: The displayNotes() function pulls all notes from storage and displays them.
– Deleting Notes: Each note comes with a delete button. Click it, and the note vanishes!

4. Testing Your App

Save all your files, open index.html in your browser, and give your app a test run! Add, view, and delete notes, ensuring changes persist even when you refresh the page.

Conclusion & Practice Ideas

Congratulations! 🎉 You’ve built a sticky notes app from scratch. You’ve learned how to utilize HTML, CSS, JavaScript, and local storage to create a dynamic and practical web application.

Optional Practice Ideas:

– Styling Enhancements: Try adding more styles! Customize fonts, colors, or even add CSS animations for note appearance.
– Editing Notes: Implement a feature allowing you to edit existing notes.
– Reorder Notes: Experiment with drag-and-drop functionality to reorder your notes.

Feel free to play around with the code and add your own flair. Remember, the best way to learn coding is by doing and experimenting. Happy coding! If you have any questions or hit a snag, leave a comment on the blog post — I’m here to help!