feat: Style main result

public/i18n/de.json

@@ -10,7 +10,10 @@
   "height-cm": "Höhe (cm)",
   "full-floors": "Vollebenen",
   "result": "Ergebnis",
+  "input-data-num-rats": "Bitte gib erst die Maße des Käfigs ein, dann siehst du hier die Anzahl der Ratten die hineinpassen.",
   "number-of-rats": "Anzahl an Ratten",
+  "please-input-cage-calc": "Stell ein für wie viel Ratten der Käfig sein soll, danach siehst du hier das Ergebnis.",
+  "please-input-cage-check": "Bitte gib erst die Maße des Käfigs und die Anzahl an Ratten ein. Danach siehst du hier, ob der Käfig passt.",
   "give-feedback": "Feedback geben",
   "change-language": "Sprache ändern",
   "information-on-rat-husbandry": "Information",

public/i18n/en.json

@@ -10,7 +10,10 @@
   "height-cm": "Height (cm)",
   "full-floors": "Full floors",
   "result": "Result",
+  "input-data-num-rats": "Please input them measurements of the cage. Then you will see the number of rats allowed.",
   "number-of-rats": "Number of Rats",
+  "please-input-cage-calc": "First put in how many rats should fit the cage. After that come back here.",
+  "please-input-cage-check": "First put in how many rats should fit the cage and the cages measurements. After that come back here to see if they fit.",
   "give-feedback": "Give Feedback",
   "change-language": "Change language",
   "information-on-rat-husbandry": "Information",

public/index.html

@@ -108,10 +108,16 @@
         <div class="card-footer is-fullwidth">
             <div class="card result-card" id="num-rats-result-card">
                 <div class="card-header">
-                    <h2 class="card-header-title is-3 is-centered" data-i18n="result">Ergebnis</h2>
+                    <h2 class="card-header-title title is-2 is-centered" data-i18n="result">Ergebnis</h2>
                 </div>
                 <div class="card-content">
-                    <div id="num-rats-resultsDiv"></div>
+                    <div class="is-size-5" id="num-rats-resultsDiv">
+                        <p data-i18n="input-data-num-rats">
+                            Bitte gib erst die Maße ein, dann siehst du hier die Anzahl
+                            der Ratten die hineinpassen.
+                        </p>
+
+                    </div>
                 </div>
             </div>
         </div>
@@ -134,10 +140,12 @@
             <div class="card-footer is-fullwidth">
                 <div class="card result-card" id="cage-calc-result-card">
                     <div class="card-header">
-                        <h2 class="card-header-title is-3 is-centered" data-i18n="result">Ergebnis</h2>
+                        <h2 class="card-header-title title is-2 is-centered" data-i18n="result">Ergebnis</h2>
                     </div>
                     <div class="card-content">
-                        <div id="cageCalcResultsDiv"></div>
+                        <div class="is-size-5" id="cageCalcResultsDiv"></div>
+                        <p data-i18n="please-input-cage-calc">Stell ein für wie viel Ratten der Käfig sein soll, danach
+                            siehst du hier das Ergebnis</p>
                     </div>
                 </div>
             </div>
@@ -209,17 +217,21 @@
         <div class="card-footer is-fullwidth">
             <div class="card result-card" id="result-card">
                 <div class="card-header">
-                    <h2 class="card-header-title is-3 is-centered" data-i18n="result">Ergebnis</h2>
+                    <h2 class="card-header-title title is-2 is-centered" data-i18n="result">Ergebnis</h2>
                 </div>
                 <div class="card-content">
-                    <div id="resultsDiv"></div>
+                    <div id="resultsDiv">
+                        <p data-i18n="please-input-cage-check">Bitte gib erst die Maße des Käfigs und die Anzahl an
+                            Ratten ein. Danach siehst du hier, ob der Käfig passt.</p>
+                    </div>
                 </div>
             </div>
         </div>
     </div>
 </div>
 
-<button class="button is-primary floating js-modal-trigger" data-target="modal-feedback" data-i18n="give-feedback"></button>
+<button class="button is-primary floating js-modal-trigger" data-target="modal-feedback"
+        data-i18n="give-feedback"></button>
 
 <div class="footer" aria-label="Footer">
     <div class="columns">
@@ -275,7 +287,6 @@
 </div>
 
 
-
 <div id="modal-feedback" class="modal">
 
     <div class="modal-background"></div>

src/index.js

@@ -346,16 +346,16 @@ function formatCriteria(criteria) {
 function updateCageCheck() {
     labelNumRats.innerHTML = i18next.t("cage-for-x-rats", {"num_rats": ratSlider.value});
 
-    const width = inputWidth.value
+    const width = inputWidth.value;
-    const depth = inputDepth.value
+    const depth = inputDepth.value;
-    const height = inputHeight.value
+    const height = inputHeight.value;
     const dimensions = new Dimensions(width / 100, depth / 100, height / 100);
     const validator = new Validator();
     const numRats = ratSlider.value;
     const numFullFloors = fullFloorNum.value;
 
 
-    const failed_checks = validator.cageCheck(dimensions, numRats,);
+    const failed_checks = validator.cageCheck(dimensions, numRats, numFullFloors);
     let resultsDiv = document.getElementById("resultsDiv");
 
     const result = getResultFromChecks(failed_checks);
@@ -409,7 +409,7 @@ function updateNumRatsCalculator() {
     const validator = new Validator();
     const failed_checks = validator.failCageNumberIndependent(dimensions, numFullFloors);
 
-    let overallArea = validator.getOverallArea(dimensions, );
+    let overallArea = validator.getOverallArea(dimensions, numFullFloors);
     let allowedNumRats;
     try {
         allowedNumRats = validator.allowedNumberOfRats(overallArea);
@@ -426,7 +426,8 @@ function updateNumRatsCalculator() {
 
     resultsDiv.innerHTML = "";
     const p = document.createElement('p');
-    p.textContent = i18next.t("cage-for-x-rats", {"num_rats": allowedNumRats});
+    p.textContent = i18next.t("cage-for-x-rats", {"num_rats": Math.floor(allowedNumRats)});
+    p.className = " is-size-5 has-text-weight-semibold"
     resultsDiv.appendChild(p);
     resultsDiv.appendChild(result);