Skip to content

Commit

Permalink
New features added.
Browse files Browse the repository at this point in the history
  • Loading branch information
@SubhaBhatta
SubhaBhatta committed Oct 5, 2024
1 parent b80debf commit 46208b8
Show file tree
Hide file tree
Showing 3 changed files with 130 additions and 95 deletions.
67 changes: 56 additions & 11 deletions Web development/BMI Calculator/app.js
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,60 @@
document.getElementById("submit").addEventListener("click", bmiCalculator);
const unitSelect = document.getElementById('unit');
const heightInput = document.getElementById('height');
const weightInput = document.getElementById('weight');
const heightUnit = document.getElementById('height-unit');
const weightUnit = document.getElementById('weight-unit');
const calculateBtn = document.getElementById('calculate');
const resetBtn = document.getElementById('reset');
const resultDiv = document.getElementById('result');

function bmiCalculator() {
var cm = parseInt(document.getElementById("cm").value);
var kg = parseFloat(document.getElementById("kg").value);
unitSelect.addEventListener('change', updateUnits);
calculateBtn.addEventListener('click', calculateBMI);
resetBtn.addEventListener('click', resetCalculator);

var bmi;
var newCm= parseFloat(cm/100);
function updateUnits() {
if (unitSelect.value === 'metric') {
heightUnit.textContent = 'cm';
weightUnit.textContent = 'kg';
} else {
heightUnit.textContent = 'in';
weightUnit.textContent = 'lbs';
}
}

bmi = kg / (newCm * newCm);
bmi = bmi.toFixed(1);
// console.log(bmi);
function calculateBMI() {
const height = parseFloat(heightInput.value);
const weight = parseFloat(weightInput.value);

document.getElementById("result").innerHTML = "Your BMI is " + bmi;
}
if (isNaN(height) || isNaN(weight) || height <= 0 || weight <= 0) {
resultDiv.innerHTML = '<p class="error">Please enter valid height and weight values.</p>';
return;
}

let bmi;
if (unitSelect.value === 'metric') {
bmi = weight / ((height / 100) ** 2);
} else {
bmi = (weight / (height ** 2)) * 703;
}

const category = getBMICategory(bmi);
resultDiv.innerHTML = `
<p>Your BMI is ${bmi.toFixed(1)}</p>
<p>Category: ${category}</p>
`;
}

function getBMICategory(bmi) {
if (bmi < 18.5) return 'Underweight';
if (bmi < 25) return 'Normal weight';
if (bmi < 30) return 'Overweight';
return 'Obesity';
}

function resetCalculator() {
heightInput.value = '';
weightInput.value = '';
resultDiv.innerHTML = '';
unitSelect.value = 'metric';
updateUnits();
}
48 changes: 29 additions & 19 deletions Web development/BMI Calculator/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,27 +9,37 @@
</head>

<body>
<h1> BMI Calculator</h1>
<div id="container" class="container">

<label for='cm'>Height in cm</label>
<input type="text" name='cm' id="cm">

<label for='kg'>Weight in kg</label>
<input type="text" name='kg' id="kg">

<input type="submit" id="submit" class='submit' value="Calculate">

<div id="result" class='result'></div>

<div id="info" class='info'>
<h2>BMI Standards:</h2>
Under Weight = Less than 18.6<br />
Normal Range = 18.6 and 24.9<br />
Overweight = Greater than 24.9<br />
<div class="container">
<h1>Enhanced BMI Calculator</h1>
<div class="input-group">
<label for="unit">Unit System:</label>
<select id="unit">
<option value="metric">Metric (cm, kg)</option>
<option value="imperial">Imperial (in, lbs)</option>
</select>
</div>
<div class="input-group">
<label for="height">Height:</label>
<input type="number" id="height" step="0.1" required>
<span id="height-unit">cm</span>
</div>
<div class="input-group">
<label for="weight">Weight:</label>
<input type="number" id="weight" step="0.1" required>
<span id="weight-unit">kg</span>
</div>
<button id="calculate">Calculate BMI</button>
<button id="reset">Reset</button>
<div id="result" class="result"></div>
<div class="info">
<h2>BMI Categories:</h2>
<p>Underweight: Less than 18.5</p>
<p>Normal weight: 18.5 to 24.9</p>
<p>Overweight: 25 to 29.9</p>
<p>Obesity: 30 or greater</p>
</div>

</div>

<script src="app.js"> </script>

</body>
Expand Down
110 changes: 45 additions & 65 deletions Web development/BMI Calculator/styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,87 +1,67 @@
* {
padding: 0;
margin: 0;
font-family: 'Lato', Arial, sans-serif;
font-size: 100%;
line-height: 1.25;
color: #FFF;
font-family: 'Arial', sans-serif;
box-sizing: border-box;
}

body {
background: #8e44e2;
color: rgba(0, 0, 0, 0.45);
color: #FFF;
line-height: 1.6;
padding: 20px;
}

.container {
margin: 1% auto 0;
width: 65%;
}

@media (max-width: 600px) {
.container {
margin: 5% auto 0;
width: 75%;
}
max-width: 600px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 8px;
}

h1 {
width: 100%;
font-size: 2em;
h1, h2 {
text-align: center;
margin: 2% auto;
}

.info {
background: rgba(255, 255, 255, .09);
padding: 2%;
margin-bottom: 20px;
}

.result {
font-size: 35px;
text-align: center;
.input-group {
margin-bottom: 15px;
}

label {
margin: 3% 0 1%;
position: relative;
float: left;
}

input, textarea, select {
line-height: 1.5;
font-size: 1.4em;
padding: 5px 10px;
border: 2px solid #FFF;
color: #fff;
display: block;
width: 100%;
background: transparent;
box-sizing: border-box;
outline: 0;
margin-bottom: 5px;
}

.display-input {
input[type="number"], select {
width: 100%;
height: 100px;
text-align: center;
background-color: #1f80c9;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
background: rgba(255, 255, 255, 0.2);
color: #FFF;
}

.submit {
width: 150px;
border-radius: 5px;
border-style: none;
background: #8e44e2;
button {
display: inline-block;
background: #4CAF50;
color: #FFF;
font-size: 25px;
margin: 5% auto;
border: 2px solid #FFF;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: all .6s;
margin-right: 10px;
}
button:hover {
background: #45a049;
}
.result {
margin-top: 20px;
padding: 15px;
background: rgba(0, 0, 0, 0.2);
border-radius: 4px;
}
.info {
margin-top: 20px;
background: rgba(255, 255, 255, 0.1);
padding: 15px;
border-radius: 4px;
}

.submit:hover {
background: #FFF;
color: #8e44e2;
.error {
color: #FF6B6B;
margin-top: 5px;
}

0 comments on commit 46208b8

Please sign in to comment.