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();
+ }