RattenheimRechner/src/index.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Knastrechner</title>
    <link rel="stylesheet" href="assets/css/style.css">
    <script src="assets/calculator.js"></script>
</head>
<body>

<h1>Käfigrechner</h1>
<div class="content">
    <div class="container-form">
        <div class="cage-selector">
            <div class="card">
                <div class="card-photo">
                    <input type="checkbox" id="selectSavicSuiteRoyleXL"/>
                    <div>
                        <img src="assets/img/savic-xl.jpeg">
                    </div>
                </div>
                <label for="selectSavicSuiteRoyleXL"> Savic Suite Royale XL</label>
            </div>


            <div class="card">
                <div class="card-photo">
                    <input type="checkbox" id="selectSavicSuiteRoyle95Double"/>
                    <div>
                        <img src="assets/img/savic-95-double.jpg">
                    </div>
                </div>
                <label for="selectSavicSuiteRoyle95Double">Savic Suite Royale 95 Double</label>
            </div>


            <div class="card">
                <div class="card-photo">
                    <input type="checkbox" id="selectTiakiKleintierkäfigEtagere"/>
                    <div>
                        <img src="assets/img/tiaki.jpeg">
                    </div>
                </div>
                <label for="selectTiakiKleintierkäfigEtagere">TIAKI Kleintierkäfig Étagère</label>
            </div>

            <div class="card">
                <div class="card-photo">

                    <label for="form-cage-measurements">Käfigmaße</label>
                    <form id="form-cage-measurements" class="form-measurements">
                        <div class="input-measurement">
                            <label for="width">Breite (cm)</label>
                            <input class="measurement" type="number" id="width">
                        </div>
                        <div class="input-measurement">
                            <label for="depth">Tiefe (cm)</label>
                            <input class="measurement" type="number" id="depth">
                        </div>
                        <div class="input-measurement">
                            <label for="height">Höhe (cm)</label>
                            <input class="measurement" type="number" id="height">
                        </div>
                    </form>
                </div>
            </div>

        </div>
        <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>

        <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 output-element" id="resultsDiv">
        </div>
    </div>
</div>
<script>

    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;


    var labelNumRats = document.getElementById("labelNumRats");

    var ratSlider = document.getElementById("numRats");

    labelNumRats.innerHTML = `Anzahl an Ratten: ` + ratSlider.value;

    ratSlider.oninput = function () {
        labelNumRats.innerHTML = `Anzahl an Ratten: ` + this.value;
        update();
    }

    // Full floor functions
    var fullFloorNum = document.getElementById("numFullFloors");

    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);
        }
    }

    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;
        }

    }

    function update() {
        var failed_checks = cageCheck(savicSuiteRoyaleDim, ratSlider.value, fullFloorNum.value);
        var resultsDiv = document.getElementById("resultsDiv");
        resultsDiv.innerHTML = `<strong>Ergebnis</strong>`;

        const result = getResultFromChecks(failed_checks);

        resultsDiv.appendChild(result);
    }


    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();
    }

    update();
</script>

</body>
</html>
feat: Initial commit 2024-07-18 17:51:24 +00:00			`<!DOCTYPE html>`
feat: Start selecting cages 2024-07-18 22:24:38 +00:00			`<html lang="en" xmlns="http://www.w3.org/1999/html">`
feat: Initial commit 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>`
feat: Use other input for number of floors 2024-07-18 21:22:31 +00:00
fix: label 2024-07-18 21:43:57 +00:00			`<h1>Käfigrechner</h1>`
			`<div class="content">`
			`<div class="container-form">`
feat: Start selecting cages 2024-07-18 22:24:38 +00:00			`<div class="cage-selector">`
feat: improve selector 2024-07-18 22:50:23 +00:00			`<div class="card">`
			`<div class="card-photo">`
refactor: Use more descriptive ids 2024-07-20 06:19:47 +00:00			`<input type="checkbox" id="selectSavicSuiteRoyleXL"/>`
feat: improve selector 2024-07-18 22:50:23 +00:00			`<div>`
			`<img src="assets/img/savic-xl.jpeg">`
			`</div>`
			`</div>`
refactor: Use more descriptive ids 2024-07-20 06:19:47 +00:00			`<label for="selectSavicSuiteRoyleXL"> Savic Suite Royale XL</label>`
feat: improve selector 2024-07-18 22:50:23 +00:00			`</div>`


			`<div class="card">`
			`<div class="card-photo">`
refactor: Use more descriptive ids 2024-07-20 06:19:47 +00:00			`<input type="checkbox" id="selectSavicSuiteRoyle95Double"/>`
feat: improve selector 2024-07-18 22:50:23 +00:00			`<div>`
			`<img src="assets/img/savic-95-double.jpg">`
			`</div>`
			`</div>`
refactor: Use more descriptive ids 2024-07-20 06:19:47 +00:00			`<label for="selectSavicSuiteRoyle95Double">Savic Suite Royale 95 Double</label>`
feat: improve selector 2024-07-18 22:50:23 +00:00			`</div>`


			`<div class="card">`
			`<div class="card-photo">`
refactor: Use more descriptive ids 2024-07-20 06:19:47 +00:00			`<input type="checkbox" id="selectTiakiKleintierkäfigEtagere"/>`
feat: improve selector 2024-07-18 22:50:23 +00:00			`<div>`
			`<img src="assets/img/tiaki.jpeg">`
			`</div>`
			`</div>`
refactor: Use more descriptive ids 2024-07-20 06:19:47 +00:00			`<label for="selectTiakiKleintierkäfigEtagere">TIAKI Kleintierkäfig Étagère</label>`
feat: Start selecting cages 2024-07-18 22:24:38 +00:00			`</div>`

feat: improve selector 2024-07-18 22:50:23 +00:00			`<div class="card">`
			`<div class="card-photo">`
feat: styling cage selector 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">`
feat: styling cage selector 2024-07-19 21:44:33 +00:00			`<div class="input-measurement">`
feat: Add unit to input 2024-07-20 06:20:10 +00:00			`<label for="width">Breite (cm)</label>`
feat: styling cage selector 2024-07-19 21:44:33 +00:00			`<input class="measurement" type="number" id="width">`
			`</div>`
			`<div class="input-measurement">`
feat: Add unit to input 2024-07-20 06:20:10 +00:00			`<label for="depth">Tiefe (cm)</label>`
feat: styling cage selector 2024-07-19 21:44:33 +00:00			`<input class="measurement" type="number" id="depth">`
			`</div>`
			`<div class="input-measurement">`
feat: Add unit to input 2024-07-20 06:20:10 +00:00			`<label for="height">Höhe (cm)</label>`
feat: styling cage selector 2024-07-19 21:44:33 +00:00			`<input class="measurement" type="number" id="height">`
			`</div>`
feat: improve selector 2024-07-18 22:50:23 +00:00			`</form>`
			`</div>`
feat: Start selecting cages 2024-07-18 22:24:38 +00:00			`</div>`
feat: improve selector 2024-07-18 22:50:23 +00:00
feat: Start selecting cages 2024-07-18 22:24:38 +00:00			`</div>`
fix: label 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>`
fix: various styling/syntax 2024-07-18 21:58:42 +00:00			`</div>`
fix: label 2024-07-18 21:43:57 +00:00
fix: various styling/syntax 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>`
fix: label 2024-07-18 21:43:57 +00:00			`</div>`
			`</div>`
fix: various styling/syntax 2024-07-18 21:58:42 +00:00			`</div>`
			`<div class="container output-element" id="resultsDiv">`
feat: Use other input for number of floors 2024-07-18 21:22:31 +00:00			`</div>`
			`</div>`
refactor: formatting 2024-07-19 21:46:37 +00:00			`</div>`
			`<script>`
feat: Initial commit 2024-07-18 17:51:24 +00:00
feat: Add basic cage selector logic 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;`


refactor: formatting 2024-07-19 21:46:37 +00:00			`var labelNumRats = document.getElementById("labelNumRats");`
feat: Initial commit 2024-07-18 17:51:24 +00:00
refactor: formatting 2024-07-19 21:46:37 +00:00			`var ratSlider = document.getElementById("numRats");`
feat: Initial commit 2024-07-18 17:51:24 +00:00
refactor: formatting 2024-07-19 21:46:37 +00:00			labelNumRats.innerHTML = `Anzahl an Ratten: ` + ratSlider.value;
fix: label 2024-07-18 21:43:57 +00:00
refactor: formatting 2024-07-19 21:46:37 +00:00			`ratSlider.oninput = function () {`
			labelNumRats.innerHTML = `Anzahl an Ratten: ` + this.value;
			`update();`
			`}`
feat: Initial commit 2024-07-18 17:51:24 +00:00
refactor: formatting 2024-07-19 21:46:37 +00:00			`// Full floor functions`
			`var fullFloorNum = document.getElementById("numFullFloors");`
feat: Initial commit 2024-07-18 17:51:24 +00:00
feat: Add basic cage selector logic 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);`
			`}`
			`}`
refactor: formatting 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;`
feat: Initial commit 2024-07-18 17:51:24 +00:00			`}`

refactor: formatting 2024-07-19 21:46:37 +00:00			`}`
feat: Initial commit 2024-07-18 17:51:24 +00:00
refactor: formatting 2024-07-19 21:46:37 +00:00			`function update() {`
			`var failed_checks = cageCheck(savicSuiteRoyaleDim, ratSlider.value, fullFloorNum.value);`
			`var resultsDiv = document.getElementById("resultsDiv");`
			resultsDiv.innerHTML = `<strong>Ergebnis</strong>`;
feat: Initial commit 2024-07-18 17:51:24 +00:00
refactor: formatting 2024-07-19 21:46:37 +00:00			`const result = getResultFromChecks(failed_checks);`
feat: put out descriptive message if everything okay 2024-07-18 21:59:08 +00:00
refactor: formatting 2024-07-19 21:46:37 +00:00			`resultsDiv.appendChild(result);`
			`}`
feat: put out descriptive message if everything okay 2024-07-18 21:59:08 +00:00

refactor: formatting 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;`
feat: Use other input for number of floors 2024-07-18 21:22:31 +00:00			`}`
refactor: formatting 2024-07-19 21:46:37 +00:00			`update();`
			`}`
feat: Use other input for number of floors 2024-07-18 21:22:31 +00:00
refactor: formatting 2024-07-19 21:46:37 +00:00			`function increaseFloorNum() {`
			`var input = document.getElementById('numFullFloors');`
			`var value = parseInt(input.value);`
			`input.value = value + 1;`
feat: Use other input for number of floors 2024-07-18 21:22:31 +00:00			`update();`
refactor: formatting 2024-07-19 21:46:37 +00:00			`}`

			`update();`
			`</script>`
feat: Initial commit 2024-07-18 17:51:24 +00:00
			`</body>`
			`</html>`