feat: Make active cage

src/assets/css/style.css

@@ -138,6 +138,10 @@ label {
     box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
 }
 
+.card-active {
+    border: 3px solid var(--highlight-two);
+}
+
 .info-container {
     padding: 2px 16px;
 }

src/index.html

@@ -50,7 +50,7 @@
                 </label>
             </div>
 
-            <div class="card">
+            <div class="card" id="card-ManualMeasurements">
                 <label for="form-cage-measurements">Käfigmaße</label>
                 <form id="form-cage-measurements" class="form-measurements">
                     <div class="input-measurement">
@@ -93,19 +93,35 @@
 <script>
 
     const inputWidth = document.getElementById("width");
-    inputWidth.onchange = update;
+    inputWidth.onchange = updateViaManualMeasurements;
     const inputDepth = document.getElementById("depth");
-    inputDepth.onchange = update;
+    inputDepth.onchange = updateViaManualMeasurements;
     const inputHeight = document.getElementById("height");
-    inputHeight.onchange = update;
+    inputHeight.onchange = updateViaManualMeasurements;
 
 
     const selectSavicSuiteRoyaleXL = document.getElementById("SavicSuiteRoyaleXL");
     const selectSavicSuiteRoyale95Double = document.getElementById("SavicSuiteRoyale95Double");
     const selectTiakiKleintierkäfigEtagere = document.getElementById("TiakiKleintierkäfigEtagere");
 
+    const cardSavicSuiteRoyaleXL = document.getElementById("card-SavicSuiteRoyaleXL");
+    const cardSavicSuiteRoyale95Double = document.getElementById("card-SavicSuiteRoyale95Double");
+    const cardTiakiKleintierkäfigEtagere = document.getElementById("card-TiakiKleintierkäfigEtagere");
+
+
+    function markActiveCage(cageName) {
+
+        cardSavicSuiteRoyaleXL.classList.remove("card-active");
+        cardSavicSuiteRoyale95Double.classList.remove("card-active");
+        cardTiakiKleintierkäfigEtagere.classList.remove("card-active");
+        if (cageName != "") {
+            const activeCage = document.getElementById("card-" + cageName);
+            activeCage.classList.add("card-active")
+        }
+
+    }
+
     function updateCage(event) {
-        console.log("dada");
         selectSavicSuiteRoyaleXL.checked = false;
         selectSavicSuiteRoyale95Double.checked = false;
         selectTiakiKleintierkäfigEtagere.checked = false;
@@ -119,6 +135,8 @@
         inputDepth.value = dim.depth;
         inputHeight.value = dim.height;
 
+        markActiveCage(cageName);
+
         update();
     }
 
@@ -172,6 +190,10 @@
 
     }
 
+    function updateViaManualMeasurements () {
+        markActiveCage("ManualMeasurements");
+        update();
+    }
     function update() {
         const width = inputWidth.value
         const depth = inputDepth.value