diff --git a/script.js b/script.js deleted file mode 100644 index 532cd5b..0000000 --- a/script.js +++ /dev/null @@ -1,248 +0,0 @@ -// Define variables in a scope accessible by functions -let notesList, addNoteFab, noteDialog, noteForm, noteIdInput, noteTitleInput, noteContentInput; -let themeToggleBtn, body; -let notes = []; -let currentEditingId = null; - -async function initializeApp() { - // List of MWC components your app uses directly - const mwcComponents = [ - 'md-icon', 'md-fab', 'md-dialog', 'md-filled-button', 'md-text-button', - 'md-icon-button', 'md-filled-text-field', 'md-outlined-text-field', 'md-elevation' - ]; - - try { - // Wait for all essential MWC components to be defined - await Promise.all(mwcComponents.map(comp => customElements.whenDefined(comp))); - console.log("All MWC components are ready."); - } catch (error) { - console.error("Error waiting for MWC components:", error); - document.body.classList.add('loaded'); // Show body anyway - const errorDiv = document.createElement('div'); - errorDiv.innerHTML = ` -
Error loading application components. The page might not work correctly.
-Please try refreshing. If the problem persists, check your browser console for details.
- `; - errorDiv.style.color = "red"; - errorDiv.style.textAlign = "center"; - errorDiv.style.padding = "20px"; - document.body.prepend(errorDiv); - return; // Stop further initialization if critical components failed - } - - // --- Assign DOM elements AFTER MWC components are ready and upgraded --- - notesList = document.getElementById('notesList'); - addNoteFab = document.getElementById('addNoteFab'); - noteDialog = document.getElementById('noteDialog'); - noteForm = document.getElementById('noteForm'); - noteIdInput = document.getElementById('noteIdInput'); - noteTitleInput = document.getElementById('noteTitleInput'); - noteContentInput = document.getElementById('noteContentInput'); - themeToggleBtn = document.getElementById('themeToggleBtn'); - body = document.body; - - // --- Theming --- - // Ensure applyTheme is called after themeToggleBtn and body are defined. - loadInitialTheme(); // This will call applyTheme - - // --- Event Listeners (Attach now that elements are MWC-upgraded) --- - themeToggleBtn.addEventListener('click', toggleTheme); - addNoteFab.addEventListener('click', () => openNoteDialog()); - noteDialog.addEventListener('closed', handleDialogClose); - - - // --- Initial Data Load --- - loadNotes(); // This calls renderNotes, which creates more MWC elements - - // --- Make body visible now that everything is set up --- - document.body.classList.add('loaded'); - console.log("MNotes App Initialized and Visible."); -} - -// --- Theming Functions --- -function loadInitialTheme() { - const savedTheme = localStorage.getItem('mnotes-theme'); - if (savedTheme) { - applyTheme(savedTheme); - } else { - applyTheme(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); - } -} - -function applyTheme(theme) { // theme is 'light' or 'dark' - if (!body || !themeToggleBtn) { - console.warn("Body or themeToggleBtn not ready for applyTheme."); - return; - } - body.classList.remove('light-theme', 'dark-theme'); - body.classList.add(theme + '-theme'); - localStorage.setItem('mnotes-theme', theme); - - const iconElement = themeToggleBtn.querySelector('md-icon'); - if (iconElement) { - iconElement.textContent = theme === 'dark' ? 'light_mode' : 'dark_mode'; - themeToggleBtn.ariaLabel = theme === 'dark' ? "Activate light theme" : "Activate dark theme"; - } -} - -function toggleTheme() { - const currentTheme = body.classList.contains('dark-theme') ? 'dark' : 'light'; - applyTheme(currentTheme === 'light' ? 'dark' : 'light'); -} - -// --- Data Persistence --- -function loadNotes() { - const storedNotes = localStorage.getItem('material-notes'); - notes = storedNotes ? JSON.parse(storedNotes) : []; - renderNotes(); -} - -function saveNotes() { - localStorage.setItem('material-notes', JSON.stringify(notes)); -} - -// --- Rendering Notes --- -function renderNotes() { - if (!notesList) { - console.error("notesList element not found during renderNotes. App not fully initialized?"); - return; - } - notesList.innerHTML = ''; // Clear existing notes - if (notes.length === 0) { - const p = document.createElement('p'); - p.textContent = "No notes yet. Click the + button to add one!"; - notesList.appendChild(p); - return; - } - - notes.sort((a, b) => new Date(b.lastModified) - new Date(a.lastModified)); - - notes.forEach(note => { - const noteCard = document.createElement('div'); - noteCard.className = 'note-card'; - - const elevation = document.createElement('md-elevation'); - noteCard.appendChild(elevation); - - const title = document.createElement('h3'); - title.textContent = note.title; - - const content = document.createElement('p'); - content.textContent = note.content.substring(0, 150) + (note.content.length > 150 ? '...' : ''); - - const actions = document.createElement('div'); - actions.className = 'note-card-actions'; - - const editButton = document.createElement('md-icon-button'); - editButton.innerHTML = `