geir/startit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

javascript og lit css

Browse source
This commit is contained in:
Geir Okkenhaug Jerstad 2024-08-15 14:38:20 +02:00
parent fcbb649185
commit fe0b5a944b
8 changed files with 156 additions and 103 deletions
Download patch file Download diff file Expand all files Collapse all files

49
intro_js/betale.html Normal file
View file

@ -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>

29
intro_js/index.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
</div>
<script>
add('green', 500, "Det", 'div');
add('red', 250, "var", 'h3');
add('blue', 600, "en", 'li');
add('rgb(200, 200, 42)', 500, "gang", 'span');
function add(color, size, word, tagName) {
let existingHtml = document.getElementById('app').innerHTML;
let newHtml = /*HTML*/ `
<${tagName} style="color:${color}; font-size: ${size}%;">${word}</${tagName}>
`;
document.getElementById('app').innerHTML = existingHtml + newHtml ;
}
</script>
</body>
</html>

0
intro_js/intro.js Normal file
View file