src/assets/calculator.js

@@ -19,19 +19,19 @@ const FAIL_CRITERIA = {
 };
 
 class Dimensions {
-    constructor(width, depth, height) {
+    constructor(length, width, height) {
+        this.length = length;
         this.width = width;
-        this.depth = depth;
         this.height = height;
     }
 
     toString() {
-        return `${this.width}x${this.depth}x${this.height}`;
+        return `${this.length}x${this.width}x${this.height}`;
     }
 
     static fromDict(data) {
-        const { width, depth,  height } = data;
+        const { length, width, height } = data;
-        return new Dimensions(width, depth, height);
+        return new Dimensions(length, width, height);
     }
 }
 

src/assets/css/style.css

@@ -152,15 +152,6 @@ label {
     cursor: pointer;
 }
 
-.card-photo label {
-    color: var(--text-one);
-    padding: 10px;
-}
-
-.measurement {
-    width: 100px;
-}
-
 .cage-selector {
     display: flex;
     flex-wrap: wrap;

src/index.html

@@ -46,9 +46,8 @@
 
             <div class="card">
                 <div class="card-photo">
-
+                    <input type="checkbox" id="tiaki"/>
-                    <label for="form-cage-measurements">Käfigmaße</label>
+                    <form class="form-measurements">
-                    <form id="form-cage-measurements" class="form-measurements">
                         <div class="input-measurement">
                             <label for="width">Breite</label>
                             <input class="measurement" type="number" id="width">
@@ -63,6 +62,7 @@
                         </div>
                     </form>
                 </div>
+                <label>Käfigmaße</label>
             </div>
 
         </div>
@@ -86,73 +86,73 @@
         <div class="container output-element" id="resultsDiv">
         </div>
     </div>
-</div>
-<script>
 
-    var labelNumRats = document.getElementById("labelNumRats");
+    <script>
 
-    var ratSlider = document.getElementById("numRats");
+        var labelNumRats = document.getElementById("labelNumRats");
 
-    labelNumRats.innerHTML = `Anzahl an Ratten: ` + ratSlider.value;
+        var ratSlider = document.getElementById("numRats");
 
-    ratSlider.oninput = function () {
+        labelNumRats.innerHTML = `Anzahl an Ratten: ` + ratSlider.value;
-        labelNumRats.innerHTML = `Anzahl an Ratten: ` + this.value;
-        update();
-    }
 
-    // Full floor functions
+        ratSlider.oninput = function () {
-    var fullFloorNum = document.getElementById("numFullFloors");
+            labelNumRats.innerHTML = `Anzahl an Ratten: ` + this.value;
+            update();
+        }
+
+        // Full floor functions
+        var fullFloorNum = document.getElementById("numFullFloors");
 
 
-    var savicSuiteRoyaleDim = new Dimensions(1, 0.5, 1);
+        var savicSuiteRoyaleDim = new Dimensions(1, 0.5, 1);
 
-    function getResultFromChecks(checks) {
+        function getResultFromChecks(checks) {
-        console.log(checks.length)
+            console.log(checks.length)
-        if (Object.keys(checks).length > 0) {
+            if (Object.keys(checks).length > 0) {
-            const ul = document.createElement('ul');
+                const ul = document.createElement('ul');
-            for (const key in checks) {
+                for (const key in checks) {
-                const li = document.createElement('li');
+                    const li = document.createElement('li');
-                li.textContent = `❌` + checks[key];
+                    li.textContent = `❌` + checks[key];
-                ul.appendChild(li);
+                    ul.appendChild(li);
+                }
+                return ul;
+            } else {
+                const p = document.createElement('p');
+                p.innerHTML = "✅ Der Käfig erfüllt alle Kriterien!"
+                return p;
             }
-            return ul;
+
-        } else {
-            const p = document.createElement('p');
-            p.innerHTML = "✅ Der Käfig erfüllt alle Kriterien!"
-            return p;
         }
 
-    }
+        function update() {
+            var failed_checks = cageCheck(savicSuiteRoyaleDim, ratSlider.value, fullFloorNum.value);
+            var resultsDiv = document.getElementById("resultsDiv");
+            resultsDiv.innerHTML = `<strong>Ergebnis</strong>`;
 
-    function update() {
+            const result = getResultFromChecks(failed_checks);
-        var failed_checks = cageCheck(savicSuiteRoyaleDim, ratSlider.value, fullFloorNum.value);
-        var resultsDiv = document.getElementById("resultsDiv");
-        resultsDiv.innerHTML = `<strong>Ergebnis</strong>`;
 
-        const result = getResultFromChecks(failed_checks);
+            resultsDiv.appendChild(result);
-
-        resultsDiv.appendChild(result);
-    }
-
-
-    function decreaseFloorNum() {
-        var input = document.getElementById('numFullFloors');
-        var value = parseInt(input.value);
-        if (value > 0) {
-            input.value = value - 1;
         }
-        update();
-    }
 
-    function increaseFloorNum() {
-        var input = document.getElementById('numFullFloors');
-        var value = parseInt(input.value);
-        input.value = value + 1;
-        update();
-    }
 
-    update();
+        function decreaseFloorNum() {
-</script>
+            var input = document.getElementById('numFullFloors');
+            var value = parseInt(input.value);
+            if (value > 0) {
+                input.value = value - 1;
+            }
+            update();
+        }
+
+        function increaseFloorNum() {
+            var input = document.getElementById('numFullFloors');
+            var value = parseInt(input.value);
+            input.value = value + 1;
+            update();
+        }
+
+        update();
+    </script>
 
 </body>
 </html>