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

MVC skjemaer

Browse source
This commit is contained in:
Geir Okkenhaug Jerstad 2024-08-29 10:33:18 +02:00
parent 441d3d0120
commit 3f49a7433b
15 changed files with 35 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

12
team/oppgaver/uke2/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/oppgaver/uke2/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>

BIN
team/oppgaver/uke4/img/angry.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
team/oppgaver/uke4/img/dead.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
team/oppgaver/uke4/img/default.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
team/oppgaver/uke4/img/eating.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
team/oppgaver/uke4/img/ghost.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
team/oppgaver/uke4/img/need_food.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
team/oppgaver/uke4/img/need_love.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
team/oppgaver/uke4/img/need_petting.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 22 KiB

29
team/oppgaver/uke4/index.html Normal file
View 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>Sir Quacksalot</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
<div id="foodId"></div>
<div id="petId"></div>
<div id="TTL"></div>
</div>
<button onclick="feed()" id="foodBtn">Feed</button>
<button onclick="pet()" id="petBtn">Pet</button>
<button onclick="reset()" id="resetBtn">Resurection/reset</button>
<div class="FrogFace"><img id="tamaFrog"> </div>
<script src="script.js"></script>
</body>
</html>

36
team/oppgaver/uke4/plan.md Normal file
View file

@ -0,0 +1,36 @@
# Gruppeoppgave klasse b team 1 uke 4
## Oppgavetekst
Dere skal lage et virtuelt kjæledyr som trenger
f.eks:
mat
å lekes med
vaskes/gjøre rent etter
Eller noe helt annet som trenger noen helt andre ting! (en bil som må på EU kontroll med jevne mellomrom, dykker som jevnlig må fylle o2 tanken, en programmerer som trenger kaffe - bare fantasien setter grenser! 😀 )
Lag knapper eller andre måter å gi dyret/etc det som trengs når det spør etter det
Dersom dyret ikke får det det trenger etter en viss tid reiser det bort for å finne en bedre eier
Bruk det dere har lært til nå for å løse oppgaven på en så god måte som mulig.
Planlegg, Tegn og fordel oppgaver - få Thumbs Up på planen fra kodelærer før dere går i gang.
HUSK!
Ikke bruk mer enn 4 timer på oppgaven - det er ikke farlig å ikke bli ferdig. Det er derimot viktig å samarbeide, lære og å øve på å legge en plan.
Vi går igjennom resultatene på Fredag
Gleder oss til å høre hvordan det har gått!
Viktig punkter å huske ved teamarbeid:
De som har kodeerfaring fra tidligere bør ta en laidback rolle feks ansvar for CSS
Pass på å inkluder alle, gi rom for innspill og lytt
Det er ikke viktig å bli ferdig med oppgave - vi ser etter ferdigheter innenfor samarbeid først og fremst
Legg koden på et nivå som alle kan ha et forhold til
Ikke bruk elementer som ikke har blitt gjennomgått i undervisningstimene
## Løsningsplan
Drawing
Buttons

83
team/oppgaver/uke4/script.js Normal file
View file

@ -0,0 +1,83 @@
// Model
let foodTime = 10;
let petTime = 10;
let foodElement = document.getElementById("foodId");
let petElement = document.getElementById('petId');
let frogImage = document.getElementById('tamaFrog').src = "img/default.jpg";
let foodCounter = setInterval(foodFunction, 1000);
let petCounter = setInterval(petFunction, 1000);
// View
function reset() {
if (foodTime < 0){
defaultImg();
foodTime = 50;
setInterval(foodFunction, 1000);
petTime = 10;
setInterval(petFunction, 1000);
}
}
function foodFunction() {
if (foodTime < 0) {
//game over???
document.getElementById('tamaFrog').src = "img/dead.jpg";
clearInterval(foodCounter);
setTimeout(afterLife, 5000);
} else {
foodElement.innerHTML = foodTime + " seconds remaining"
foodTime--
if (foodTime < 15) {
document.getElementById('tamaFrog').src = "img/need_food.jpg";
}
}
}
// Controller
function feed() {
if (foodTime > 0 && petTime > 5) {
foodTime += 10;
petElement.innerHTML = petTime + " seconds remaining." + " Pet the frog";
document.getElementById('tamaFrog').src = "img/eating.jpg";
setTimeout(defaultImg, 500)
}
}
function defaultImg() {
document.getElementById('tamaFrog').src = "img/default.jpg";
}
function petFunction() {
if (petTime < 0) {
clearInterval(petCounter);
} else if (petTime < 5) {
document.getElementById('tamaFrog').src = "img/angry.jpg";
petElement.innerHTML = petTime + " seconds remaining"
petTime--;
}
else {
petElement.innerHTML = petTime + " seconds remaining"
petTime--
}
}
function pet() {
if (foodTime > 0) {
petTime += 10;
document.getElementById('tamaFrog').src = "img/need_love.jpg";
setTimeout(defaultImg, 500)
}
}
function defaultImg() {
document.getElementById('tamaFrog').src = "img/default.jpg";
}
function afterLife() {
document.getElementById('tamaFrog').src = "img/ghost.jpg";
}

26
team/oppgaver/uke4/style.css Normal file
View file

@ -0,0 +1,26 @@
.FrogFace {
user-select: none;
padding: 2px;
border: solid, 15px rgb(19, 204, 19);
max-width: 650px;
}
.img{
max-width: 100%;
max-height: 100%;
}
.square {
height: 75px;
width: 75px;
}
/* #app{
display: grid;
padding: 2px;
border: solid, yellow, 2px;
} */