added result page which the user navigates to by clicking calculate

isaiahthedev · Jan 30, 2024 · 7020327 · 7020327
1 parent 401f703
commit 7020327
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 1 deletion.
diff --git a/result.html b/result.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+
+    <link rel="stylesheet" href="style.css">
+    <title>BMI Calculator</title>
+</head>
+<body>
+
+    <!--bmi calculator-->
+    <div id="bmi-container">
+        <!--app title-->
+        <h1 id="bmi-title">BMI Calculator</h1>
+        <h1 id="result-title">Your Result</h1>
+        <!--result block-->
+        <div id="result-block">
+            <p id="result-block-title" class="titles">Normal</p>
+            <p id="result-num">23.3</p>
+            <p id="result-text">Your weight is normal.</p>
+        </div>
+        <!--calculate button-->
+        <button id="calculate">Re-Calculate</button>
+
+    </div>
+
+    <!--script-->
+    <script src="result.js"></script>
+
+</body>
+</html>
diff --git a/result.js b/result.js
@@ -0,0 +1,8 @@
+const calculate = document.getElementById("calculate");
+
+let BMI = localStorage.getItem("BMI");
+
+//calculate button
+calculate.addEventListener('click', () => {
+    location.href = "index.html";
+})
diff --git a/script.js b/script.js
@@ -17,6 +17,7 @@ let weight = weightVal.innerHTML;
 let age = ageVal.innerHTML;
 let gender = "Male";
 let BMI = 0;
+let currentPage = "index.html";
 
 //gender input/control
 const selected = "rgb(12, 15, 28)";
@@ -80,5 +81,6 @@ ageValDec.addEventListener('click', () => {
 //calculate button
 calculate.addEventListener('click', () => {
     BMI = weight/(height*height) * 703
-    console.log('Your BMI is ' + BMI)
+    localStorage.setItem("BMI", BMI);
+    location.href = "result.html"
 })
diff --git a/style.css b/style.css
@@ -70,6 +70,36 @@ body {
     flex-wrap: wrap;
     padding: 10px 0 10px 0;
 }
+#result-block {
+    height: 450px;
+    width: 87%;
+    color: white;
+    background-color: #13172b;
+    border-radius: 15px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    padding: 10px 0 10px 0;
+}
+#result-title {
+    color: white;
+    font-size: 3.5rem;
+}
+#result-block-title {
+    color: rgb(83, 184, 83);
+    font-size: 1.5rem;
+    opacity: 1;
+}
+#result-num {
+    font-size: 5rem;
+    font-weight: 800;
+    width: 100%;
+    text-align: center;
+}
+#result-text {
+    font-size: 1.5rem;
+}
 .slider {
     -webkit-appearance: none;
     width: 85%;