RattenheimRechner/src/index.html

90 lines
2.6 KiB
HTML
Raw Normal View History

2024-07-18 17:51:24 +00:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Knastrechner</title>
<link rel="stylesheet" href="assets/css/style.css">
<script src="assets/calculator.js"></script>
</head>
<body>
2024-07-18 21:43:57 +00:00
<h1>Käfigrechner</h1>
<div class="content">
<div class="container-form">
<div class="input-element">
<div class="slidecontainer">
<label for="numRats" id="labelNumRats">Anzahl an Ratten ?</label>
<input type="range" min="1" max="20" value="4" class="slider" id="numRats">
</div>
<div class="input-element">
<label for="numFullFloors">Vollebenen</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>
</div>
<div class="container" id="resultsDiv">
</div>
</div>
</div>
2024-07-18 17:51:24 +00:00
</div>
<script>
2024-07-18 21:43:57 +00:00
var labelNumRats = document.getElementById("labelNumRats");
2024-07-18 17:51:24 +00:00
var ratSlider = document.getElementById("numRats");
2024-07-18 21:43:57 +00:00
labelNumRats.innerHTML = `Anzahl an Ratten: ` + ratSlider.value;
2024-07-18 17:51:24 +00:00
ratSlider.oninput = function () {
2024-07-18 21:43:57 +00:00
labelNumRats.innerHTML = `Anzahl an Ratten: ` + this.value;
2024-07-18 17:51:24 +00:00
update();
}
// Full floor functions
var fullFloorNum = document.getElementById("numFullFloors");
2024-07-18 17:51:24 +00:00
var savicSuiteRoyaleDim = new Dimensions(1, 0.5, 1);
function update() {
var failed_checks = cageCheck(savicSuiteRoyaleDim, ratSlider.value, fullFloorNum.value);
2024-07-18 17:51:24 +00:00
var resultsDiv = document.getElementById("resultsDiv");
2024-07-18 21:43:57 +00:00
resultsDiv.innerHTML = `<strong>Ergebnis</strong>`;
2024-07-18 17:51:24 +00:00
const ul = document.createElement('ul');
for (const key in failed_checks) {
const li = document.createElement('li');
li.textContent = failed_checks[key];
ul.appendChild(li);
}
resultsDiv.appendChild(ul);
}
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();
}
2024-07-18 21:37:32 +00:00
update();
2024-07-18 17:51:24 +00:00
</script>
</body>
</html>