first commit

SimenWG · Mar 18, 2024 · 8c503d4 · 8c503d4
commit 8c503d4
Show file tree

Hide file tree

Showing 4 changed files with 207 additions and 0 deletions.
diff --git a/1repmax-nettside b/1repmax-nettside
diff --git a/index.html b/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Kaloriteller</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <nav class="navbar">
+        <div class="container">
+            <h1 class="logo">Kaloriteller</h1>
+            <ul class="nav-links">
+                <li><a href="./1repmax-nettside/index.html">1 Rep Max Calculator</a></li>
+                <li><a href="#">Om</a></li>
+                <li><a href="#">Kontakt</a></li>
+            </ul>
+        </div>
+    </nav>
+
+    <div class="container">
+        <h2>Legg til matvare</h2>
+        <div id="inputForm">
+            <label for="foodItem">Velg matvare:</label>
+            <select id="foodItem">
+                <option value="kylling">Kylling</option>
+                <option value="kjøttdeig">Kjøttdeig</option>
+                <option value="egg">Egg</option>
+                <option value="melk">Melk</option>
+                <option value="havregryn">Havregryn</option>
+                <option value="redbull250">Redbull</option>
+                <option value="burn">Burn Original</option>
+                <option value="monster">Monster Original</option>
+                <option value="sjokolademelk">Sjokolademelk</option>
+                <option value="ris">Ris</option>
+            </select>
+            <label for="amount">Mengde:</label>
+            <input type="number" id="amount" min="0" step="any">
+            <button onclick="addFood()">Legg til matvare</button>
+        </div>
+        <div id="foodList">
+            <h2>Spiste matvarer:</h2>
+            <ul id="list"></ul>
+        </div>
+        <div id="calories"></div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,79 @@
+// script.js
+const foodCalories = {
+    kylling: 165,
+    kjøttdeig: 250,
+    egg: 78,
+    melk: 42,
+    burn: 63,
+    havregryn: 389,
+    redbull250: 110,
+    monster: 230,
+    sjokolademelk: 155,
+    ris: 130
+};
+
+let totalCalories = 0;
+
+function addFood() {
+    const foodItem = document.getElementById("foodItem").value;
+    const amount = parseFloat(document.getElementById("amount").value);
+
+    if (isNaN(amount) || amount <= 0) {
+        alert("Ugyldig mengde. Vennligst skriv inn en gyldig verdi.");
+        return;
+    }
+
+    const calories = foodCalories[foodItem] * (amount / 100); 
+    totalCalories += calories;
+
+    const listItem = document.createElement("li");
+    listItem.textContent = `${amount} g/ml ${foodItem}: ${calories.toFixed(2)} kalorier`;
+    listItem.setAttribute("data-calories", calories);
+    listItem.setAttribute("data-amount", amount);
+    listItem.setAttribute("data-foodItem", foodItem);
+
+    // Legg til knapp for å fjerne matvaren
+    const removeButton = document.createElement("button");
+    removeButton.textContent = "Fjern";
+    removeButton.onclick = function() {
+        removeFood(listItem);
+    };
+    listItem.appendChild(removeButton);
+
+    // Legg til knapp for å doble mengden
+    const doubleButton = document.createElement("button");
+    doubleButton.textContent = "Doble";
+    doubleButton.onclick = function() {
+        doubleAmount(listItem);
+    };
+    listItem.appendChild(doubleButton);
+
+    document.getElementById("list").appendChild(listItem);
+
+    updateCaloriesDisplay();
+}
+
+function removeFood(item) {
+    const amount = parseFloat(item.getAttribute("data-amount"));
+    const calories = parseFloat(item.getAttribute("data-calories"));
+    totalCalories -= calories;
+    item.remove();
+    updateCaloriesDisplay();
+}
+
+function doubleAmount(item) {
+    const amount = parseFloat(item.getAttribute("data-amount"));
+    const foodItem = item.getAttribute("data-foodItem");
+    const calories = foodCalories[foodItem] * ((amount * 2) / 100); // Dobler mengden
+    totalCalories += calories;
+    item.textContent = `${(amount * 2).toFixed(2)} g/ml ${foodItem}: ${calories.toFixed(2)} kalorier`;
+
+    item.setAttribute("data-amount", amount * 2);
+
+    updateCaloriesDisplay();
+}
+
+function updateCaloriesDisplay() {
+    const caloriesDisplay = document.getElementById("calories");
+    caloriesDisplay.textContent = `Totalt kalorier spist i dag: ${totalCalories.toFixed(2)}`;
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,77 @@
+
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+}
+
+.navbar {
+    background-color: #333;
+    color: #fff;
+    padding: 10px 0;
+}
+
+.container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.logo {
+    margin: 0;
+    font-size: 24px;
+}
+
+.nav-links {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.nav-links li {
+    display: inline;
+    margin-left: 20px;
+}
+
+.nav-links li a {
+    color: #fff;
+    text-decoration: none;
+}
+
+.nav-links li a:hover {
+    text-decoration: underline;
+}
+
+#foodList {
+    margin-top: 20px;
+}
+
+#foodList h2 {
+    color: #333;
+}
+
+#list {
+    list-style-type: none;
+    padding: 0;
+}
+
+#list li {
+    margin-bottom: 10px;
+    padding: 10px;
+    background-color: #f9f9f9;
+    border-radius: 5px;
+}
+
+#list li button {
+    margin-left: 10px;
+    padding: 5px 10px;
+    background-color: #dc3545;
+    color: #fff;
+    border: none;
+    border-radius: 3px;
+    cursor: pointer;
+}
+
+#list li button:hover {
+    background-color: #c82333;
+}