spletne-aplikacije/bmi-input
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Ura - 03. 12. 2022

Browse Source
This commit is contained in:
Aiken Tine Ahac 2022-12-03 17:42:56 +01:00
commit ab74551321
4 changed files with 107 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
.prettierrc Normal file
View File

33
index.html Normal file
View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Spletne</title>
<link rel="stylesheet" href="style.css" />
<script src="index.js" defer></script>
</head>
<body>
<h1>Dinamične tabele</h1>
<form name="bmi-form">
Višina: <input type="text" name="height" /> cm
<br />
Teža: <input type="text" name="weight" /> kg
<br />
<input id="submit" type="submit" value="Dodaj" />
</form>
<br />
<table id="bmi-table">
<tr>
<th>Višina (cm)</th>
<th>Teža (kg)</th>
<th>BMI</th>
<th>Status</th>
</tr>
</table>
</body>
</html>

64
index.js Normal file
View File

@ -0,0 +1,64 @@
const form = document.forms["bmi-form"];
const table = document.getElementById("bmi-table");
function addData() {
const newRow = document.createElement("tr");
const height = form["height"].value;
const weight = form["weight"].value;
const bmi = calculateBmi(height, weight);
const heightCell = document.createElement("td");
heightCell.innerText = `${height}cm`;
const weightCell = document.createElement("td");
weightCell.innerText = `${weight}kg`;
const bmiCell = document.createElement("td");
bmiCell.innerText = bmi;
let bmiStatus;
let color;
if (bmi <= 18.5) {
bmiStatus = "Underweight";
color = "red";
} else if (bmi > 18.5 && bmi <= 25) {
bmiStatus = "Normal";
color = "green";
} else if (bmi > 25 && bmi <= 30) {
bmiStatus = "Overweight";
color = "yellow";
} else if (bmi > 30) {
bmiStatus = "Obese";
color = "red";
} else {
bmiStatus = "Unkown";
color = "blue";
}
const bmiStatusCell = document.createElement("td");
bmiStatusCell.innerText = bmiStatus;
newRow.style.backgroundColor = color;
newRow.appendChild(heightCell);
newRow.appendChild(weightCell);
newRow.appendChild(bmiCell);
newRow.appendChild(bmiStatusCell);
table.appendChild(newRow);
form.reset();
return false;
}
form.onsubmit = addData;
function calculateBmi(height, weight) {
height = height / 100;
const bmi = weight / Math.pow(height, 2);
return bmi;
}

10
style.css Normal file
View File

@ -0,0 +1,10 @@
table {
border-collapse: collapse;
}
td,
th {
border: 1px solid;
width: 200px;
text-align: center;
}