Sticky Notes
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
margin: 20px;
}
.container {
width: 80%;
max-width: 600px;
}
.note {
background-color: yellow;
padding: 10px;
margin: 10px 0;
border-radius: 5px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
position: relative;
}
.delete-btn {
position: absolute;
top: 5px;
right: 10px;
cursor: pointer;
color: red;
font-weight: bold;
}
textarea {
width: 100%;
border: none;
background: transparent;
resize: none;
}
Sticky Notes
function loadNotes() {
const notesContainer = document.getElementById("notes");
notesContainer.innerHTML = "";
const notes = JSON.parse(localStorage.getItem("stickyNotes")) || [];
notes.forEach((note, index) => {
const noteElement = document.createElement("div");
noteElement.classList.add("note");
noteElement.innerHTML = `
×
${note}
`;
notesContainer.appendChild(noteElement);
});
}
function addNote() {
const notes = JSON.parse(localStorage.getItem("stickyNotes")) || [];
notes.push("");
localStorage.setItem("stickyNotes", JSON.stringify(notes));
loadNotes();
}
function updateNote(index, value) {
const notes = JSON.parse(localStorage.getItem("stickyNotes")) || [];
notes[index] = value;
localStorage.setItem("stickyNotes", JSON.stringify(notes));
}
function deleteNote(index) {
const notes = JSON.parse(localStorage.getItem("stickyNotes")) || [];
notes.splice(index, 1);
localStorage.setItem("stickyNotes", JSON.stringify(notes));
loadNotes();
}
document.addEventListener("DOMContentLoaded", loadNotes);
