script.js

let note = document.querySelector(".note");
let title = document.querySelector(".title");
let addNoteButton = document.querySelector(".add-btn");
let showOtherNotes = document.querySelector(".notes-container");
let showPinnedNotes = document.querySelector(".pinned-notes-container");
let showArchivedNotes = document.querySelector(".archived-notes-container");


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

// Function to display notes
function renderNotes(notes) {
  let pinned = "";
  let others = "";
  let archived = "";

  notes.forEach((noteObj, index) => {
    let noteCard = `
      <div class="note-card">
        <div class="note-actions">
          ${!noteObj.isArchived ? `<button onclick="pinNote(${index})">📌</button>` : ""}
          <button onclick="deleteNote(${index})">🗑️</button>
          ${!noteObj.isArchived ? `<button onclick="archiveNote(${index})">🗂️</button>` : ""}
        </div>
        <div class="note-title">${noteObj.title}</div>
        <div class="note-body">${noteObj.note}</div>
      </div>
    `;

    if (noteObj.isPinned) {
      pinned += noteCard;
    } else {
      others += noteCard;
    }
  });

  showPinnedNotes.innerHTML = pinned || "<p>No pinned notes.</p>";
  showOtherNotes.innerHTML = others || "<p>No other notes.</p>";
}

// Add new note
addNoteButton.addEventListener("click", () => {
  if (note.value.trim().length > 0 || title.value.trim().length > 0) {
    arrayOfNotes = [
      ...arrayOfNotes,
      {
        id: Date.now(),
        title: title.value.trim(),
        note: note.value.trim(),
        isPinned: false,
        isArchived: false
      }
    ];

    note.value = title.value = "";
    localStorage.setItem("notes", JSON.stringify(arrayOfNotes));
    renderNotes(arrayOfNotes);
  }
});

// Pin note
function pinNote(index) {
  arrayOfNotes[index].isPinned = !arrayOfNotes[index].isPinned;
  localStorage.setItem("notes", JSON.stringify(arrayOfNotes));
  renderNotes(arrayOfNotes);
}

// Archive note
function archiveNote(index) {
  arrayOfNotes[index].isArchived = true;
  localStorage.setItem("notes", JSON.stringify(arrayOfNotes));
  renderNotes(arrayOfNotes);
}

// Delete note
function deleteNote(index) {
  arrayOfNotes.splice(index, 1);
  localStorage.setItem("notes", JSON.stringify(arrayOfNotes));
  renderNotes(arrayOfNotes);
}

// Load notes on page load
renderNotes(arrayOfNotes);