removed text input and button and added layout and some styling

isaiahthedev · Jan 21, 2024 · ce5c6ba · ce5c6ba
1 parent 48a7d74
commit ce5c6ba
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -7,11 +7,28 @@
     <title>BMI Calculator</title>
 </head>
 <body>
-    <form id="bmiForm">
-        <label for="userInput">Enter something:</label>
-        <input type="text" id="userInput" name="userInput">
-        <button type="submit">Submit</button>
-    </form>
+    <div id="container">
+        <h1 id="title">BMI Calculator</h1>
+        <button id="male" class="square">Male</button>
+        <button id="female" class="square">Female</button>
+        <div id="height">
+            <p>Height</p>
+            <input type="slider" min="1" max="100" value="50" class="slider">
+        </div>
+        <div class="square">
+            <p>Weight</p>
+            <p class="number">70</p>
+            <button class="inc-btns">+</button>
+            <button class="inc-btns">-</button>
+        </div>
+        <div class="square">
+            <p>Age</p>
+            <p class="number">20</p>
+            <button class="inc-btns">+</button>
+            <button class="inc-btns">-</button>
+        </div>
+        <button id="calculate">Calculate</button>
+    </div>
     <script src="script.js"></script>
 </body>
 </html>
diff --git a/script.js b/script.js
@@ -1,8 +0,0 @@
-const form = document.getElementById("bmiForm");
-
-form.addEventListener("submit", (event) => {
-    event.preventDefault(); // Stop page reload from happening
-    const inputData = document.getElementById("userInput").value;
-    console.log("Input data:",inputData);
-    document.getElementById("userInput").value = "";
-})

diff --git a/style.css b/style.css
@@ -1,4 +1,46 @@
 * {
     margin: 0;
     box-sizing: border-box;
+    font-family: Arial, Helvetica, sans-serif;
+}
+body {
+    background: #0a0e21;
+}
+#container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+#title {
+    color: white;
+    text-align: center;
+    padding: 30px 0px 10px 0px;
+    width: 100vw;
+}
+.square {
+    width: 40vw;
+    height: 35vw;
+    background-color: #13172b;
+    border: none;
+    color: white;
+    border-radius: 15px;
+    margin: 3vw;
+    margin-bottom: 4vw;
+    font-size: 1.5rem;
+}
+#height {
+    height: 35vw;
+    width: 87vw;
+    color: white;
+    background-color: #13172b;
+    border-radius: 15px;
+}
+#calculate {
+    background-color: #ce3058;
+    border: none;
+    color: white;
+    height: 15vw;
+    width: 87vw;
+    font-size: 1.75rem;
+    border-radius: 15px;
 }