BMICalculator/index.html at main · AvidCoder101/BMICalculator · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<html>
<head>
    <link rel= "stylesheet" href= "./index.css">
    <link href= "https://fonts.googleapis.com/css?family=Quicksand:400,700" rel= "stylesheet">
    <link rel= "icon" href= "https://image.flaticon.com/icons/png/128/3373/3373123.png" sizes="16x16">
    <title> BMI Calculator </title>

</head>

<body>
    <h3><b>B</b>ody <b>M</b>ass <b>I</b>ndex <b>C</b>alculator <b>F</b>or <b>A</b>dults</h3>
    <h4>This BMI Calculator is designed for adults who are willing to check their BMI and how healthy they are.This will calculate whether your weight is healthy for your age, gender and height. Please input all of the details below in order to find out your BMI and whether your weight is <b>Underweight, Healthy, Overweight, Obese or Extremely Obese</b></h4>
    <form class= "form" id= "form" onsubmit="return validateForm()">
        <div class= "row-one">
            <input type= "text" class= "text-input" id= "age" autocomplete="off" required>
            <p class= "text">Age</p>
            <label class= "container">
                <input type= "radio" id= "f"><p class= "text">Female</p>
                <span class= "checkmark"></span>
            </label>
            <label class="container">
               <input type= "radio" name= "radio" id= "m">
               <p class= "text">Male</p>
               <span class= "checkmark"></span>
            </label>
        </div>

        <div class= "row-two">
            <input type= "text" class= "text-input" id= "height"  autocomplete= "off" required>
            <p class= "text">Height (cm)</p>
            <input type= "text" class= "text-input" id= "weight" autocomplete="off" required>
            <p class= "text">Weight (kg)</p>
        </div>
        <button type= "button" id= "submit">Submit</button>
    </form>
    <script src= './index.js'>


    </script>
</body>
</html>