can somone add to bootstrap template to this code. can you send the link to jq44
ID: 3891891 • Letter: C
Question
can somone add to bootstrap template to this code. can you send the link to jq44@yahoo.com or put it on google drive and give the link will give a thumbs up <!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" /> <script src="BMI.js"></script> </head> <body> <div class="calculator"> <h1>BMI Calculator</h1> <div class="form"> <label> Weight <input type="text" id="weight" /> in kg </label> <label> Height <input type="text" id="height" /> in cm </label> <button id="btnCalculateBMI">Calculate BMI</button> </div> <div class="bmiResult"> <h2>Your Body Mass Index =</h2> <span id="result">0.00</span> </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; padding: 12px 15px; margin: 0 auto; box-shadow: 3px 3px 4px 0 #CCC; } 3. Fix some of the problems with the provided starter code, e.g., lack of error checking, poor formatting, poor modularization of the code, etc. The goals of this step are twofold: (1) improve the app (for the benefit of the user); (2) improve the quality of the code (for the benefit of the "development team", essentially yourself!) 4. Modify the example in a meaningful way, replacing the temperature conversion functionality with other types of conversion, such as: metric to US units for length, mass, etc. 5. Improve the visual aspects of the app (use a Bootstrap template). 6. Test your app after every significant change/addition. 7. 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 8. Submit the final package via Canvas. Minimum requirements: Your app must be your own work. If you use a site, textbook example or any other source as "inspiration" along the way, please make a note of it in your report Your app should perform a (set of) meaningful task(s) Your page should demonstrate separation between presentation (CSS Bootstrap), content HTMLS), and interactive functionality (JavaScript).Explanation / Answer
//Using bootstrap 4
//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>
//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%;
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.