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

Compare commits

base: moanos:f35fdab202c2382c726a15281bb825a5924cfbe7
Branches Tags
moanos:main
moanos:translation
..
compare: moanos:7e6d85d8a1e7b290cb4d613ddeb57485840fbff9
Branches Tags
moanos:main
moanos:translation

No commits in common. "f35fdab202c2382c726a15281bb825a5924cfbe7" and "7e6d85d8a1e7b290cb4d613ddeb57485840fbff9" have entirely different histories.
f35fdab202 ... 7e6d85d8a1

2 changed files with 26 additions and 117 deletions
Show Stats Expand all files Collapse all files

73
src/assets/css/style.css
View File

@ -1,51 +1,3 @@
:root {
--primary-light-one: #5daa68;
--primary-light-two: #4a9455;
--primary-semidark-one: #356c3c;
--primary-dark-one: #17311b;
--secondary-light-one: #faf1cf;
--secondary-light-two: #e1d7b5;
--background-one: var(--primary-light-one);
--background-two: var(--primary-light-two);
--background-three: var(--secondary-light-one);
--background-four: var(--primary-dark-one);
--highlight-one: var(--primary-dark-one);
--highlight-one-text: var(--secondary-light-one);
--highlight-two: var(--primary-semidark-one);
--text-one: var(--secondary-light-one);
--shadow-one: var(--primary-dark-one);
--text-two: var(--primary-dark-one);
--text-three: var(--primary-light-one);
--shadow-three: var(--primary-dark-one);
}
body {
background: var(--background-one);
color: var(--text-two);
}
h1, h2 {
word-wrap: break-word;
color: var(--text-one);
text-shadow: 2px 2px var(--shadow-one);
}
.container-form {
background: var(--background-three);
color: var(--text-two);
border-radius: 10px;
padding: 20px;
}
.input-element {
margin: 20px;
}
label {
font-weight: bold;
}
.slidecontainer { .slidecontainer {
width: 100%; width: 100%;
} }
@ -85,28 +37,3 @@ label {
background-size: 100% 100%; background-size: 100% 100%;
cursor: pointer; cursor: pointer;
} }
.input-group {
display: flex;
align-items: center;
}
.input-group button {
padding: 10px;
border: none;
background-color: var(--primary-dark-one);
color: white;
cursor: pointer;
font-size: 16px;
}
.input-group input {
width: 50px;
text-align: center;
font-size: 16px;
border: 1px solid #ccc;
background-color: var(--secondary-light-one);
height: 36px;
}

70
src/index.html
View File

@ -7,55 +7,52 @@
<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="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">
</div>
<div class="input-element"> <div class="slidecontainer">
<label for="numFullFloors">Vollebenen</label> <input type="range" min="1" max="20" value="4" class="slider" id="numRats">
<div class="ncontainer"> <label for="numRats">Anzahl an Ratten
<div class="input-group"> <div id="outputNumRats"></div>
<button onclick="decreaseFloorNum()">-</button> </label>
<input type="text" id="numFullFloors" value="3" readonly>
<button onclick="increaseFloorNum()">+</button>
</div> <input type="range" min="1" max="4" value="2" class="slider" id="numFullFloors">
</div> <label for="numFullFloors">Vollebenen
</div> <div id="outputNumFullFloors"></div>
<div class="container" id="resultsDiv"> </label>
</div> <div class="container" id="resultsDiv">
</div>
</div> </div>
</div> </div>
<script> <script>
var labelNumRats = document.getElementById("labelNumRats"); var outputFailedChecks = document.getElementById("failedChecks");
var ratSlider = document.getElementById("numRats"); var ratSlider = document.getElementById("numRats");
var outputNumRats = document.getElementById("outputNumRats");
labelNumRats.innerHTML = `Anzahl an Ratten: ` + ratSlider.value; outputNumRats.innerHTML = ratSlider.value;
ratSlider.oninput = function () { ratSlider.oninput = function () {
labelNumRats.innerHTML = `Anzahl an Ratten: ` + this.value; outputNumRats.innerHTML = this.value;
update(); update();
} }
// Full floor functions // Full floor functions
var fullFloorNum = document.getElementById("numFullFloors"); var fullFloorSlider = document.getElementById("numFullFloors");
var outputNumFullFloors = document.getElementById("outputNumFullFloors");
outputNumFullFloors.innerHTML = fullFloorSlider.value;
fullFloorSlider.oninput = function () {
outputNumFullFloors.innerHTML = this.value;
update();
}
var savicSuiteRoyaleDim = new Dimensions(1, 0.5, 1); var savicSuiteRoyaleDim = new Dimensions(1, 0.5, 1);
function update() { function update() {
var failed_checks = cageCheck(savicSuiteRoyaleDim, ratSlider.value, fullFloorNum.value); var failed_checks = cageCheck(savicSuiteRoyaleDim, ratSlider.value, fullFloorSlider.value);
var resultsDiv = document.getElementById("resultsDiv"); var resultsDiv = document.getElementById("resultsDiv");
resultsDiv.innerHTML = `<strong>Ergebnis</strong>`; resultsDiv.innerHTML = `<strong>Werte</strong>: ${savicSuiteRoyaleDim.toString()} n(rats): ${ratSlider.value}, n(floors): ${fullFloorSlider.value}`;
const ul = document.createElement('ul'); const ul = document.createElement('ul');
for (const key in failed_checks) { for (const key in failed_checks) {
@ -65,25 +62,10 @@
} }
resultsDiv.appendChild(ul); resultsDiv.appendChild(ul);
outputFailedChecks.innerHTML = failed_checks;
} }
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> </script>
</body> </body>