RattenheimRechner/src/index.html

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

    <link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
</head>
<body>

<div class="navigation-sticky">
    <a href="https://notfellchen.org">
        <b>zurück zur Homepage</b>
    </a>
</div>

<div class="content">
    <h1>Käfigrechner</h1>
    <div class="container-form">
        <div class="cards">
            <div class="card" id="card-SavicSuiteRoyaleXL">
                <label for="SavicSuiteRoyaleXL">
                    <input type="checkbox" id="SavicSuiteRoyaleXL"/>
                    <div class="card-photo">
                        <img src="assets/img/savic-xl.jpeg">
                    </div>
                    <div class="info-container">
                        <h4><b>Savic XL</b></h4>
                    </div>
                </label>
            </div>

            <div class="card" id="card-SavicSuiteRoyale95Double">
                <label for="SavicSuiteRoyale95Double">
                    <input type="checkbox" id="SavicSuiteRoyale95Double"/>
                    <div class="card-photo">
                        <div>
                            <img src="assets/img/savic-95-double.jpg">
                        </div>
                        <div class="info-container">
                            <h4><b>95 Double</b></h4>
                        </div>
                    </div>
                </label>
            </div>

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

            <div class="card" id="card-ManualMeasurements">
                <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="container-inputs">
        <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="input-element">
            <div class="slidecontainer">
                <label for="numRats" id="labelNumRats">Anzahl an Ratten ?</label>
                <input type="range" min="3" max="15" value="4" class="slider" id="numRats">
            </div>
        </div>
    </div>

    <div class="container output-element" id="resultsDiv">
    </div>
</div>
</div>
<script>

    const inputWidth = document.getElementById("width");
    inputWidth.onchange = updateViaManualMeasurements;
    const inputDepth = document.getElementById("depth");
    inputDepth.onchange = updateViaManualMeasurements;
    const inputHeight = document.getElementById("height");
    inputHeight.onchange = updateViaManualMeasurements;


    const selectSavicSuiteRoyaleXL = document.getElementById("SavicSuiteRoyaleXL");
    const selectSavicSuiteRoyale95Double = document.getElementById("SavicSuiteRoyale95Double");
    const selectTiakiKleintierkäfigEtagere = document.getElementById("TiakiKleintierkäfigEtagere");

    const cardSavicSuiteRoyaleXL = document.getElementById("card-SavicSuiteRoyaleXL");
    const cardSavicSuiteRoyale95Double = document.getElementById("card-SavicSuiteRoyale95Double");
    const cardTiakiKleintierkäfigEtagere = document.getElementById("card-TiakiKleintierkäfigEtagere");


    function markActiveCage(cageName) {

        cardSavicSuiteRoyaleXL.classList.remove("card-active");
        cardSavicSuiteRoyale95Double.classList.remove("card-active");
        cardTiakiKleintierkäfigEtagere.classList.remove("card-active");
        if (cageName != "") {
            const activeCage = document.getElementById("card-" + cageName);
            activeCage.classList.add("card-active")
        }

    }

    function updateCage(event) {
        selectSavicSuiteRoyaleXL.checked = false;
        selectSavicSuiteRoyale95Double.checked = false;
        selectTiakiKleintierkäfigEtagere.checked = false;
        const selectedCage = event.currentTarget
        selectedCage.checked = true;
        const cageName = selectedCage.id;

        console.log(cageName);
        var dim = getCageDimensions(cageName);
        inputWidth.value = dim.width;
        inputDepth.value = dim.depth;
        inputHeight.value = dim.height;

        markActiveCage(cageName);

        update();
    }

    selectSavicSuiteRoyaleXL.onchange = updateCage;
    selectSavicSuiteRoyale95Double.onchange = updateCage;
    selectTiakiKleintierkäfigEtagere.onchange = 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) {
        console.log(cageName);
        if (cageName == "SavicSuiteRoyaleXL") {
            return new Dimensions(115, 67.5, 153);
        }
        if (cageName == "SavicSuiteRoyale95Double") {
            return new Dimensions(95, 63, 120);
        }
        if (cageName == "TiakiKleintierkäfigEtagere") {
            return new Dimensions(93.5, 63, 141.2);
        }
    }

    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 updateViaManualMeasurements() {
        markActiveCage("ManualMeasurements");
        update();
    }

    function update() {
        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");
        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: restyle cage cards 2024-07-21 20:23:54 +00:00			`<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">`
feat: Initial commit 2024-07-18 17:51:24 +00:00			`<head>`
			`<meta charset="UTF-8">`
feat: Rename to Käfigrechner 2024-07-21 09:36:05 +00:00			`<title>Käfigrechner</title>`
feat: Initial commit 2024-07-18 17:51:24 +00:00			`<link rel="stylesheet" href="assets/css/style.css">`
			`<script src="assets/calculator.js"></script>`
feat: Add favicon 2024-07-21 21:25:22 +00:00
			`<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">`
			`<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">`
			`<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">`
feat: Initial commit 2024-07-18 17:51:24 +00:00			`</head>`
			`<body>`
feat: Add sticky navigation 2024-07-21 21:12:39 +00:00
			`<div class="navigation-sticky">`
			`<a href="https://notfellchen.org">`
			`<b>zurück zur Homepage</b>`
			`</a>`
			`</div>`
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			`<div class="content">`
feat: Add title to content 2024-07-21 21:15:10 +00:00			`<h1>Käfigrechner</h1>`
fix: label 2024-07-18 21:43:57 +00:00			`<div class="container-form">`
feat: restyle cage cards 2024-07-21 20:23:54 +00:00			`<div class="cards">`
			`<div class="card" id="card-SavicSuiteRoyaleXL">`
			`<label for="SavicSuiteRoyaleXL">`
fix: cage selector 2024-07-20 06:47:41 +00:00			`<input type="checkbox" id="SavicSuiteRoyaleXL"/>`
feat: restyle cage cards 2024-07-21 20:23:54 +00:00			`<div class="card-photo">`
feat: improve selector 2024-07-18 22:50:23 +00:00			`<img src="assets/img/savic-xl.jpeg">`
			`</div>`
feat: restyle cage cards 2024-07-21 20:23:54 +00:00			`<div class="info-container">`
			`<h4><b>Savic XL</b></h4>`
			`</div>`
			`</label>`
feat: improve selector 2024-07-18 22:50:23 +00:00			`</div>`

feat: restyle cage cards 2024-07-21 20:23:54 +00:00			`<div class="card" id="card-SavicSuiteRoyale95Double">`
			`<label for="SavicSuiteRoyale95Double">`
fix: cage selector 2024-07-20 06:47:41 +00:00			`<input type="checkbox" id="SavicSuiteRoyale95Double"/>`
feat: restyle cage cards 2024-07-21 20:23:54 +00:00			`<div class="card-photo">`
			`<div>`
			`<img src="assets/img/savic-95-double.jpg">`
			`</div>`
			`<div class="info-container">`
			`<h4><b>95 Double</b></h4>`
			`</div>`
feat: improve selector 2024-07-18 22:50:23 +00:00			`</div>`
feat: restyle cage cards 2024-07-21 20:23:54 +00:00			`</label>`
feat: improve selector 2024-07-18 22:50:23 +00:00			`</div>`

feat: restyle cage cards 2024-07-21 20:23:54 +00:00			`<div class="card" id="card-TiakiKleintierkäfigEtagere">`
			`<label for="TiakiKleintierkäfigEtagere">`
fix: cage selector 2024-07-20 06:47:41 +00:00			`<input type="checkbox" id="TiakiKleintierkäfigEtagere"/>`
feat: restyle cage cards 2024-07-21 20:23:54 +00:00			`<div class="card-photo">`
feat: improve selector 2024-07-18 22:50:23 +00:00			`<img src="assets/img/tiaki.jpeg">`
			`</div>`
feat: restyle cage cards 2024-07-21 20:23:54 +00:00			`<div class="info-container">`
			`<h4><b>TIAKI Kleintierkäfig Étagère</b></h4>`
			`</div>`
			`</label>`
feat: Start selecting cages 2024-07-18 22:24:38 +00:00			`</div>`

feat: Make active cage 2024-07-21 20:55:10 +00:00			`<div class="card" id="card-ManualMeasurements">`
feat: restyle cage cards 2024-07-21 20:23:54 +00:00			`<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>`
feat: Start selecting cages 2024-07-18 22:24:38 +00:00			`</div>`
			`</div>`
feat: restyle cage cards 2024-07-21 20:23:54 +00:00			`</div>`
feat: reorder floors and num of rats in flexcontainer 2024-07-21 21:05:08 +00:00
			`<div class="container-inputs">`
			`<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>`
fix: various styling/syntax 2024-07-18 21:58:42 +00:00			`</div>`
fix: label 2024-07-18 21:43:57 +00:00
feat: reorder floors and num of rats in flexcontainer 2024-07-21 21:05:08 +00:00			`<div class="input-element">`
			`<div class="slidecontainer">`
			`<label for="numRats" id="labelNumRats">Anzahl an Ratten ?</label>`
			`<input type="range" min="3" max="15" value="4" class="slider" id="numRats">`
fix: label 2024-07-18 21:43:57 +00:00			`</div>`
fix: various styling/syntax 2024-07-18 21:58:42 +00:00			`</div>`
feat: Use other input for number of floors 2024-07-18 21:22:31 +00:00			`</div>`
feat: reorder floors and num of rats in flexcontainer 2024-07-21 21:05:08 +00:00
feat: restyle cage cards 2024-07-21 20:23:54 +00:00			`<div class="container output-element" id="resultsDiv">`
			`</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");`
feat: Make active cage 2024-07-21 20:55:10 +00:00			`inputWidth.onchange = updateViaManualMeasurements;`
feat: Add basic cage selector logic 2024-07-20 06:20:43 +00:00			`const inputDepth = document.getElementById("depth");`
feat: Make active cage 2024-07-21 20:55:10 +00:00			`inputDepth.onchange = updateViaManualMeasurements;`
feat: Add basic cage selector logic 2024-07-20 06:20:43 +00:00			`const inputHeight = document.getElementById("height");`
feat: Make active cage 2024-07-21 20:55:10 +00:00			`inputHeight.onchange = updateViaManualMeasurements;`
feat: Add basic cage selector logic 2024-07-20 06:20:43 +00:00

fix: cage selector 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");`
feat: Add basic cage selector logic 2024-07-20 06:20:43 +00:00
feat: Make active cage 2024-07-21 20:55:10 +00:00			`const cardSavicSuiteRoyaleXL = document.getElementById("card-SavicSuiteRoyaleXL");`
			`const cardSavicSuiteRoyale95Double = document.getElementById("card-SavicSuiteRoyale95Double");`
			`const cardTiakiKleintierkäfigEtagere = document.getElementById("card-TiakiKleintierkäfigEtagere");`


			`function markActiveCage(cageName) {`

			`cardSavicSuiteRoyaleXL.classList.remove("card-active");`
			`cardSavicSuiteRoyale95Double.classList.remove("card-active");`
			`cardTiakiKleintierkäfigEtagere.classList.remove("card-active");`
			`if (cageName != "") {`
			`const activeCage = document.getElementById("card-" + cageName);`
			`activeCage.classList.add("card-active")`
			`}`

			`}`

fix: cage selector 2024-07-20 06:47:41 +00:00			`function updateCage(event) {`
			`selectSavicSuiteRoyaleXL.checked = false;`
			`selectSavicSuiteRoyale95Double.checked = false;`
feat: Add basic cage selector logic 2024-07-20 06:20:43 +00:00			`selectTiakiKleintierkäfigEtagere.checked = false;`
fix: cage selector 2024-07-20 06:47:41 +00:00			`const selectedCage = event.currentTarget`
feat: Add basic cage selector logic 2024-07-20 06:20:43 +00:00			`selectedCage.checked = true;`
			`const cageName = selectedCage.id;`
fix: cage selector 2024-07-20 06:47:41 +00:00
			`console.log(cageName);`
			`var dim = getCageDimensions(cageName);`
feat: Add basic cage selector logic 2024-07-20 06:20:43 +00:00			`inputWidth.value = dim.width;`
			`inputDepth.value = dim.depth;`
			`inputHeight.value = dim.height;`

feat: Make active cage 2024-07-21 20:55:10 +00:00			`markActiveCage(cageName);`

fix: cage selector 2024-07-20 06:47:41 +00:00			`update();`
feat: Add basic cage selector logic 2024-07-20 06:20:43 +00:00			`}`
fix: cage selector 2024-07-20 06:47:41 +00:00
			`selectSavicSuiteRoyaleXL.onchange = updateCage;`
			`selectSavicSuiteRoyale95Double.onchange = updateCage;`
			`selectTiakiKleintierkäfigEtagere.onchange = updateCage;`
feat: Add basic cage selector logic 2024-07-20 06:20:43 +00:00

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) {`
fix: cage selector 2024-07-20 06:47:41 +00:00			`console.log(cageName);`
feat: Add basic cage selector logic 2024-07-20 06:20:43 +00:00			`if (cageName == "SavicSuiteRoyaleXL") {`
fix: cage selector 2024-07-20 06:47:41 +00:00			`return new Dimensions(115, 67.5, 153);`
feat: Add basic cage selector logic 2024-07-20 06:20:43 +00:00			`}`
			`if (cageName == "SavicSuiteRoyale95Double") {`
fix: cage selector 2024-07-20 06:47:41 +00:00			`return new Dimensions(95, 63, 120);`
feat: Add basic cage selector logic 2024-07-20 06:20:43 +00:00			`}`
			`if (cageName == "TiakiKleintierkäfigEtagere") {`
fix: cage selector 2024-07-20 06:47:41 +00:00			`return new Dimensions(93.5, 63, 141.2);`
feat: Add basic cage selector logic 2024-07-20 06:20:43 +00:00			`}`
			`}`
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
feat: reorder floors and num of rats in flexcontainer 2024-07-21 21:05:08 +00:00			`function updateViaManualMeasurements() {`
feat: Make active cage 2024-07-21 20:55:10 +00:00			`markActiveCage("ManualMeasurements");`
			`update();`
			`}`
feat: reorder floors and num of rats in flexcontainer 2024-07-21 21:05:08 +00:00
refactor: formatting 2024-07-19 21:46:37 +00:00			`function update() {`
fix: cage selector 2024-07-20 06:47:41 +00:00			`const width = inputWidth.value`
			`const depth = inputDepth.value`
			`const height = inputHeight.value`
feat: Update on change in input fields 2024-07-21 09:36:33 +00:00			`const dimensions = new Dimensions(width / 100, depth / 100, height / 100);`
fix: cage selector 2024-07-20 06:47:41 +00:00			`const failed_checks = cageCheck(dimensions, ratSlider.value, fullFloorNum.value);`
			`console.log(failed_checks);`
			`let resultsDiv = document.getElementById("resultsDiv");`
refactor: formatting 2024-07-19 21:46:37 +00:00			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>`