2024-07-18 17:51:24 +00:00
|
|
|
<!DOCTYPE html>
|
2024-07-18 22:24:38 +00:00
|
|
|
<html lang="en" xmlns="http://www.w3.org/1999/html">
|
2024-07-18 17:51:24 +00:00
|
|
|
<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:22:31 +00:00
|
|
|
|
2024-07-18 21:43:57 +00:00
|
|
|
<h1>Käfigrechner</h1>
|
|
|
|
|
<div class="content">
|
|
|
|
|
<div class="container-form">
|
2024-07-18 22:24:38 +00:00
|
|
|
<div class="cage-selector">
|
2024-07-18 22:50:23 +00:00
|
|
|
<div class="card">
|
|
|
|
|
<div class="card-photo">
|
2024-07-20 06:19:47 +00:00
|
|
|
<input type="checkbox" id="selectSavicSuiteRoyleXL"/>
|
2024-07-18 22:50:23 +00:00
|
|
|
<div>
|
|
|
|
|
<img src="assets/img/savic-xl.jpeg">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-07-20 06:19:47 +00:00
|
|
|
<label for="selectSavicSuiteRoyleXL"> Savic Suite Royale XL</label>
|
2024-07-18 22:50:23 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="card">
|
|
|
|
|
<div class="card-photo">
|
2024-07-20 06:19:47 +00:00
|
|
|
<input type="checkbox" id="selectSavicSuiteRoyle95Double"/>
|
2024-07-18 22:50:23 +00:00
|
|
|
<div>
|
|
|
|
|
<img src="assets/img/savic-95-double.jpg">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-07-20 06:19:47 +00:00
|
|
|
<label for="selectSavicSuiteRoyle95Double">Savic Suite Royale 95 Double</label>
|
2024-07-18 22:50:23 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="card">
|
|
|
|
|
<div class="card-photo">
|
2024-07-20 06:19:47 +00:00
|
|
|
<input type="checkbox" id="selectTiakiKleintierkäfigEtagere"/>
|
2024-07-18 22:50:23 +00:00
|
|
|
<div>
|
|
|
|
|
<img src="assets/img/tiaki.jpeg">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-07-20 06:19:47 +00:00
|
|
|
<label for="selectTiakiKleintierkäfigEtagere">TIAKI Kleintierkäfig Étagère</label>
|
2024-07-18 22:24:38 +00:00
|
|
|
</div>
|
|
|
|
|
|
2024-07-18 22:50:23 +00:00
|
|
|
<div class="card">
|
|
|
|
|
<div class="card-photo">
|
2024-07-19 21:52:56 +00:00
|
|
|
|
|
|
|
|
<label for="form-cage-measurements">Käfigmaße</label>
|
|
|
|
|
<form id="form-cage-measurements" class="form-measurements">
|
2024-07-19 21:44:33 +00:00
|
|
|
<div class="input-measurement">
|
2024-07-20 06:20:10 +00:00
|
|
|
<label for="width">Breite (cm)</label>
|
2024-07-19 21:44:33 +00:00
|
|
|
<input class="measurement" type="number" id="width">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="input-measurement">
|
2024-07-20 06:20:10 +00:00
|
|
|
<label for="depth">Tiefe (cm)</label>
|
2024-07-19 21:44:33 +00:00
|
|
|
<input class="measurement" type="number" id="depth">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="input-measurement">
|
2024-07-20 06:20:10 +00:00
|
|
|
<label for="height">Höhe (cm)</label>
|
2024-07-19 21:44:33 +00:00
|
|
|
<input class="measurement" type="number" id="height">
|
|
|
|
|
</div>
|
2024-07-18 22:50:23 +00:00
|
|
|
</form>
|
|
|
|
|
</div>
|
2024-07-18 22:24:38 +00:00
|
|
|
</div>
|
2024-07-18 22:50:23 +00:00
|
|
|
|
2024-07-18 22:24:38 +00:00
|
|
|
</div>
|
2024-07-18 21:43:57 +00:00
|
|
|
<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>
|
2024-07-18 21:58:42 +00:00
|
|
|
</div>
|
2024-07-18 21:43:57 +00:00
|
|
|
|
2024-07-18 21:58:42 +00:00
|
|
|
<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>
|
2024-07-18 21:43:57 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-07-18 21:58:42 +00:00
|
|
|
</div>
|
|
|
|
|
<div class="container output-element" id="resultsDiv">
|
2024-07-18 21:22:31 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-07-19 21:46:37 +00:00
|
|
|
</div>
|
|
|
|
|
<script>
|
2024-07-18 17:51:24 +00:00
|
|
|
|
2024-07-20 06:20:43 +00:00
|
|
|
const inputWidth = document.getElementById("width");
|
|
|
|
|
const inputDepth = document.getElementById("depth");
|
|
|
|
|
const inputHeight = document.getElementById("height");
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const selectSavicSuiteRoyleXL = document.getElementById("selectSavicSuiteRoyleXL");
|
|
|
|
|
const selectSavicSuiteRoyle95Double = document.getElementById("selectSavicSuiteRoyle95Double");
|
|
|
|
|
const selectTiakiKleintierkäfigEtagere = document.getElementById("selectTiakiKleintierkäfigEtagere");
|
|
|
|
|
|
|
|
|
|
function updateCage(selectedCage) {
|
|
|
|
|
selectSavicSuiteRoyleXL.checked = false;
|
|
|
|
|
selectSavicSuiteRoyle95Double.checked = false;
|
|
|
|
|
selectTiakiKleintierkäfigEtagere.checked = false;
|
|
|
|
|
selectedCage.checked = true;
|
|
|
|
|
const cageName = selectedCage.id;
|
|
|
|
|
const dim = getCageDimensions(cageName);
|
|
|
|
|
inputWidth.value = dim.width;
|
|
|
|
|
inputDepth.value = dim.depth;
|
|
|
|
|
inputHeight.value = dim.height;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
selectSavicSuiteRoyleXL.onselect = updateCage;
|
|
|
|
|
selectSavicSuiteRoyle95Double.onselect = updateCage;
|
|
|
|
|
selectTiakiKleintierkäfigEtagere.onselect = updateCage;
|
|
|
|
|
|
|
|
|
|
|
2024-07-19 21:46:37 +00:00
|
|
|
var labelNumRats = document.getElementById("labelNumRats");
|
2024-07-18 17:51:24 +00:00
|
|
|
|
2024-07-19 21:46:37 +00:00
|
|
|
var ratSlider = document.getElementById("numRats");
|
2024-07-18 17:51:24 +00:00
|
|
|
|
2024-07-19 21:46:37 +00:00
|
|
|
labelNumRats.innerHTML = `Anzahl an Ratten: ` + ratSlider.value;
|
2024-07-18 21:43:57 +00:00
|
|
|
|
2024-07-19 21:46:37 +00:00
|
|
|
ratSlider.oninput = function () {
|
|
|
|
|
labelNumRats.innerHTML = `Anzahl an Ratten: ` + this.value;
|
|
|
|
|
update();
|
|
|
|
|
}
|
2024-07-18 17:51:24 +00:00
|
|
|
|
2024-07-19 21:46:37 +00:00
|
|
|
// Full floor functions
|
|
|
|
|
var fullFloorNum = document.getElementById("numFullFloors");
|
2024-07-18 17:51:24 +00:00
|
|
|
|
2024-07-20 06:20:43 +00:00
|
|
|
function getCageDimensions(cageName) {
|
|
|
|
|
if (cageName == "SavicSuiteRoyaleXL") {
|
|
|
|
|
return new Dimensions(1, 0.5, 1);
|
|
|
|
|
}
|
|
|
|
|
if (cageName == "SavicSuiteRoyale95Double") {
|
|
|
|
|
return new Dimensions(1, 0.5, 1);
|
|
|
|
|
}
|
|
|
|
|
if (cageName == "TiakiKleintierkäfigEtagere") {
|
|
|
|
|
return new Dimensions(1, 0.5, 1);
|
|
|
|
|
}
|
|
|
|
|
}
|
2024-07-19 21:46:37 +00:00
|
|
|
|
|
|
|
|
function getResultFromChecks(checks) {
|
|
|
|
|
console.log(checks.length)
|
|
|
|
|
if (Object.keys(checks).length > 0) {
|
|
|
|
|
const ul = document.createElement('ul');
|
|
|
|
|
for (const key in checks) {
|
|
|
|
|
const li = document.createElement('li');
|
|
|
|
|
li.textContent = `❌` + checks[key];
|
|
|
|
|
ul.appendChild(li);
|
|
|
|
|
}
|
|
|
|
|
return ul;
|
|
|
|
|
} else {
|
|
|
|
|
const p = document.createElement('p');
|
|
|
|
|
p.innerHTML = "✅ Der Käfig erfüllt alle Kriterien!"
|
|
|
|
|
return p;
|
2024-07-18 17:51:24 +00:00
|
|
|
}
|
|
|
|
|
|
2024-07-19 21:46:37 +00:00
|
|
|
}
|
2024-07-18 17:51:24 +00:00
|
|
|
|
2024-07-19 21:46:37 +00:00
|
|
|
function update() {
|
2024-07-20 06:21:25 +00:00
|
|
|
const width = inputWidth.value / 100
|
|
|
|
|
const depth = inputDepth.value / 100
|
|
|
|
|
const height = inputHeight.value / 100
|
|
|
|
|
const dimensions = new Dimensions(width, depth, height)
|
|
|
|
|
var failed_checks = cageCheck(dimensions, ratSlider.value, fullFloorNum.value);
|
2024-07-19 21:46:37 +00:00
|
|
|
var resultsDiv = document.getElementById("resultsDiv");
|
|
|
|
|
resultsDiv.innerHTML = `<strong>Ergebnis</strong>`;
|
2024-07-18 17:51:24 +00:00
|
|
|
|
2024-07-19 21:46:37 +00:00
|
|
|
const result = getResultFromChecks(failed_checks);
|
2024-07-18 21:59:08 +00:00
|
|
|
|
2024-07-19 21:46:37 +00:00
|
|
|
resultsDiv.appendChild(result);
|
|
|
|
|
}
|
2024-07-18 21:59:08 +00:00
|
|
|
|
|
|
|
|
|
2024-07-19 21:46:37 +00:00
|
|
|
function decreaseFloorNum() {
|
|
|
|
|
var input = document.getElementById('numFullFloors');
|
|
|
|
|
var value = parseInt(input.value);
|
|
|
|
|
if (value > 0) {
|
|
|
|
|
input.value = value - 1;
|
2024-07-18 21:22:31 +00:00
|
|
|
}
|
2024-07-19 21:46:37 +00:00
|
|
|
update();
|
|
|
|
|
}
|
2024-07-18 21:22:31 +00:00
|
|
|
|
2024-07-19 21:46:37 +00:00
|
|
|
function increaseFloorNum() {
|
|
|
|
|
var input = document.getElementById('numFullFloors');
|
|
|
|
|
var value = parseInt(input.value);
|
|
|
|
|
input.value = value + 1;
|
2024-07-18 21:22:31 +00:00
|
|
|
update();
|
2024-07-19 21:46:37 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
update();
|
|
|
|
|
</script>
|
2024-07-18 17:51:24 +00:00
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
