From ce5c6badd52b7ab72b3f1b303cfe4248bd51bbcf Mon Sep 17 00:00:00 2001 From: IsaiahTheDev-Chromebook Date: Sun, 21 Jan 2024 04:39:09 -0500 Subject: [PATCH] removed text input and button and added layout and some styling --- index.html | 27 ++++++++++++++++++++++----- script.js | 8 -------- style.css | 42 ++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 64 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index e2dd0c9..03035fe 100644 --- a/index.html +++ b/index.html @@ -7,11 +7,28 @@ BMI Calculator -
- - - -
+
+

BMI Calculator

+ + +
+

Height

+ +
+
+

Weight

+

70

+ + +
+
+

Age

+

20

+ + +
+ +
\ No newline at end of file diff --git a/script.js b/script.js index 8b08119..e69de29 100644 --- 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 = ""; -}) \ No newline at end of file diff --git a/style.css b/style.css index 5f8783d..97a29f9 100644 --- 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; } \ No newline at end of file