RattenheimRechner/src/index.html

72 lines
2.1 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 18:00:58 +00:00
<h1>Käfigrechner</h1>
2024-07-18 17:51:24 +00:00
<div class="slidecontainer">
<input type="range" min="1" max="20" value="4" class="slider" id="numRats">
<label for="numRats">Anzahl an Ratten
<div id="outputNumRats"></div>
</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="container" id="resultsDiv">
</div>
</div>
<script>
var outputFailedChecks = document.getElementById("failedChecks");
var ratSlider = document.getElementById("numRats");
var outputNumRats = document.getElementById("outputNumRats");
outputNumRats.innerHTML = ratSlider.value;
ratSlider.oninput = function () {
outputNumRats.innerHTML = this.value;
update();
}
// Full floor functions
var fullFloorSlider = 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);
function update() {
var failed_checks = cageCheck(savicSuiteRoyaleDim, ratSlider.value, fullFloorSlider.value);
var resultsDiv = document.getElementById("resultsDiv");
resultsDiv.innerHTML = `<strong>Werte</strong>: ${savicSuiteRoyaleDim.toString()} n(rats): ${ratSlider.value}, n(floors): ${fullFloorSlider.value}`;
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);
outputFailedChecks.innerHTML = failed_checks;
}
</script>
</body>
</html>