Ura - 03. 12. 2022

2022-12-03 17:42:56 +01:00 · 2022-12-03 17:42:56 +01:00 · ab74551321
commit ab74551321
4 changed files with 107 additions and 0 deletions
--- a/.prettierrc
+++ b/.prettierrc
--- a/index.html
+++ b/index.html
@ -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>
--- a/index.js
+++ b/index.js
@ -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;
+}
--- a/style.css
+++ b/style.css
@ -0,0 +1,10 @@
+table {
+  border-collapse: collapse;
+}
+
+td,
+th {
+  border: 1px solid;
+  width: 200px;
+  text-align: center;
+}