Added local storage to persist checkboxes and progress bar state

Code-Institute-Org · Aug 7, 2024 · c61da82 · c61da82
1 parent 0e1a422
commit c61da82
Showing 1 changed file with 36 additions and 9 deletions.
diff --git a/HTML-CSS-Project-1-Implementati0on-Guide-Dynamic.html b/HTML-CSS-Project-1-Implementati0on-Guide-Dynamic.html
@@ -180,32 +180,59 @@ <h5>Pass Grade: Expected Pass Performance (Do's):</h5>
 
 </div>
 
-    <script>
+   <script>
     document.addEventListener('DOMContentLoaded', function () {
         const accordions = document.getElementsByClassName('accordion');
         const checkboxes = document.querySelectorAll('.do-checkbox');
         const progressBar = document.getElementById('progress-bar');
 
-        Array.from(accordions).forEach(accordion => {
-            accordion.addEventListener('click', function () {
-                this.classList.toggle('active');
-                const panel = this.nextElementSibling;
-                panel.style.display = panel.style.display === 'block' ? 'none' : 'block';
-            });
+        // Load checkbox states from localStorage
+        checkboxes.forEach(checkbox => {
+            const savedState = localStorage.getItem(checkbox.id);
+            if (savedState === 'checked') {
+                checkbox.checked = true;
+            }
         });
 
+        // Function to update the progress bar
         function updateProgressBar() {
             const checkedCount = document.querySelectorAll('.do-checkbox:checked').length;
             const totalCheckboxes = checkboxes.length;
             const progress = (checkedCount / totalCheckboxes) * 100;
             progressBar.style.width = progress + '%';
+
+            // Save progress to localStorage
+            localStorage.setItem('progress', progress);
         }
 
+        // Save checkbox state and update progress bar when changed
         checkboxes.forEach(checkbox => {
-            checkbox.addEventListener('change', updateProgressBar);
+            checkbox.addEventListener('change', () => {
+                if (checkbox.checked) {
+                    localStorage.setItem(checkbox.id, 'checked');
+                } else {
+                    localStorage.removeItem(checkbox.id);
+                }
+                updateProgressBar();
+            });
         });
 
-        updateProgressBar();
+        // Load progress bar state from localStorage
+        const savedProgress = localStorage.getItem('progress');
+        if (savedProgress) {
+            progressBar.style.width = savedProgress + '%';
+        } else {
+            updateProgressBar();
+        }
+
+        // Accordion functionality
+        Array.from(accordions).forEach(accordion => {
+            accordion.addEventListener('click', function () {
+                this.classList.toggle('active');
+                const panel = this.nextElementSibling;
+                panel.style.display = panel.style.display === 'block' ? 'none' : 'block';
+            });
+        });
     });
 </script>
 </body>