feat: Use other input for number of floors

src/assets/css/style.css

@@ -37,3 +37,27 @@
     background-size: 100% 100%;
     cursor: pointer;
 }
+
+
+
+.input-group {
+    display: flex;
+    align-items: center;
+}
+
+.input-group button {
+    padding: 10px;
+    border: none;
+    background-color: #007BFF;
+    color: white;
+    cursor: pointer;
+    font-size: 16px;
+}
+
+.input-group input {
+    width: 50px;
+    text-align: center;
+    font-size: 16px;
+    border: 1px solid #ccc;
+    height: 36px;
+}

src/index.html

@@ -16,10 +16,15 @@
     </label>
 
 
-    <input type="range" min="1" max="4" value="2" class="slider" id="numFullFloors">
-    <label for="numFullFloors">Vollebenen
-        <div id="outputNumFullFloors"></div>
-    </label>
+
+    <div class="ncontainer">
+        <div class="input-group">
+            <button onclick="decreaseFloorNum()">-</button>
+            <input type="text" id="numFullFloors" value="3" readonly>
+            <button onclick="increaseFloorNum()">+</button>
+        </div>
+    </div>
+    <label for="numFullFloors">Vollebenen</label>
     <div class="container" id="resultsDiv">
     </div>
 </div>
@@ -38,21 +43,15 @@
     }
 
     // Full floor functions
-    var fullFloorSlider = document.getElementById("numFullFloors");
-    var outputNumFullFloors = document.getElementById("outputNumFullFloors");
-    outputNumFullFloors.innerHTML = fullFloorSlider.value;
+    var fullFloorNum = document.getElementById("numFullFloors");
 
-    fullFloorSlider.oninput = function () {
-        outputNumFullFloors.innerHTML = this.value;
-        update();
-    }
 
     var savicSuiteRoyaleDim = new Dimensions(1, 0.5, 1);
 
     function update() {
-        var failed_checks = cageCheck(savicSuiteRoyaleDim, ratSlider.value, fullFloorSlider.value);
+        var failed_checks = cageCheck(savicSuiteRoyaleDim, ratSlider.value, fullFloorNum.value);
         var resultsDiv = document.getElementById("resultsDiv");
-        resultsDiv.innerHTML = `<strong>Werte</strong>: ${savicSuiteRoyaleDim.toString()} n(rats): ${ratSlider.value}, n(floors): ${fullFloorSlider.value}`;
+        resultsDiv.innerHTML = `<strong>Werte</strong>: ${savicSuiteRoyaleDim.toString()} n(rats): ${ratSlider.value}, n(floors): ${fullFloorNum.value}`;
 
         const ul = document.createElement('ul');
         for (const key in failed_checks) {
@@ -66,6 +65,21 @@
     }
 
 
+    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();
+    }
 </script>
 
 </body>