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

team oppgave

Browse source
This commit is contained in:
Geir Okkenhaug Jerstad 2024-08-14 14:52:08 +02:00
parent 79b0cd3da4
commit efb60f2471
9 changed files with 239 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
CSS/flex/index.html
View file

@ -55,6 +55,11 @@
<div>Aaaaa aaaa aaaa aaaa</div> <div>Aaaaa aaaa aaaa aaaa</div>
<div>Bbbbb bbbb bbbb bbbb</div> <div>Bbbbb bbbb bbbb bbbb</div>
</div> </div>
<script src="https://unpkg.com/htmx.org@2.0.2"></script>
<!-- have a button POST a click via AJAX -->
<button hx-post="/clicked" hx-swap="outerHTML">
Click Me
</button>
<script> <script>
</script> </script>

21
htmx/index.html
View file

@ -0,0 +1,21 @@
<!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>
<h1>HTMX</h1>
<a href="/blog">Blog</a>
<script src="https://unpkg.com/htmx.org@2.0.2"></script>
<!-- have a button POST a click via AJAX -->
<button hx-post="/clicked" hx-swap="outerHTML">
Click Me
</button>
</body>
</html>

49
intro_html/css.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>Document</title>
<style>
body{
margin: 0;
padding: 0;
}
div.page{
height: 100vh;
display: grid;
grid-template-areas: "header header """"";
}
div.header {
background-color: aquamarine;
grid-area: header;
}
div.menu {
background-color: brown;
grid-area: menu;
}
div.mainContent {
background-color: coral;
grid-area: mainContent;
}
div.footer {
background-color: crimson;
grid-area: footer;
}
</style>
</head>
<body>
<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>
</html>

31
intro_html/index.html
View file

@ -15,43 +15,26 @@
<button>Grid layout</button> <button>Grid layout</button>
<h1>Eksempel 1</h1> <h1>Eksempel 1</h1>
<div id="tekstDiv">Start Tekst Her</div>
<button onclick="oppdaterTekst()">Trykk på knappen for å oppdatere tekst</button>
<div id="cards"> <div id="cards">
<div class="card"> <div class="card">
<div class="header green"> <div class="header green" onclick="green()">
Verktøy Verktøy
</div> </div>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div class="innerCard"> <div class="innerCard" id="inner">
De to viktigste verktøyene vi skal bruke er disse:
<ul>
<li>
Koderedigeringsprogrammet <a href="https://code.visualstudio.com/">Visual Studio Code</a>
<br>
Vi skal bruke noen <i>extensions</i>:
<ul>
<li>JavaScript-booster</li>
<li>es6-string-html</li>
<li>live-server</li>
<li>live-share</li>
</ul>
</li>
<li>Nettleseren <a href="https://www.google.com/intl/no/chrome/">Chrome</a></li>
</ul>
</div> </div>
</div> </div>
<div id="cards"> <div id="cards">
<div class="card"> <div class="card">
<div class="header blue"> <div class="header blue" onclick="blue()">
HTML HTML
</div> </div>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div class="innerCard"> <div class="innerCard" id="inner">
Vi bruker HTML til å definere et dokument. Vi bruker HTML til å definere et dokument.
<ul> <ul>
<li>Tagger for grunnleggende oppsett av en HTML-fil</li> <li>Tagger for grunnleggende oppsett av en HTML-fil</li>
@ -74,7 +57,7 @@
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div class="innerCard"> <div class="innerCard" id="inner">
Vi bruker CSS til å <i>style</i> et dokument, altså farger, fonter, utseende og lignende. Vi bruker CSS til å <i>style</i> et dokument, altså farger, fonter, utseende og lignende.
<ul> <ul>
<li><tt>background-color</tt></li> <li><tt>background-color</tt></li>
@ -95,12 +78,12 @@
</div> </div>
<div id="cards"> <div id="cards">
<div class="card"> <div class="card">
<div class="header yellow"> <div class="header yellow" onclick="openClose()">
JavaScript JavaScript
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div class="innerCard"> <div class="innerCard" id="inner">
Det viktigste vi skal lære er programmeringsspråket JavaScript. Vi skal lære grunnleggende programmering Det viktigste vi skal lære er programmeringsspråket JavaScript. Vi skal lære grunnleggende programmering
ved ved
å manipulere HTML- og CSS-kode på en nettside ved hjelp av JavaScript. å manipulere HTML- og CSS-kode på en nettside ved hjelp av JavaScript.

30
intro_html/script.js
View file

@ -1,3 +1,29 @@
function oppdaterTekst() { blankAll()
document.getElementById('tekstDiv').innerHTML = 'Ny tekst nå som knappen er trykket på'; function blankAll(){
document.getElementById('inner').innerHTML = '';
}
function green() {
blankAll();
document.getElementById('inner').innerHTML = /*HTML*/ `
De to viktigste verktøyene vi skal bruke er disse:
<ul>
<li>
Koderedigeringsprogrammet <a href="https://code.visualstudio.com/">Visual Studio Code</a>
<br>
Vi skal bruke noen <i>extensions</i>:
<ul>
<li>JavaScript-booster</li>
<li>es6-string-html</li>
<li>live-server</li>
<li>live-share</li>
</ul>
</li>
<li>Nettleseren <a href="https://www.google.com/intl/no/chrome/">Chrome</a></li>
</ul>`;
}
function blue() {
}
function red() {
} }

1
prosjekt/index.html
View file

@ -5,6 +5,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<style> <style>
div.main { div.main {
display: grid; display: grid;

12
team/oppgave1/index.html Normal file
View file

@ -0,0 +1,12 @@
<!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>
</body>
</html>

91
team/oppgave1/index2.html Normal file
View file

@ -0,0 +1,91 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inventory Oppgave2</title>
</head>
<style>
div.InvSelect {
color: white;
background-color: rgb(73, 162, 76);
border: 6px white;
text-align: center;
padding: 6px;
user-select: none;
}
div.Inv{
background-color:lightgrey;
background: rgb(182, 182, 182);
border: 1px solid black;
display: grid;
grid-template-columns: repeat(4, 1fr);
}
button.mana {
background-color: rgb(0, 119, 255);
font-size: medium;
color: white;
}
button.health {
background-color: rgba(255, 0, 0, 0.808);
font-size: medium;
color: white;
}
</style>
<body><h1>Gruppe Oppgave the Goats</h1>
<div><b>Klikk her for å legge til eller ta vekk</b></div>
<button class="health" onclick="addHealth()">Legg til helse flaske</button>
<button class="health" onclick="decreaseHealth()">Ta fra helse flaske</button>
<button class="mana" onclick="addMana()">Legg til magi flaske</button>
<button class="mana" onclick="decreaseMana()">Ta fra magi flaske</button>
<div>
<div class="InvSelect" onclick="openClose()">Inventory</div>
<div id="showInventory"></div>
</div>
</div>
<script>
var healthTotal = 0;
var manaTotal = 0;
blankAll()
function addHealth() {
healthTotal = healthTotal + 1
document.getElementById("health").innerHTML = healthTotal;
}
function addMana(){
manaTotal = manaTotal + 1
document.getElementById("mana").innerHTML = manaTotal;
}
function decreaseHealth(){
healthTotal = healthTotal - 1
document.getElementById("health").innerHTML = healthTotal;
}
function decreaseMana(){
manaTotal = manaTotal - 1
document.getElementById("mana").innerHTML = manaTotal;
}
function openClose(){
document.getElementById("showInventory").innerHTML = /*HTML*/ `
<div class="Inv">Total Helse</div>
<div class="Inv" id="health"></div>
<div class="Inv">Total mana</div>
<div class="Inv" id="mana"></div>
<button onclick="blankAll()">Close Inventory</button>
`;
}
function blankAll() {
document.getElementById("showInventory").innerHTML = ' ';
}
</script>
</body>
</html>

28
team/variabler/healthMana.html
View file

@ -3,10 +3,30 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hei på deg!</title> <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> </head>
<body> <body>
<div> <div class="header">Add or delete potions from inventory</div>
<div class="container">
<button onclick="addHealth()">add health potion</button> <button onclick="addHealth()">add health potion</button>
<button onclick="delHealth()">delete health potion</button> <button onclick="delHealth()">delete health potion</button>
<button onclick="addMana()">add mana potion</button> <button onclick="addMana()">add mana potion</button>
@ -14,7 +34,7 @@
</div> </div>
<div> <div>
<div onclick="showHideInventory()"> <div onclick="showHideInventory()">
Inventory <div class="header">Inventory</div>
</div> </div>
<div id="inventory"> <div id="inventory">
@ -43,7 +63,7 @@
function showHideInventory() { function showHideInventory() {
if (inventoryOpen != true) { if (inventoryOpen != true) {
document.getElementById('inventory').innerHTML = /*HTML*/ ` document.getElementById('inventory').innerHTML = /*HTML*/ `
<div>Health<div id="healthTotal"></div> <div class="container">Health<div id="healthTotal"></div>
Mana<div id="manaTotal"></div> Mana<div id="manaTotal"></div>
</div>`; </div>`;
document.getElementById("manaTotal").innerHTML = manaTotal; document.getElementById("manaTotal").innerHTML = manaTotal;