diff --git a/src/assets/css/style.css b/src/assets/css/style.css index 8bf09ff..8f5c00b 100644 --- a/src/assets/css/style.css +++ b/src/assets/css/style.css @@ -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; } \ No newline at end of file diff --git a/src/index.html b/src/index.html index 6f0dc5b..5332def 100644 --- a/src/index.html +++ b/src/index.html @@ -16,10 +16,15 @@ - - + +
+
+ + + +
+
+
@@ -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 = `Werte: ${savicSuiteRoyaleDim.toString()} n(rats): ${ratSlider.value}, n(floors): ${fullFloorSlider.value}`; + resultsDiv.innerHTML = `Werte: ${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(); + }