Implemented Local storage

index.html

@@ -89,7 +89,12 @@ <h1 class="hero__title">
     <button id="theme-toggle" class="theme-toggle-btn">Toggle Theme</button>
   </div>
 
-  <script src="scripts/app.js"></script>
-  <script src="scripts/theme.js"></script>
+  <!-- Footer -->
+  <div id="footer"></div>
+
+  <!-- Scripts -->
+  <script type="module" src="scripts/data.js"></script>
+  <script type="module" src="scripts/app.js"></script>
+  <script type="module" src="./scripts/theme.js"></script>
 </body>
 </html>

scripts/app.js

@@ -1,4 +1,24 @@
-console.log('App script loaded');
+import { saveUserProgress, loadUserProgress, saveCompletedChallenges, loadCompletedChallenges } from './data.js';
+
+console.log('app script loaded');
+
+// Example: Save and load user progress
+const userProgress = loadUserProgress();
+console.log('Loaded user progress:', userProgress);
+
+const updatedProgress = { ...userProgress, lastVisited: Date.now() };
+if (!saveUserProgress(updatedProgress)) {
+  alert('Failed to save user progress.');
+}
+
+// Example: Save and load completed challenges
+const completed = loadCompletedChallenges();
+console.log('Loaded completed challenges:', completed);
+
+const updatedCompleted = [...completed, 'challenge-1'];
+if (!saveCompletedChallenges(updatedCompleted)) {
+  alert('Failed to save completed challenges.');
+}
 
 // Hamburger menu functionality
 const navToggle = document.getElementById('navToggle');

scripts/data.js

@@ -0,0 +1,54 @@
+// Utility functions for localStorage data management
+
+const STORAGE_KEYS = {
+  progress: 'codeclip_user_progress',
+  challenges: 'codeclip_completed_challenges',
+  settings: 'codeclip_user_settings',
+};
+
+function saveToStorage(key, value) {
+  try {
+    localStorage.setItem(key, JSON.stringify(value));
+    return true;
+  } catch (e) {
+    console.error('Failed to save to localStorage:', e);
+    return false;
+  }
+}
+
+function loadFromStorage(key, defaultValue = null) {
+  try {
+    const data = localStorage.getItem(key);
+    return data ? JSON.parse(data) : defaultValue;
+  } catch (e) {
+    console.error('Failed to load from localStorage:', e);
+    return defaultValue;
+  }
+}
+
+// User Progress
+export function saveUserProgress(progress) {
+  return saveToStorage(STORAGE_KEYS.progress, progress);
+}
+
+export function loadUserProgress() {
+  return loadFromStorage(STORAGE_KEYS.progress, {});
+}
+
+// Completed Challenges
+export function saveCompletedChallenges(challenges) {
+  return saveToStorage(STORAGE_KEYS.challenges, challenges);
+}
+
+export function loadCompletedChallenges() {
+  return loadFromStorage(STORAGE_KEYS.challenges, []);
+}
+
+// User Settings
+export function saveUserSettings(settings) {
+  return saveToStorage(STORAGE_KEYS.settings, settings);
+}
+
+export function loadUserSettings() {
+  return loadFromStorage(STORAGE_KEYS.settings, {});
+} 

scripts/theme.js

@@ -1,29 +1,42 @@
+import { saveUserSettings, loadUserSettings } from './data.js';
+
 document.addEventListener("DOMContentLoaded", () => {
     const toggleBtn = document.getElementById("theme-toggle");
-  
+
     const setTheme = (theme) => {
       document.documentElement.setAttribute("data-theme", theme);
-      localStorage.setItem("theme", theme);
+      const success = saveUserSettings({ ...loadUserSettings(), theme });
+      if (!success) {
+        alert('Failed to save theme preference.');
+      }
     };
-  
+
     // Apply saved theme on load
-    const savedTheme = localStorage.getItem("theme");
+    const savedSettings = loadUserSettings();
+    const savedTheme = savedSettings.theme;
     const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
     const initialTheme = savedTheme || (prefersDark ? "dark" : "light");
     setTheme(initialTheme);
-  
+
     // Toggle button click
     toggleBtn.addEventListener("click", () => {
       const current = document.documentElement.getAttribute("data-theme");
       const newTheme = current === "light" ? "dark" : "light";
       setTheme(newTheme);
     });
-  
+
     // Real-time sync: The theme changed in one tab is linked and synced with the theme change in other tabs.
     window.addEventListener("storage", (event) => {
-      if (event.key === "theme") {
-        document.documentElement.setAttribute("data-theme", event.newValue);
+      if (event.key === "codeclip_user_settings") {
+        try {
+          const newSettings = JSON.parse(event.newValue);
+          if (newSettings && newSettings.theme) {
+            document.documentElement.setAttribute("data-theme", newSettings.theme);
+          }
+        } catch (e) {
+          // Ignore parse errors
+        }
       }
     });
-  });
+});