complete sorting of exercises

Completed sorting of exercises Also made an extra fix to exercise, so a blank category is not allowed to select

frontend/www/scripts/exercises.js

@@ -5,19 +5,22 @@ async function fetchExerciseTypes(request) {
         let data = await response.json();
 
         let exercises = data.results;
+        document.getElementById('div-content').innerHTML = "";
         let container = document.getElementById('div-content');
         let exerciseTemplate = document.querySelector("#template-exercise");
         exercises.forEach(exercise => {
-            const exerciseAnchor = exerciseTemplate.content.firstElementChild.cloneNode(true);
-            exerciseAnchor.href = `exercise.html?id=${exercise.id}`;
+            if (getSelected().includes(exercise.category)) {
+                const exerciseAnchor = exerciseTemplate.content.firstElementChild.cloneNode(true);
+                exerciseAnchor.href = `exercise.html?id=${exercise.id}`;
 
-            const h5 = exerciseAnchor.querySelector("h5");
-            h5.textContent = exercise.name;
+                const h5 = exerciseAnchor.querySelector("h5");
+                h5.textContent = exercise.name;
 
-            const p = exerciseAnchor.querySelector("p");
-            p.textContent = exercise.description;   
+                const p = exerciseAnchor.querySelector("p");
+                p.textContent = exercise.description;   
 
-            container.appendChild(exerciseAnchor);
+                container.appendChild(exerciseAnchor);
+            }
         });
     }
 
@@ -28,15 +31,29 @@ function createExercise() {
     window.location.replace("exercise.html");
 }
 
+function getSelected() {
+    const checkboxes = document.querySelectorAll('input[name="sort"]:checked');
+    let selected = [];
+    checkboxes.forEach((checkbox) => {
+        selected.push(checkbox.value);
+    });
+    return selected
+}
+
+
 window.addEventListener("DOMContentLoaded", async () => {
     let createButton = document.querySelector("#btn-create-exercise");
     createButton.addEventListener("click", createExercise);
 
+    document.querySelectorAll('input[name="sort"]').forEach(item => {
+        item.addEventListener('change', fetchExerciseTypes);
+    });
+
     let response = await fetchExerciseTypes();
-    
+
     if (!response.ok) {
         let data = await response.json();
         let alert = createAlert("Could not retrieve exercise types!", data);
         document.body.prepend(alert);
     }
-});
+});
\ No newline at end of file