qxf2 · PreedhiVivek · Sep 25, 2019 · Sep 25, 2019 · Sep 25, 2019
diff --git a/bmi_calculator.py b/bmi_calculator.py
@@ -0,0 +1,35 @@
+"""
+Purpose:
+A Flask application to calculate the BMI of the user.
+
+"""
+
+from flask import Flask, jsonify, render_template, request
+
+app = Flask(__name__)
+
+def calculate_bmi(weight_of_the_user,height_of_the_user):
+    # Calculate the BMI of the user according to height and weight
+    bmi_of_the_user = round(weight_of_the_user/(height_of_the_user * height_of_the_user),1)
+    return bmi_of_the_user
+
+@app.route("/", methods=['GET', 'POST'])
+@app.route("/bmi", methods=['GET', 'POST'])
+def bmi():
+    "Endpoint for calculating the bmi of a user"
+    if request.method == 'GET':
+        #return the form
+        return render_template('bmi.html')
+    if request.method == 'POST':
+        #return the answer
+        weight = float(request.form.get('weight'))
+        height = float(request.form.get('height'))
+
+        result = calculate_bmi(weight,height)
+        api_response = {"answer": result}
+        return jsonify(api_response)
+
+
+#---START OF SCRIPT
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=6464, debug= True)
diff --git a/static/css/bmi_style.css b/static/css/bmi_style.css
@@ -0,0 +1,127 @@
+/*Stylesheet for BMI Calculator application*/
+
+body {
+    padding-top: 40px;
+    font-size: 16px;
+    font-family: "Open Sans",serif;
+    background-color:antiquewhite;
+}
+
+h1 {
+    font-family: "Abel", Arial, sans-serif;
+    font-weight: 400;
+    font-size: 40px;
+    color:#5cb85cff;  
+    line-height: 1.0;
+}
+
+h2 {
+    font-family: "Abel", Arial, sans-serif;
+}
+
+h3 {
+    font-family: "Abel", Arial, sans-serif;
+}
+
+p {
+    line-height: 2.0;
+}
+
+li {
+    line-height: 2.0;
+}
+
+
+/* Override B3 .panel adding a subtly transparent background */
+.panel {
+    background-color: rgba(255, 255, 255, 0.9);
+}
+
+.toppy {
+    padding-top: 70px;
+}
+
+.comment {
+    /* Src: http://codepen.io/martinwolf/pen/qlFdp */
+    display: block; /* Fallback for non-webkit */
+    display: -webkit-box;
+    margin: 0 auto;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.p_result{
+    line-height: 1.8;
+}
+
+.margin-base-vertical {
+    margin: 40px 0;
+}
+
+.wor_copyright {
+    font-family: "Abel", Arial, sans-serif;
+    font-size: 12px;
+}
+
+
+/*Add vertical space above divs*/
+.top-space-5 { 
+    margin-top:5px;
+}
+
+.top-space-10 { 
+    margin-top:10px;
+}
+
+.top-space { 
+    margin-top:10px;
+}
+
+.top-space-15 { 
+    margin-top:15px;
+}
+
+.top-space-20 { 
+    margin-top:20px;
+}
+
+.top-space-25 { 
+    margin-top:25px;
+}
+
+.top-space-30 { 
+    margin-top:30px;
+}
+
+.top-space-40 { 
+    margin-top:40px;
+}
+
+.top-space-50 { 
+    margin-top:50px;
+}
+
+/*Logo*/
+img.logo{
+    max-height: 100px;
+    max-width: 250px;
+}
+
+grey-text {
+    color: #7e7e7e;
+    margin-top: 5px;
+}
+
+.toppy-10 {
+    padding-top: 10px;
+}
+
+.toppy-20 {
+    padding-top: 20px;
+}
+
+.toppy-30 {
+    padding-top: 30px;
+}
diff --git a/templates/bmi.html b/templates/bmi.html
@@ -0,0 +1,99 @@
+<!doctype html>
+
+<head>
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-38578610-5"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag() { dataLayer.push(arguments); }
+        gtag('js', new Date());
+
+        gtag('config', 'UA-38578610-5');
+    </script>
+    <title>BMI</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- Bootstrap -->
+    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" />
+    <link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css?family=Abel|Open+Sans:400,600" rel="stylesheet">
+    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
+    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+    <!-- BMI Calculator stylesheet -->
+    <link href="/static/css/bmi_style.css" rel="stylesheet">
+</head>
+
+<body>
+    <div class="container toppy">
+        <div class="row">
+            <div class="col-md-6 col-md-offset-3">
+                <h1 class="margin-base-vertical text-center">BMI calculator!</h1>
+                <p class="input-group">
+                    <span class="input-group-addon">
+                        <span class="icon-arrow-right"></span>
+                    </span>
+                        <input type="text" id="weight" class="form-control input-lg" name="weight" placeholder="Enter the weight in kilograms:">
+                </p>
+                <p class="input-group">
+                    <span class="input-group-addon">
+                        <span class="icon-arrow-right"></span>
+                    </span>
+                        <input type="text" id="height" class="form-control input-lg" name="height" placeholder="Enter the height in meters:">
+                </p>
+                <p class="text-center top-space-40">
+                    <button type="submit" class="btn btn-success btn-lg" id="getBMI">Calculate!</button>
+                </p>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-md-6 col-md-offset-3">
+                <p class="text-center top-space-20" id="resultDiv">
+                </p>
+            </div>
+        </div>
+    </div>
+    <script>
+        $("document").ready(function () {
+            $("#getBMI").click(function () {
+                var weight = $('#weight').val();
+                var height = $('#height').val();
+                console.log(weight);
+                console.log(height);
+
+                if ((weight != parseFloat(weight,10)) && (height != parseFloat(height,10))) {
+                    $("#weight").css('border', 'solid 2px red');
+                    $("#height").css('border', 'solid 2px red');
+                    $("#resultDiv").text('Please enter a valid float value for weight and height!');
+                    $("#resultDiv").css('color', 'red');
+                } else if ((weight != parseFloat(weight,10)) && (height == parseFloat(height,10))){
+                    $("#weight").css('border', 'solid 2px red');
+                    $("#resultDiv").text('Please enter a valid float value for weight!');
+                    $("#resultDiv").css('color', 'red');
+                } else if ((weight == parseFloat(weight,10)) && (height != parseFloat(height,10))){
+                    $("#height").css('border', 'solid 2px red');
+                    $("#resultDiv").text('Please enter a valid float value for height!');
+                    $("#resultDiv").css('color', 'red');
+                } else {
+                    $("#weight").css('border', 'solid 1px #ccc');
+                    $("#height").css('border', 'solid 1px #ccc');
+                    var callDetails = {
+                        type: 'POST',
+                        url: '/bmi',
+                        data: {
+                            'weight': weight ,
+                            'height': height 
+                        } 
+                    };
+
+                    $.ajax(callDetails).done(function (bmi) {
+                        console.log('Hello! I am in the done part of the ajax call');
+                        console.log(bmi);
+                        $("#resultDiv").css('color', 'black');
+                        $("#resultDiv").text('Your BMI is: ' + bmi.answer);
+                    });
+                }    
+           });
+        });
+    </script>
+</body>
+
+</html>