90 lines
2.8 KiB
JavaScript
90 lines
2.8 KiB
JavaScript
export class NotesTracker {
|
|
constructor(containerId) {
|
|
this.container = document.getElementById(containerId);
|
|
this.STORAGE_KEY = 'hydroflux_notes';
|
|
this.notes = [];
|
|
this.loadState();
|
|
this.render();
|
|
}
|
|
|
|
loadState() {
|
|
const saved = localStorage.getItem(this.STORAGE_KEY);
|
|
if (saved) {
|
|
this.notes = JSON.parse(saved);
|
|
} else {
|
|
this.notes = [
|
|
{ id: 1, text: "Feeling hydrated today. Remember to add those gym sessions!", date: new Date().toISOString() }
|
|
];
|
|
this.saveState();
|
|
}
|
|
}
|
|
|
|
saveState() {
|
|
localStorage.setItem(this.STORAGE_KEY, JSON.stringify(this.notes));
|
|
}
|
|
|
|
addNote(text) {
|
|
if (!text.trim()) return;
|
|
this.notes.unshift({
|
|
id: Date.now(),
|
|
text: text,
|
|
date: new Date().toISOString()
|
|
});
|
|
this.saveState();
|
|
this.render();
|
|
}
|
|
|
|
deleteNote(id) {
|
|
if (confirm("Delete this note?")) {
|
|
this.notes = this.notes.filter(n => n.id !== id);
|
|
this.saveState();
|
|
this.render();
|
|
}
|
|
}
|
|
|
|
render() {
|
|
if (!this.container) return;
|
|
|
|
this.container.innerHTML = `
|
|
<div class="notes-container">
|
|
<h2 class="section-title">NOTES</h2>
|
|
|
|
<div class="note-input-area">
|
|
<textarea id="new-note-text" placeholder="Write a thought..." rows="3" class="glow-input"></textarea>
|
|
<button id="add-note-btn" class="connect-glow-btn full-width">SAVE NOTE</button>
|
|
</div>
|
|
|
|
<div class="notes-grid">
|
|
${this.notes.map(note => `
|
|
<div class="sticky-note">
|
|
<p class="note-content">${note.text}</p>
|
|
<div class="note-footer">
|
|
<span class="note-date">${new Date(note.date).toLocaleDateString()}</span>
|
|
<button class="delete-note-btn" data-id="${note.id}">🗑</button>
|
|
</div>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
this.attachEvents();
|
|
}
|
|
|
|
attachEvents() {
|
|
const btn = this.container.querySelector('#add-note-btn');
|
|
const input = this.container.querySelector('#new-note-text');
|
|
|
|
btn.addEventListener('click', () => {
|
|
this.addNote(input.value);
|
|
input.value = '';
|
|
});
|
|
|
|
this.container.querySelectorAll('.delete-note-btn').forEach(b => {
|
|
b.addEventListener('click', (e) => {
|
|
this.deleteNote(parseInt(e.currentTarget.dataset.id));
|
|
});
|
|
});
|
|
}
|
|
}
|