moanos/RattenheimRechner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Use other input for number of floors

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/assets/css/style.css
View File

@ -36,4 +36,28 @@
background: url('/src/assetssets/img/logo_transparent.png');
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;
}

40
src/index.html
View File

@ -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>