Notes App - Code Explanation

HTML STRUCTURE

<div class="note-input">
    <input type="text" id="noteTitle" placeholder="Note title...">
    <textarea id="noteContent" placeholder="Write your note..."></textarea>
    <button onclick="addNote()">Add Note</button>
</div>

<div class="notes-list" id="notesList"></div>

JAVASCRIPT CODE

let notes = JSON.parse(localStorage.getItem('notes')) || [];

function addNote() {
    const title = document.getElementById('noteTitle').value;
    const content = document.getElementById('noteContent').value;
    
    if (!title || !content) {
        alert('Please fill in all fields');
        return;
    }
    
    const note = {
        id: Date.now(),
        title: title,
        content: content,
        date: new Date().toLocaleDateString()
    };
    
    notes.push(note);
    saveNotes();
    displayNotes();
    document.getElementById('noteTitle').value = '';
    document.getElementById('noteContent').value = '';
}

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

function displayNotes() {
    const notesList = document.getElementById('notesList');
    notesList.innerHTML = '';
    
    notes.forEach(note => {
        const noteCard = document.createElement('div');
        noteCard.className = 'note-card';
        noteCard.innerHTML = `
            <div class="note-title">${note.title}</div>
            <div class="note-content">${note.content}</div>
            <div class="note-date">${note.date}</div>
            <button onclick="deleteNote(${note.id})">Delete</button>
        `;
        notesList.appendChild(noteCard);
    });
}

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

KEY FEATURES

✓ Create New Notes with Title & Content
✓ localStorage Persistence (Data Saved)
✓ Display All Notes in Grid
✓ Delete Individual Notes
✓ Automatic Date Stamping
✓ Input Validation
✓ Clear Input Fields After Adding

LEARNING CONCEPTS

• localStorage API (getItem, setItem, JSON)
• Array Methods (push, filter)
• Object Creation & Manipulation
• Date Object (toLocaleDateString)
• Dynamic DOM Element Creation
• Event Listeners
• JSON Serialization

← Back to Project