added functionality to results page

index.html

@@ -45,7 +45,7 @@ <h1 id="bmi-title">BMI Calculator</h1>
         <!--age select-->
         <div class="small-blocks">
             <p id="age-title" class="titles">Age</p>
-            <p id="age-num" class="numbers">20</p>
+            <p id="age-num" class="numbers">21</p>
             <button id="age-dec" class="inc-btns">
                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dash-lg" viewBox="0 0 16 16">
                   <path fill-rule="evenodd" d="M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8"/>

result.js

@@ -1,8 +1,40 @@
 const calculate = document.getElementById("calculate");
-
+const bmiVal = document.getElementById("result-num");
+const resultText = document.getElementById("result-text");
+const resultTitle = document.getElementById("result-block-title");
+//display calculated BMI value
 let BMI = localStorage.getItem("BMI");
-
-//calculate button
+BMI = parseFloat(BMI);
+BMI = BMI.toFixed(1);
+bmiVal.innerText = BMI;
+//display BMI message
+switch(true) {
+    case BMI < 18.5:
+        resultTitle.innerText ="Underweight";
+        resultTitle.style.color = "#4287f5";
+        resultText.innerText = "You are underweight.";
+        break;
+    case BMI >= 18.5 && BMI <= 24.9:
+        resultTitle.innerText ="Healthy";
+        resultText.innerText = "You are a healthy weight.";
+        break;
+    case BMI >= 25 && BMI <= 29.9:
+        resultTitle.innerText ="Overweight";
+        resultTitle.style.color = "#f5e942";
+        resultText.innerText = "You are overweight.";
+        break;
+    case BMI > 30 && BMI <= 39.9:
+        resultTitle.innerText ="Obese";
+        resultTitle.style.color = "#eb923f";
+        resultText.innerText = "You are obese.";
+        break;
+    case BMI >= 40:
+        resultTitle.innerText ="Severly Obese";
+        resultTitle.style.color = "#cc2823";
+        resultText.innerText = "You are severly obese.";
+        break;
+}
+//re-calculate button
 calculate.addEventListener('click', () => {
     location.href = "index.html";
 })

script.js

@@ -72,7 +72,7 @@ ageValInc.addEventListener('click', () => {
     ageVal.innerHTML = age;
 });
 ageValDec.addEventListener('click', () => {
-    if(age > 1) {
+    if(age > 18) {
         age--;
     }
     ageVal.innerHTML = age;