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

Compare commits

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

4 Commits
7e6d85d8a1 ... f35fdab202

Author SHA1 Message Date
moanos
f35fdab202 feat: Add notfellchen style
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed
Details
2024-07-18 23:44:20 +02:00
moanos
d51fb299e9 fix: label 2024-07-18 23:43:57 +02:00
moanos
5165ef485f feat: Make initial update 2024-07-18 23:37:32 +02:00
moanos
df97239ae8 feat: Use other input for number of floors 2024-07-18 23:22:31 +02:00
2 changed files with 117 additions and 26 deletions
Show Stats Expand all files Collapse all files

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

@ -1,3 +1,51 @@
: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%;
} }
@ -36,4 +84,29 @@
background: url('/src/assetssets/img/logo_transparent.png'); background: url('/src/assetssets/img/logo_transparent.png');
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,52 +7,55 @@
<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="slidecontainer"> <div class="input-element">
<input type="range" min="1" max="20" value="4" class="slider" id="numRats"> <label for="numFullFloors">Vollebenen</label>
<label for="numRats">Anzahl an Ratten <div class="ncontainer">
<div id="outputNumRats"></div> <div class="input-group">
</label> <button onclick="decreaseFloorNum()">-</button>
<input type="text" id="numFullFloors" value="3" readonly>
<button onclick="increaseFloorNum()">+</button>
<input type="range" min="1" max="4" value="2" class="slider" id="numFullFloors"> </div>
<label for="numFullFloors">Vollebenen </div>
<div id="outputNumFullFloors"></div> </div>
</label> <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();
} }
// Full floor functions // Full floor functions
var fullFloorSlider = document.getElementById("numFullFloors"); var fullFloorNum = 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, fullFloorSlider.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): ${fullFloorSlider.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) {
@ -62,10 +65,25 @@
} }
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>