team oppgave
This commit is contained in:
parent
79b0cd3da4
commit
efb60f2471
|
|
@ -32,7 +32,7 @@
|
||||||
<h2>Verden!</h2>
|
<h2>Verden!</h2>
|
||||||
</div>
|
</div>
|
||||||
<div>Aaaaa aaaa<br>
|
<div>Aaaaa aaaa<br>
|
||||||
aaaa aaaa
|
aaaa aaaa
|
||||||
</div>
|
</div>
|
||||||
<div>Bbbbb bbbb bbbb bbbb</div>
|
<div>Bbbbb bbbb bbbb bbbb</div>
|
||||||
<div>Aaaaa aaaa aaaa aaaa</div>
|
<div>Aaaaa aaaa aaaa aaaa</div>
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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
49
intro_html/css.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>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>
|
||||||
|
|
@ -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.
|
||||||
|
|
|
||||||
|
|
@ -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() {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -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
12
team/oppgave1/index.html
Normal 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
91
team/oppgave1/index2.html
Normal 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>
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue