RattenheimRechner/src/index.html

206 lines
6.9 KiB
HTML
Raw Normal View History

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">
2024-07-21 09:36:05 +00:00
<title>Käfigrechner</title>
2024-07-18 17:51:24 +00:00
<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">
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:47:41 +00:00
<input type="checkbox" id="SavicSuiteRoyaleXL"/>
2024-07-18 22:50:23 +00:00
<div>
<img src="assets/img/savic-xl.jpeg">
</div>
</div>
2024-07-20 06:47:41 +00:00
<label for="SavicSuiteRoyaleXL"> 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:47:41 +00:00
<input type="checkbox" id="SavicSuiteRoyale95Double"/>
2024-07-18 22:50:23 +00:00
<div>
<img src="assets/img/savic-95-double.jpg">
</div>
</div>
2024-07-20 06:47:41 +00:00
<label for="SavicSuiteRoyale95Double">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:47:41 +00:00
<input type="checkbox" id="TiakiKleintierkäfigEtagere"/>
2024-07-18 22:50:23 +00:00
<div>
<img src="assets/img/tiaki.jpeg">
</div>
</div>
2024-07-20 06:47:41 +00:00
<label for="TiakiKleintierkä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">
</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");
2024-07-20 06:47:41 +00:00
const selectSavicSuiteRoyaleXL = document.getElementById("SavicSuiteRoyaleXL");
const selectSavicSuiteRoyale95Double = document.getElementById("SavicSuiteRoyale95Double");
const selectTiakiKleintierkäfigEtagere = document.getElementById("TiakiKleintierkäfigEtagere");
2024-07-20 06:20:43 +00:00
2024-07-20 06:47:41 +00:00
function updateCage(event) {
console.log("dada");
selectSavicSuiteRoyaleXL.checked = false;
selectSavicSuiteRoyale95Double.checked = false;
2024-07-20 06:20:43 +00:00
selectTiakiKleintierkäfigEtagere.checked = false;
2024-07-20 06:47:41 +00:00
const selectedCage = event.currentTarget
2024-07-20 06:20:43 +00:00
selectedCage.checked = true;
const cageName = selectedCage.id;
2024-07-20 06:47:41 +00:00
console.log(cageName);
var dim = getCageDimensions(cageName);
2024-07-20 06:20:43 +00:00
inputWidth.value = dim.width;
inputDepth.value = dim.depth;
inputHeight.value = dim.height;
2024-07-20 06:47:41 +00:00
update();
2024-07-20 06:20:43 +00:00
}
2024-07-20 06:47:41 +00:00
selectSavicSuiteRoyaleXL.onchange = updateCage;
selectSavicSuiteRoyale95Double.onchange = updateCage;
selectTiakiKleintierkäfigEtagere.onchange = updateCage;
2024-07-20 06:20:43 +00:00
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) {
2024-07-20 06:47:41 +00:00
console.log(cageName);
2024-07-20 06:20:43 +00:00
if (cageName == "SavicSuiteRoyaleXL") {
2024-07-20 06:47:41 +00:00
return new Dimensions(115, 67.5, 153);
2024-07-20 06:20:43 +00:00
}
if (cageName == "SavicSuiteRoyale95Double") {
2024-07-20 06:47:41 +00:00
return new Dimensions(95, 63, 120);
2024-07-20 06:20:43 +00:00
}
if (cageName == "TiakiKleintierkäfigEtagere") {
2024-07-20 06:47:41 +00:00
return new Dimensions(93.5, 63, 141.2);
2024-07-20 06:20:43 +00:00
}
}
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:47:41 +00:00
const width = inputWidth.value
const depth = inputDepth.value
const height = inputHeight.value
const dimensions = new Dimensions(width/100, depth/100, height/100);
const failed_checks = cageCheck(dimensions, ratSlider.value, fullFloorNum.value);
console.log(failed_checks);
let resultsDiv = document.getElementById("resultsDiv");
2024-07-19 21:46:37 +00:00
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-19 21:46:37 +00:00
resultsDiv.appendChild(result);
}
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-19 21:46:37 +00:00
update();
}
2024-07-19 21:46:37 +00:00
function increaseFloorNum() {
var input = document.getElementById('numFullFloors');
var value = parseInt(input.value);
input.value = value + 1;
update();
2024-07-19 21:46:37 +00:00
}
update();
</script>
2024-07-18 17:51:24 +00:00
</body>
</html>