MVC skjemaer

2024-08-29 10:33:18 +02:00 · 2024-08-29 10:33:18 +02:00 · 3f49a7433b
commit 3f49a7433b
parent 441d3d0120
15 changed files with 35 additions and 0 deletions
--- a/team/oppgaver/uke4/img/angry.jpg
+++ b/team/oppgaver/uke4/img/angry.jpg
--- a/team/oppgaver/uke4/img/dead.jpg
+++ b/team/oppgaver/uke4/img/dead.jpg
--- a/team/oppgaver/uke4/img/default.jpg
+++ b/team/oppgaver/uke4/img/default.jpg
--- a/team/oppgaver/uke4/img/eating.jpg
+++ b/team/oppgaver/uke4/img/eating.jpg
--- a/team/oppgaver/uke4/img/ghost.jpg
+++ b/team/oppgaver/uke4/img/ghost.jpg
--- a/team/oppgaver/uke4/img/need_food.jpg
+++ b/team/oppgaver/uke4/img/need_food.jpg
--- a/team/oppgaver/uke4/img/need_love.jpg
+++ b/team/oppgaver/uke4/img/need_love.jpg
--- a/team/oppgaver/uke4/img/need_petting.jpg
+++ b/team/oppgaver/uke4/img/need_petting.jpg
--- a/team/oppgaver/uke4/index.html
+++ b/team/oppgaver/uke4/index.html
@ -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>
--- a/team/oppgaver/uke4/plan.md
+++ b/team/oppgaver/uke4/plan.md
@ -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
+
+
--- a/team/oppgaver/uke4/script.js
+++ b/team/oppgaver/uke4/script.js
@ -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";
+}
--- a/team/oppgaver/uke4/style.css
+++ b/team/oppgaver/uke4/style.css
@ -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;
+} */
+
+