2024-08-15 14:38:20 +02:00
|
|
|
<!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 {
|
2024-08-16 14:01:43 +02:00
|
|
|
background-color: aqua;
|
2024-08-15 14:38:20 +02:00
|
|
|
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>
|
