feat: Use other input for number of floors

This commit is contained in:
moanos [he/him] 2024-07-18 23:22:31 +02:00
parent 7e6d85d8a1
commit df97239ae8
2 changed files with 51 additions and 13 deletions

View File

@ -37,3 +37,27 @@
background-size: 100% 100%; background-size: 100% 100%;
cursor: pointer; 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;
}

View File

@ -16,10 +16,15 @@
</label> </label>
<input type="range" min="1" max="4" value="2" class="slider" id="numFullFloors">
<label for="numFullFloors">Vollebenen <div class="ncontainer">
<div id="outputNumFullFloors"></div> <div class="input-group">
</label> <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 class="container" id="resultsDiv">
</div> </div>
</div> </div>
@ -38,21 +43,15 @@
} }
// Full floor functions // Full floor functions
var fullFloorSlider = document.getElementById("numFullFloors"); var fullFloorNum = document.getElementById("numFullFloors");
var outputNumFullFloors = document.getElementById("outputNumFullFloors");
outputNumFullFloors.innerHTML = fullFloorSlider.value;
fullFloorSlider.oninput = function () {
outputNumFullFloors.innerHTML = this.value;
update();
}
var savicSuiteRoyaleDim = new Dimensions(1, 0.5, 1); var savicSuiteRoyaleDim = new Dimensions(1, 0.5, 1);
function update() { 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"); 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'); const ul = document.createElement('ul');
for (const key in failed_checks) { 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> </script>
</body> </body>