javascript og lit css
This commit is contained in:
parent
fcbb649185
commit
fe0b5a944b
|
|
@ -2,4 +2,39 @@ let number = 0;
|
||||||
while (number <= 12) {
|
while (number <= 12) {
|
||||||
console.log(number);
|
console.log(number);
|
||||||
number = number + 2;
|
number = number + 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
let result = 1;
|
||||||
|
let counter = 0;
|
||||||
|
while (counter < 10) {
|
||||||
|
result = result * 2;
|
||||||
|
counter = counter + 1;
|
||||||
|
}
|
||||||
|
console.log(result);
|
||||||
|
|
||||||
|
for (let number = 0; number <= 12; number = number +2){
|
||||||
|
console.log(number);
|
||||||
|
;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let current = 20; ;current = current +1){
|
||||||
|
if (current % 7 == 0){
|
||||||
|
console.log(current);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
switch (prompt("What is the weather like?")) {
|
||||||
|
case "rainy":
|
||||||
|
console.log("Remember to bring an umbrella.");
|
||||||
|
break;
|
||||||
|
case "sunny":
|
||||||
|
console.log("Dress lightly.");
|
||||||
|
case "cloudy":
|
||||||
|
console.log("Go outside.");
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
console.log("Unknown weather type!");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,12 @@
|
||||||
div.page{
|
div.page{
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-areas: "header header """"";
|
grid-template-columns: 1fr 4fr;
|
||||||
|
grid-template-rows: 20px 10fr 20px;
|
||||||
|
grid-template-areas:
|
||||||
|
'menu header'
|
||||||
|
'menu mainContent'
|
||||||
|
'menu footer'; ;
|
||||||
}
|
}
|
||||||
div.header {
|
div.header {
|
||||||
background-color: aquamarine;
|
background-color: aquamarine;
|
||||||
|
|
@ -34,6 +39,18 @@
|
||||||
background-color: crimson;
|
background-color: crimson;
|
||||||
grid-area: footer;
|
grid-area: footer;
|
||||||
}
|
}
|
||||||
|
@media only screen and (max-width: 400px) {
|
||||||
|
div.page {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-template-rows: 20px 1fr 4fr 20px;
|
||||||
|
grid-template-areas:
|
||||||
|
'header'
|
||||||
|
'menu'
|
||||||
|
'mainContent'
|
||||||
|
'footer';
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|
|
||||||
49
intro_js/betale.html
Normal file
49
intro_js/betale.html
Normal 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
29
intro_js/index.html
Normal 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>
|
||||||
|
|
@ -7,35 +7,41 @@
|
||||||
<title>Super cool project for homelabers</title>
|
<title>Super cool project for homelabers</title>
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
|
||||||
<style>
|
<style>
|
||||||
div.main {
|
div.page{
|
||||||
|
height: 100vh;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns:
|
grid-template-columns: 1fr 4fr;
|
||||||
"sidebar topbar topbar"
|
grid-template-rows: 20px 10fr 20px;
|
||||||
"sidebar main"
|
grid-template-areas:
|
||||||
"sidebar footer footer";
|
'menu header'
|
||||||
|
'menu mainView'
|
||||||
|
'menu footer'; ;
|
||||||
}
|
}
|
||||||
|
div.header{
|
||||||
.item-a {
|
background-color: aquamarine;
|
||||||
grid-area: sidebar;
|
grid-area: header;
|
||||||
}
|
}
|
||||||
|
div.menu{
|
||||||
.item-b {
|
background-color: grey;
|
||||||
grid-area: topbar;
|
grid-area: menu;
|
||||||
}
|
}
|
||||||
|
div.mainView{
|
||||||
.item-c {
|
background-color: whitesmoke;
|
||||||
grid-area: main;
|
grid-area: mainView;
|
||||||
}
|
}
|
||||||
|
div.footer{
|
||||||
.item-d {
|
background-color: black;
|
||||||
grid-area: footer;
|
grid-area: footer;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="main">
|
<div class="page">
|
||||||
|
<div class="header">Header</div>
|
||||||
|
<div class="menu">Menu</div>
|
||||||
|
<div class="mainContent">MainContent</div>
|
||||||
|
<div class="footer">Footer</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,83 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Health og Mana</title>
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
.container {
|
|
||||||
border: 10px solid greenyellow;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(4, 1fr);
|
|
||||||
height: 10vh;
|
|
||||||
|
|
||||||
}
|
|
||||||
.header{
|
|
||||||
border: 10px solid grey;
|
|
||||||
border-radius: 10px;
|
|
||||||
background-color: antiquewhite;
|
|
||||||
font-size: x-large;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="header">Add or delete potions from inventory</div>
|
|
||||||
<div class="container">
|
|
||||||
<button onclick="addHealth()">add health potion</button>
|
|
||||||
<button onclick="delHealth()">delete health potion</button>
|
|
||||||
<button onclick="addMana()">add mana potion</button>
|
|
||||||
<button onclick="delMana()">delete mana potion</button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div onclick="showHideInventory()">
|
|
||||||
<div class="header">Inventory</div>
|
|
||||||
</div>
|
|
||||||
<div id="inventory">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script>
|
|
||||||
var healthTotal = 0;
|
|
||||||
var manaTotal = 0;
|
|
||||||
var inventoryOpen = Boolean(false);
|
|
||||||
function addHealth() {
|
|
||||||
++healthTotal
|
|
||||||
document.getElementById("healthTotal").innerHTML = healthTotal;
|
|
||||||
}
|
|
||||||
function delHealth() {
|
|
||||||
--healthTotal
|
|
||||||
document.getElementById("healthTotal").innerHTML = healthTotal;
|
|
||||||
}
|
|
||||||
function addMana() {
|
|
||||||
++manaTotal
|
|
||||||
document.getElementById("manaTotal").innerHTML = manaTotal;
|
|
||||||
}
|
|
||||||
function delMana() {
|
|
||||||
--manaTotal
|
|
||||||
document.getElementById("manaTotal").innerHTML = manaTotal;
|
|
||||||
}
|
|
||||||
function showHideInventory() {
|
|
||||||
if (inventoryOpen != true) {
|
|
||||||
document.getElementById('inventory').innerHTML = /*HTML*/ `
|
|
||||||
<div class="container">Health<div id="healthTotal"></div>
|
|
||||||
Mana<div id="manaTotal"></div>
|
|
||||||
</div>`;
|
|
||||||
document.getElementById("manaTotal").innerHTML = manaTotal;
|
|
||||||
document.getElementById("healthTotal").innerHTML = healthTotal;
|
|
||||||
inventoryOpen = true;
|
|
||||||
} else {
|
|
||||||
blankAll()
|
|
||||||
inventoryOpen = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function blankAll() {
|
|
||||||
document.getElementById('inventory').innerHTML = '';
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Loading…
Reference in a new issue