moanos/RattenheimRechner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: label

Browse Source
This commit is contained in:
moanos [he/him] 2024-07-18 23:43:57 +02:00
parent 5165ef485f
commit d51fb299e9
1 changed files with 25 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/index.html
View File

@ -7,16 +7,18 @@
<script src="assets/calculator.js"></script> <script src="assets/calculator.js"></script>
</head> </head>
<body> <body>
<h1>Käfigrechner</h1> <h1>Käfigrechner</h1>
<div class="content">
<div class="slidecontainer"> <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"> <input type="range" min="1" max="20" value="4" class="slider" id="numRats">
<label for="numRats">Anzahl an Ratten </div>
<div id="outputNumRats"></div>
</label>
<div class="input-element">
<label for="numFullFloors">Vollebenen</label>
<div class="ncontainer"> <div class="ncontainer">
<div class="input-group"> <div class="input-group">
<button onclick="decreaseFloorNum()">-</button> <button onclick="decreaseFloorNum()">-</button>
@ -24,21 +26,23 @@
<button onclick="increaseFloorNum()">+</button> <button onclick="increaseFloorNum()">+</button>
</div> </div>
</div> </div>
<label for="numFullFloors">Vollebenen</label> </div>
<div class="container" id="resultsDiv"> <div class="container" id="resultsDiv">
</div> </div>
</div>
</div>
</div> </div>
<script> <script>
var outputFailedChecks = document.getElementById("failedChecks"); var labelNumRats = document.getElementById("labelNumRats");
var ratSlider = document.getElementById("numRats"); var ratSlider = document.getElementById("numRats");
var outputNumRats = document.getElementById("outputNumRats");
outputNumRats.innerHTML = ratSlider.value; labelNumRats.innerHTML = `Anzahl an Ratten: ` + ratSlider.value;
ratSlider.oninput = function () { ratSlider.oninput = function () {
outputNumRats.innerHTML = this.value; labelNumRats.innerHTML = `Anzahl an Ratten: ` + this.value;
update(); update();
} }
@ -51,7 +55,7 @@
function update() { function update() {
var failed_checks = cageCheck(savicSuiteRoyaleDim, ratSlider.value, fullFloorNum.value); var failed_checks = cageCheck(savicSuiteRoyaleDim, ratSlider.value, fullFloorNum.value);
var resultsDiv = document.getElementById("resultsDiv"); var resultsDiv = document.getElementById("resultsDiv");
resultsDiv.innerHTML = `<strong>Werte</strong>: ${savicSuiteRoyaleDim.toString()} n(rats): ${ratSlider.value}, n(floors): ${fullFloorNum.value}`; resultsDiv.innerHTML = `<strong>Ergebnis</strong>`;
const ul = document.createElement('ul'); const ul = document.createElement('ul');
for (const key in failed_checks) { for (const key in failed_checks) {
@ -61,7 +65,6 @@
} }
resultsDiv.appendChild(ul); resultsDiv.appendChild(ul);
outputFailedChecks.innerHTML = failed_checks;
} }