script.js

document.addEventListener("DOMContentLoaded", () => {
  const notesContainer = document.getElementById("notesContainer");
  const noteForm = document.getElementById("noteForm");
  const noteTitle = document.getElementById("noteTitle");
  const noteBody = document.getElementById("noteBody");

  let notes = [...notesData];

  // Realtime validation
  noteTitle.addEventListener("input", validateForm);
  noteBody.addEventListener("input", validateForm);

  function validateForm() {
    noteForm.querySelector("button").disabled = !(
      noteTitle.value.trim() && noteBody.value.trim()
    );
  }

  // Function to render notes
  function renderNotes() {
    notesContainer.innerHTML = "";
    if (notes.length === 0) {
      notesContainer.innerHTML = `<p style="text-align: center; color: gray;">No notes available. Add one now!</p>`;
      return;
    }

    notes.forEach((note) => {
      const noteElement = document.createElement("note-item");
      noteElement.setAttribute("data-id", note.id);
      noteElement.setAttribute("title", note.title);
      noteElement.setAttribute("body", note.body);
      noteElement.setAttribute("created-at", note.createdAt);

      noteElement.addEventListener("edit", () => editNote(note.id));
      noteElement.addEventListener("delete", () => deleteNote(note.id));

      notesContainer.prepend(noteElement);
    });
  }

  // Function to add new note
  noteForm.addEventListener("submit", (e) => {
    e.preventDefault();
    const title = noteTitle.value.trim();
    const body = noteBody.value.trim();

    if (!title || !body) {
      alert("Fill your form!");
      return;
    }

    const newNote = {
      id: `notes-${Math.random().toString(36).substr(2, 16)}`,
      title,
      body,
      createdAt: new Date().toISOString(),
      archived: false,
    };

    notes.unshift(newNote);
    renderNotes();
    noteForm.reset();
    validateForm();
  });

  // Function to deleting note
  function deleteNote(id) {
    notes = notes.filter((note) => note.id !== id);
    renderNotes();
  }

  // Function to edit note
  function editNote(id) {
    const noteToEdit = notes.find((note) => note.id === id);
    if (!noteToEdit) return;

    const newTitle = prompt("Edit title:", noteToEdit.title);
    const newBody = prompt("Edit body:", noteToEdit.body);

    if (newTitle && newBody) {
      noteToEdit.title = newTitle;
      noteToEdit.body = newBody;
      renderNotes();
    } else {
      alert("Both title and body are required!");
    }
  }

  // for initial render
  renderNotes();
});