javascript og lit css
This commit is contained in:
parent
fcbb649185
commit
fe0b5a944b
|
|
@ -3,3 +3,38 @@ while (number <= 12) {
|
|||
console.log(number);
|
||||
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{
|
||||
height: 100vh;
|
||||
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 {
|
||||
background-color: aquamarine;
|
||||
|
|
@ -34,6 +39,18 @@
|
|||
background-color: crimson;
|
||||
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>
|
||||
</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>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
|
||||
<style>
|
||||
div.main {
|
||||
div.page{
|
||||
height: 100vh;
|
||||
display: grid;
|
||||
grid-template-columns:
|
||||
"sidebar topbar topbar"
|
||||
"sidebar main"
|
||||
"sidebar footer footer";
|
||||
grid-template-columns: 1fr 4fr;
|
||||
grid-template-rows: 20px 10fr 20px;
|
||||
grid-template-areas:
|
||||
'menu header'
|
||||
'menu mainView'
|
||||
'menu footer'; ;
|
||||
}
|
||||
|
||||
.item-a {
|
||||
grid-area: sidebar;
|
||||
div.header{
|
||||
background-color: aquamarine;
|
||||
grid-area: header;
|
||||
}
|
||||
|
||||
.item-b {
|
||||
grid-area: topbar;
|
||||
div.menu{
|
||||
background-color: grey;
|
||||
grid-area: menu;
|
||||
}
|
||||
|
||||
.item-c {
|
||||
grid-area: main;
|
||||
div.mainView{
|
||||
background-color: whitesmoke;
|
||||
grid-area: mainView;
|
||||
}
|
||||
|
||||
.item-d {
|
||||
div.footer{
|
||||
background-color: black;
|
||||
grid-area: footer;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<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>
|
||||
</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