script.js

const titleInput = document.getElementById("title");
const contentInput = document.getElementById("content");
const addBtn = document.getElementById("addNote");
const notesContainer = document.getElementById("notesContainer");
const searchInput = document.getElementById("search");

let selectedColor = "#fff";
let notes = JSON.parse(localStorage.getItem("notes")) || [];

/* COLOR SELECT */
document.querySelectorAll(".color").forEach(color => {
    color.addEventListener("click", () => {
        selectedColor = color.dataset.color;
    });
});

/* ADD NOTE */
addBtn.addEventListener("click", () => {
    if (!contentInput.value) return;

    const note = {
        id: Date.now(),
        title: titleInput.value,
        content: contentInput.value,
        color: selectedColor,
        pinned: false
    };

    notes.push(note);
    saveAndRender();

    titleInput.value = "";
    contentInput.value = "";
    selectedColor = "#fff";
});

/* DELETE */
function deleteNote(id) {
    notes = notes.filter(note => note.id !== id);
    saveAndRender();
}

/* PIN */
function togglePin(id) {
    notes = notes.map(note =>
        note.id === id ? { ...note, pinned: !note.pinned } : note
    );
    saveAndRender();
}

/* SAVE & RENDER */
function saveAndRender() {
    localStorage.setItem("notes", JSON.stringify(notes));
    renderNotes();
}

/* RENDER NOTES */
function renderNotes(filter = "") {
    notesContainer.innerHTML = "";

    const sortedNotes = [...notes].sort((a, b) => b.pinned - a.pinned);

    sortedNotes
        .filter(note =>
            note.title.toLowerCase().includes(filter) ||
            note.content.toLowerCase().includes(filter)
        )
        .forEach(note => {
            const div = document.createElement("div");
            div.className = "note";
            div.style.background = note.color;

            div.innerHTML = `
        <span class="pin" onclick="togglePin(${note.id})">
          ${note.pinned ? "📌" : "📍"}
        </span>
        <span class="delete" onclick="deleteNote(${note.id})">🗑</span>
        <h4>${note.title}</h4>
        <p>${note.content}</p>
      `;

            notesContainer.appendChild(div);
        });
}

/* SEARCH */
searchInput.addEventListener("input", e => {
    renderNotes(e.target.value.toLowerCase());
});

renderNotes();