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

7
CSS/flex/index.html
View file

@ -32,7 +32,7 @@
<h2>Verden!</h2>
</div>
<div>Aaaaa aaaa<br>
aaaa aaaa
aaaa aaaa
</div>
<div>Bbbbb bbbb bbbb bbbb</div>
<div>Aaaaa aaaa aaaa aaaa</div>
@ -55,6 +55,11 @@
<div>Aaaaa aaaa aaaa aaaa</div>
<div>Bbbbb bbbb bbbb bbbb</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>

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>
<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 class="card">
<div class="header green">
<div class="header green" onclick="green()">
Verktøy
</div>
</div>
</div>
<div class="card">
<div class="innerCard">
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 class="innerCard" id="inner">
</div>
</div>
<div id="cards">
<div class="card">
<div class="header blue">
<div class="header blue" onclick="blue()">
HTML
</div>
</div>
</div>
<div class="card">
<div class="innerCard">
<div class="innerCard" id="inner">
Vi bruker HTML til å definere et dokument.
<ul>
<li>Tagger for grunnleggende oppsett av en HTML-fil</li>
@ -74,7 +57,7 @@
</div>
</div>
<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.
<ul>
<li><tt>background-color</tt></li>
@ -95,12 +78,12 @@
</div>
<div id="cards">
<div class="card">
<div class="header yellow">
<div class="header yellow" onclick="openClose()">
JavaScript
</div>
</div>
<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
ved
å 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() {
document.getElementById('tekstDiv').innerHTML = 'Ny tekst nå som knappen er trykket på';
blankAll()
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 name="viewport" content="width=device-width, initial-scale=1.0">
<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 {
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>
<meta charset="UTF-8">
<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>
<body>
<div>
<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>
@ -14,7 +34,7 @@
</div>
<div>
<div onclick="showHideInventory()">
Inventory
<div class="header">Inventory</div>
</div>
<div id="inventory">
@ -43,7 +63,7 @@
function showHideInventory() {
if (inventoryOpen != true) {
document.getElementById('inventory').innerHTML = /*HTML*/ `
<div>Health<div id="healthTotal"></div>
<div class="container">Health<div id="healthTotal"></div>
Mana<div id="manaTotal"></div>
</div>`;
document.getElementById("manaTotal").innerHTML = manaTotal;