javascript og lit css

2024-08-15 14:38:20 +02:00 · 2024-08-15 14:38:20 +02:00 · fe0b5a944b
commit fe0b5a944b
parent fcbb649185
8 changed files with 156 additions and 103 deletions
--- a/intro_js/betale.html
+++ b/intro_js/betale.html
@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>JS intro variable opertaor og parametre</title>
+</head>
+<style>
+    #app {
+        display: grid;
+    }
+</style>
+
+<body>
+    Per har betalt:<input type="number" id="per"><br />
+    Paal har betalt:<input type="number" id="paal"><br/>
+    Espen har betalt:<input type="number" id="espen"><br/>
+    <button onclick="calculate()">Beregne</button>
+
+    <div id="app"></div>
+
+    <script>
+
+        function calculate() {
+            let amountPayedPer = document.getElementById("per").valueAsNumber;
+            let amountPayedPaal = document.getElementById("paal").valueAsNumber;
+            let amountPayedEspen = document.getElementById("espen").valueAsNumber;
+            let totalAmountPayed = amountPayedPer + amountPayedPaal + amountPayedEspen;
+            let costPerPerson = totalAmountPayed / 3;
+            let owesPer = costPerPerson - amountPayedPer;
+            let owesPaal = costPerPerson - amountPayedPaal;
+            let owesEspen = costPerPerson - amountPayedEspen;
+
+            document.getElementById("app").innerHTML = /*HTML*/ `
+             Per har betalt: ${amountPayedPer}<br/>
+             Paal har betalt: ${amountPayedPaal}<br/>
+             Espen har betalt: ${amountPayedEspen}<br/>
+             Sum betalt: ${totalAmountPayed}<br/>
+             Kostnad per person: ${costPerPerson}<br/>
+             Per skylder: ${owesPer}<br/>
+             Paal skylder: ${owesPaal}<br/>
+             Espen skylder: ${owesEspen}<br/>
+        `;
+        }
+    </script>
+</body>
+
+</html>