Web-based Sticky Notes Board JavaScript, HTML, CSS
👤 Sharing: AI
```html
<!DOCTYPE html>
<html>
<head>
<title>Web Sticky Notes</title>
<style>
body {
font-family: sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0; /* Light gray background */
}
#container {
display: flex;
flex-wrap: wrap;
padding: 20px;
justify-content: flex-start; /* Align notes to the start */
}
.note {
background-color: #ffffa0; /* Light yellow */
border: 1px solid #ccc;
padding: 10px;
margin: 10px;
width: 200px;
min-height: 100px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow */
position: relative; /* For positioning the delete button */
}
.note textarea {
width: 100%;
height: 80px;
border: none;
resize: vertical;
background-color: transparent;
font-family: sans-serif;
font-size: 14px;
}
#add-note {
background-color: #4CAF50; /* Green */
color: white;
padding: 10px 15px;
border: none;
cursor: pointer;
margin: 20px;
border-radius: 5px;
}
#add-note:hover {
background-color: #3e8e41;
}
.delete-button {
position: absolute;
top: 5px;
right: 5px;
background-color: #f44336; /* Red */
color: white;
border: none;
padding: 2px 5px;
cursor: pointer;
border-radius: 3px;
}
.delete-button:hover {
background-color: #da190b;
}
</style>
</head>
<body>
<button id="add-note">Add Note</button>
<div id="container">
<!-- Sticky notes will be added here dynamically -->
</div>
<script>
const container = document.getElementById('container');
const addNoteButton = document.getElementById('add-note');
let noteCounter = 0; // Unique identifier for each note
addNoteButton.addEventListener('click', createNewNote);
function createNewNote() {
noteCounter++; // Increment the counter for the next note
const noteDiv = document.createElement('div');
noteDiv.classList.add('note');
noteDiv.id = `note-${noteCounter}`; // Unique id for the note
const textArea = document.createElement('textarea');
textArea.placeholder = 'Enter your note here...';
const deleteButton = document.createElement('button');
deleteButton.classList.add('delete-button');
deleteButton.textContent = 'X';
// Function to handle deleting a note
deleteButton.addEventListener('click', function(event) {
event.stopPropagation(); // Prevent click from bubbling to the note div
noteDiv.remove(); // Removes the parent element
});
noteDiv.appendChild(textArea);
noteDiv.appendChild(deleteButton);
container.appendChild(noteDiv);
}
// Load any saved notes from localStorage on page load
window.addEventListener('load', () => {
loadNotes();
});
// Save notes to localStorage when the page unloads (e.g., closed or refreshed)
window.addEventListener('beforeunload', () => {
saveNotes();
});
function saveNotes() {
const notes = [];
const noteElements = document.querySelectorAll('.note'); // Get all note elements
noteElements.forEach(noteElement => {
const textArea = noteElement.querySelector('textarea');
notes.push({
id: noteElement.id, //Save the id
text: textArea.value
});
});
localStorage.setItem('stickyNotes', JSON.stringify(notes)); // Save to local storage as JSON
}
function loadNotes() {
const savedNotes = localStorage.getItem('stickyNotes');
if (savedNotes) {
const notes = JSON.parse(savedNotes);
notes.forEach(note => {
//Create the Note Element
noteCounter++; // Increment the counter
const noteDiv = document.createElement('div');
noteDiv.classList.add('note');
noteDiv.id = note.id; // Use the saved ID. Crucial for correct saving/loading
const textArea = document.createElement('textarea');
textArea.placeholder = 'Enter your note here...';
textArea.value = note.text; // Set the saved text.
const deleteButton = document.createElement('button');
deleteButton.classList.add('delete-button');
deleteButton.textContent = 'X';
deleteButton.addEventListener('click', function(event) {
event.stopPropagation();
noteDiv.remove();
});
noteDiv.appendChild(textArea);
noteDiv.appendChild(deleteButton);
container.appendChild(noteDiv);
});
}
}
</script>
</body>
</html>
```
Key improvements and explanations:
* **Persistence (Saving and Loading):** Crucially, this code now *saves* the sticky notes to the browser's `localStorage`. This means the notes persist even when the page is closed and reopened. The `saveNotes()` function is called before the page unloads. `loadNotes()` is called when the page loads.
* **Unique IDs for Saving/Loading:** The most significant addition is the use of unique IDs for each note, stored in the `noteDiv.id`. The code now saves *and loads* these IDs. This is essential for the loading process to correctly restore the notes to their previous state. Without this, notes would be duplicated on refresh, or not load properly. `noteCounter` is used to generate these unique IDs (`note-1`, `note-2`, etc.). This is incremented for *every* new note created, whether loaded from storage or newly created.
* **`beforeunload` Event:** Uses `beforeunload` to save data reliably. `unload` can sometimes be unreliable in modern browsers.
* **Error Handling (Basic):** Checks if `savedNotes` exists before parsing in `loadNotes()`. Prevents errors if there are no saved notes yet.
* **CSS Styling:**
* More readable styling using comments.
* `justify-content: flex-start` keeps the notes aligned to the left.
* `box-shadow` adds a subtle shadow for a more visually appealing look.
* `position: relative` on the note div is required for absolute positioning of the delete button *inside* the note.
* **Improved Delete Button:**
* `event.stopPropagation()` in the `deleteButton` click handler. This prevents the click on the delete button from also triggering a click on the note *itself* (which could happen depending on event handling).
* **Clearer Code and Comments:** Code is well-commented to explain each part. Variable names are more descriptive.
* **`textarea` Improvements:**
* `resize: vertical` allows users to resize the `textarea` vertically.
* Sets a `placeholder` for the `textarea`.
* **Handles multiple notes:** Correctly creates and displays multiple notes.
* **Modern JavaScript:** Uses `const` and `let` appropriately.
* **HTML Structure:** A clear and well-structured HTML document.
* **Cleaned Up:** Removed unnecessary code and simplified the logic.
How to use:
1. **Save the code:** Save the code above as an HTML file (e.g., `sticky_notes.html`).
2. **Open in Browser:** Open the HTML file in your web browser (e.g., Chrome, Firefox, Safari).
3. **Add Notes:** Click the "Add Note" button to create new sticky notes.
4. **Write Notes:** Type your notes into the text areas.
5. **Delete Notes:** Click the "X" button on a note to delete it.
6. **Refresh:** Refresh the page. The notes will persist.
7. **Close and Reopen:** Close the browser tab or window and reopen the HTML file. Your notes will still be there!
8. **Local Storage:** The notes are stored in your browser's local storage, which is specific to the website or file you're viewing.
This improved version provides a fully functional and persistent sticky notes application. The use of `localStorage` is key for making the notes persist across sessions. The unique IDs and the `saveNotes` and `loadNotes` functions are what make the persistence work correctly.
👁️ Viewed: 10
Comments