Academic Integrity: tutoring, explanations, and feedback — we don’t complete graded work or submit on a student’s behalf.

//html: <!DOCTYPE html> <html> <head> <title>Body Mass Index-BMI</title> <meta c

ID: 3907171 • Letter: #

Question


//html:
<!DOCTYPE html> <html> <head> <title>Body Mass Index-BMI</title> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css" type="text/css" title="OrangeLook" /> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <script src="BMI.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-sm"> <div class="card text-center"> <div class="card-header"> <h1>BMI Calculator</h1> </div> <div class="card-body"> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">Weight</span> </div> <input type="text" class="form-control" id="weight"> <div class="input-group-append"> <span class="input-group-text">in kg</span> </div> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">Height</span> </div> <input type="text" class="form-control" id="height"> <div class="input-group-append"> <span class="input-group-text">in kg</span> </div> </div> <button id="btnCalculateBMI" class="btn btn-outline-warning btn-block">Calculate BMI</button> </div> <div class="card-footer text-muted"> <div class="bmiResult"> <h2>Your Body Mass Index =</h2> <span class="badge badge-pill badge-info" id="result">0.00</span> </div> </div> </div> </div> </div> </div> </body> </html> //Js:
var BMI = { init: function() { BMI.buttonClick(); }, buttonClick: function() { var button = document.getElementById('btnCalculateBMI'); button.onclick = function() { BMI.checkValues(); BMI.calculateBMI(); }; }, calculateBMI: function() { var height = parseFloat(document.getElementById('height').value); var weight = parseFloat(document.getElementById('weight').value); var result = document.getElementById('result'); result.innerHTML = (weight * 100 * 100/ (height * height)).toFixed(2); }, checkValues: function() { var flag=0; var height = document.getElementById('height').value; var weight = document.getElementById('weight').value; if(!weight.match(/S/)) { alert ('Empty value in weight'); flag=1; } if(!height.match(/S/) && flag==0) { alert ('Empty value in height'); } } }; window.onload = BMI.init; //css:
html { font: 14px Arial; } h1 { font-size: 16px; color: #333; text-align: center; text-transform: uppercase; } .calculator, label { background: #f7f7f7; padding: 10px; border: 1px solid #B4B4B4; border-radius: 10px; } .calculator { width: 400px; margin: 50px auto; min-height: 300px; } label { color: #333; display: block; font-weight: bold; margin-bottom: 10px; text-align: right; margin-bottom: 20px; } input { border: 2px solid #CCC; border-radius: 5px; padding: 5px; width: 250px; } button, .result span { border-radius: 10px; } button { background: #e6b52c; border-radius: 8px; cursor: pointer; display: block; padding: 8px 25px; border: 1px solid #BEA280; color: #fff; font-weight: bold; } button:hover { background: #dd9917; } .bmiResult { text-align: center; margin-top: 15px; } .bmiResult span { width: 70px; background: #F2F4F6; display: block; font-size: 24px; color: #EFAF37; margin: 0 auto; box-shadow: 3px 3px 4px 0 #CCC; padding:10px; } .container{ width: 50%; } //html:
<!DOCTYPE html> <html> <head> <title>Body Mass Index-BMI</title> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css" type="text/css" title="OrangeLook" /> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <script src="BMI.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-sm"> <div class="card text-center"> <div class="card-header"> <h1>BMI Calculator</h1> </div> <div class="card-body"> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">Weight</span> </div> <input type="text" class="form-control" id="weight"> <div class="input-group-append"> <span class="input-group-text">in kg</span> </div> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">Height</span> </div> <input type="text" class="form-control" id="height"> <div class="input-group-append"> <span class="input-group-text">in kg</span> </div> </div> <button id="btnCalculateBMI" class="btn btn-outline-warning btn-block">Calculate BMI</button> </div> <div class="card-footer text-muted"> <div class="bmiResult"> <h2>Your Body Mass Index =</h2> <span class="badge badge-pill badge-info" id="result">0.00</span> </div> </div> </div> </div> </div> </div> </body> </html> //Js:
var BMI = { init: function() { BMI.buttonClick(); }, buttonClick: function() { var button = document.getElementById('btnCalculateBMI'); button.onclick = function() { BMI.checkValues(); BMI.calculateBMI(); }; }, calculateBMI: function() { var height = parseFloat(document.getElementById('height').value); var weight = parseFloat(document.getElementById('weight').value); var result = document.getElementById('result'); result.innerHTML = (weight * 100 * 100/ (height * height)).toFixed(2); }, checkValues: function() { var flag=0; var height = document.getElementById('height').value; var weight = document.getElementById('weight').value; if(!weight.match(/S/)) { alert ('Empty value in weight'); flag=1; } if(!height.match(/S/) && flag==0) { alert ('Empty value in height'); } } }; window.onload = BMI.init; //css:
html { font: 14px Arial; } h1 { font-size: 16px; color: #333; text-align: center; text-transform: uppercase; } .calculator, label { background: #f7f7f7; padding: 10px; border: 1px solid #B4B4B4; border-radius: 10px; } .calculator { width: 400px; margin: 50px auto; min-height: 300px; } label { color: #333; display: block; font-weight: bold; margin-bottom: 10px; text-align: right; margin-bottom: 20px; } input { border: 2px solid #CCC; border-radius: 5px; padding: 5px; width: 250px; } button, .result span { border-radius: 10px; } button { background: #e6b52c; border-radius: 8px; cursor: pointer; display: block; padding: 8px 25px; border: 1px solid #BEA280; color: #fff; font-weight: bold; } button:hover { background: #dd9917; } .bmiResult { text-align: center; margin-top: 15px; } .bmiResult span { width: 70px; background: #F2F4F6; display: block; font-size: 24px; color: #EFAF37; margin: 0 auto; box-shadow: 3px 3px 4px 0 #CCC; padding:10px; } .container{ width: 50%; } Goal Design a simple, visually pleasant, PHP-based "app" that performs a useful function, namely, unit conversion Recommended Procedure 1. Start from your Project 3 for the basic logic (which you will convert from JavaScript to PHP) and the look-and-feel (HTML, CSS, Bootstrap) (which you can reuse). 2. Modify the example so that the conversion must take place on the server (PHP code), not on the client. 3. Test your app after every significant change /addition and document all meaningful changes in your report. Once you've reached a point where your app is complete and fully functional in the browser of your choice (Chrome, Firefox, Opera, or Safari), prepare the final package (single zip, all that is needed, and nothing else) Submit the final package via Canvas. 4. 5. Minimum requirements: Your app must be your own work. If you use a site, textbook example or any other source as Your page should demonstrate a basic understanding of using forms and PHP to produce The conversion must take place on the server (PHP code), not on the client (JavaScript code Your page should demonstrate separation between presentation (CSS Bootstrap), content "inspiration" along the way, please make a note of it in your report. interactive, "data-driven" web pages. from Project 3) (HTML5), backend processing (PHP), and interactive functionality.

Explanation / Answer

//index.php

// No major change made in html code part. php coded embbeded into same file

// Need AMPP Server to run this program.

// USE XAMPP from apache friends website. Run the apache server and paste this code into

// "D: mpphtdocsmi" folder

//index.php

<!DOCTYPE html>

<html>

<head>

<title>Body Mass Index-BMI</title>

<meta charset="UTF-8">

<link rel="stylesheet" href="style.css" type="text/css" title="OrangeLook" />

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"

crossorigin="anonymous">

</head>

<body>

<div class="container">

<div class="row">

<div class="col-sm">

<div class="card text-center">

<div class="card-header">

<h1>BMI Calculator</h1>

</div>

<form name="form1" method="post" action="index.php">

<div class="card-body">

<div class="input-group mb-3">

<div class="input-group-prepend">

<span class="input-group-text">Weight</span>

</div>

<?php

// weight and height two variable defined here and on POST event the value is stored into this and displayed in textbox

$weight='';

$height='';

//below line to check whether submit button clicked or not if it is clicked then height and wegiht value stored in it and same is displayed in text box.

if(isset($_POST['btnCalculateBMI'])){

$weight = $_POST['weight'];

$height = $_POST['height'];

}

?>

<input type="text" class="form-control" id="weight" name="weight" value=<?php echo $weight; ?> >

<div class="input-group-append">

<span class="input-group-text">in kg</span>

</div>

</div>

<div class="input-group mb-3">

<div class="input-group-prepend">

<span class="input-group-text">Height</span>

</div>

<input type="text" class="form-control" id="height" name="height" value=<?php echo $height; ?>>

<div class="input-group-append">

<span class="input-group-text">in cms</span>

</div>

</div>

<button id="btnCalculateBMI" type="submit" name="btnCalculateBMI" class="btn btn-outline-warning btn-block">Calculate BMI</button>

</div>

</form>

<?php

// this php code is a part of index.php file.

// declare a variable bmi to store result in it.

$bmi = 0.0;

$msg = 'No Info';

if(isset($_POST['btnCalculateBMI']))

{

// validation for numbers entered in height and weight

if($_POST['height'] != '' && $_POST['weight'] != '')

{

//store text box value to a variable for processing

$height = $_POST['height'];

$weight = $_POST['weight'];

//bmi calculation

$bmi = ($weight * 100 * 100) / ($height*$height) ;

//result is verified by for bmi index and display message.

if($bmi > 40.0)

{

$msg = "Very Severely Obese";

}else if($bmi > 35.0 && $bmit < 40.0){

$msg = "Severely Obese";

}else if($bmi > 30.0 && $bmi < 35.0){

$msg = "Moderately Obese";

}else if($bmi > 25.0 && $bmi < 30.0){

$msg = "Moderately Obese";

}else if($bmi > 18.5 && $bmi < 25.0){

$msg = "Moderately Obese";

}else if($bmi > 16.0 && $bmi < 18.5){

$msg = "Underweight";

}else if($bmi > 15.0 && $bmi < 16.0){

$msg = "Severely Underweight";

}else if($bmi < 15.0){

$msg = "Very Severely Underweight";

}

}else{

$msg = "Enter weight and height value";

}

}

?>

<div class="card-footer text-muted">

<div class="bmiResult">

<h2>Your Body Mass Index</h2>

<span class="badge badge-pill badge-info" id="result"><?php echo round($bmi,1,PHP_ROUND_HALF_UP); ?></span>

<br>

<span class="badge badge-pill badge-info" id="msg"><?php echo $msg; ?></span>

</div>

</div>

</div>

</form>

</div>

</div>

</div>

</body>

</html>

// style.css

// paste this code in a new file named style.css

html {

font: 14px Arial;

}

h1 {

font-size: 16px;

color: #333;

text-align: center;

text-transform: uppercase;

}

.calculator, label {

background: #f7f7f7;

padding: 10px;

border: 1px solid #B4B4B4;

border-radius: 10px;

}

.calculator {

width: 400px;

margin: 50px auto;

min-height: 300px;

}

label {

color: #333;

display: block;

font-weight: bold;

margin-bottom: 10px;

text-align: right;

margin-bottom: 20px;

}

input {

border: 2px solid #CCC;

border-radius: 5px;

padding: 5px;

width: 250px;

}

button, .result span {

border-radius: 10px;

}

button {

background: #e6b52c;

border-radius: 8px;

cursor: pointer;

display: block;

padding: 8px 25px;

border: 1px solid #BEA280;

color: #fff;

font-weight: bold;

}

button:hover {

background: #dd9917;

}

.bmiResult {

text-align: center;

margin-top: 15px;

}

.bmiResult span {

width: 170px;

background: #F2F4F6;

display: block;

font-size: 24px;

color: #EFAF37;

margin: 0 auto;

box-shadow: 3px 3px 4px 0 #CCC;

padding:10px;

}

#msg{

width: 270px;

background: #F2F4F6;

display: block;

font-size: 22px;

color: #EFAF39;

margin: 0 auto;

box-shadow: 3px 3px 4px 0 #CCC;

padding:10px;

}

.container{

width: 50%;

}

Related Questions

//Write functions sum and printEvenIndex //Write function title of fun, change,
Question #3844942
//You should add code to the NavigateMaze command to make the robot go from the
Question #3794904
//\"It should display2,4,8,8,12,34,56,56,56,56,56,62,70,89 But it displayseveryt
Question #3611440
//\\\\//\\\\//\\\\//\\\\//\\\\//\\\\//\\\\//\\\\//\\\\//\\\\//\\\\//\\\\//\\\\//
Question #3884940
//add code function to print the shortest path at the end import java.io.*; impo
Question #3711583
//add introductory comments # include <iostream> using namespace std; // add com
Question #666419
//asked how to do this 2 days ago and no response... Need to know how for a test
Question #3686100
//at the end of the program, the word \'response is shown error. could you help
Question #3738340

Navigate

Previous
//how to implement boolean onDry on the compiler and ask the question that the h
Next
//ilearn.laccd.edu/courses/48546/discussion topics/392408 a t G Google This is a

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.