From cafa3b89576ca4b52c20d2d1faf3db1ecfb296bf Mon Sep 17 00:00:00 2001
From: Geir Okkenhaug Jerstad <geir@geokkjer.eu>
Date: Tue, 27 Aug 2024 13:11:59 +0200
Subject: [PATCH] little more from the  mvc chapter

---
 MVC/MVC_quizz.html                            | 32 ++++++++++++
 MVC/intro.html                                | 52 ++++++++++---------
 .../adjektivhistorie.html                     |  7 ++-
 oppgaver/uke4/adjektichistorie/script.js      | 21 ++++++++
 oppgaver/uke4/adjektichistorie/style.css      |  0
 team/oppgave1/uke4/index.html                 |  2 +-
 6 files changed, 87 insertions(+), 27 deletions(-)
 create mode 100644 MVC/MVC_quizz.html
 rename oppgaver/uke4/{ => adjektichistorie}/adjektivhistorie.html (64%)
 create mode 100644 oppgaver/uke4/adjektichistorie/script.js
 create mode 100644 oppgaver/uke4/adjektichistorie/style.css
diff --git a/MVC/MVC_quizz.html b/MVC/MVC_quizz.html
new file mode 100644
index 0000000..d888798
--- /dev/null
+++ b/MVC/MVC_quizz.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Model View Controller</title>
+    <style>
+        
+    </style>
+</head>
+<body>
+    <div id="app"></div>
+    <script>
+        // Model
+        let questionIndex = 0;
+        let points = 0;
+
+        // view
+        updateView();
+        function updateView(){
+            let question;
+            if (questionIndex == 0) question = "Hva er 2 + 2 ?"
+
+            document.getElementById('app').innerHTML = /*HTML*/ `
+                <h1></h1>
+                Poeng: ${points}<br>
+                <input type="text">
+            `;
+        };
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/MVC/intro.html b/MVC/intro.html
index c2d6128..c6f1bfe 100644
--- a/MVC/intro.html
+++ b/MVC/intro.html
@@ -8,55 +8,57 @@
 </head>
 
 <body>
-    <div class="group">
-        <div>Hei jeg heter</div>
-        <div id="namediv">...her kommer et navn<br></div>
-    </div>
-    <div class="group">
-        <div>Jeg bor i</div>
-        <div id="placediv">..her kommer et sted<br></div>
+    <div id="app">
     </div>
+
+    <script>
+
+        // Model
+        let firstName = "...her kommer et navn";
+        let place = "..her kommer et sted";
+        let food = "...her kommer en matrett";
+        // View
+        updateView();
+        function updateView() {
+            let html = `
+            <div class="group">
+                <div>Hei jeg heter</div>
+                <div id="namediv"> ${firstName}<br></div>
+            </div>
+            <div class="group">
+                <div>Jeg bor i</div>
+                <div id="placediv"> ${place}<br></div>
+            </div>
     <div class="group">
         <div>Min favorittmat er</div>
-        <div id="fooddiv">...her kommer en matrett<br></div>
+        <div id="fooddiv"> ${food}<br></div>
     </div>
 
     <button onclick="setFields()">Klikk her for å sett inn verdier</button>
     Navn: <input type="text" onchange="setName(this.value)">
     Sted: <input type="text" onchange="setPlace(this.value)">
     Mat: <input type="text" onchange="setFood(this.value)">
-
-    <script>
-
-        // Model
-        let firstName;
-        let place;
-        let food;
-        // View
-        function setFields() {
-            document.getElementById("namediv").innerHTML = firstName;
-            document.getElementById("placediv").innerHTML = place;
-            document.getElementById("fooddiv").innerHTML = food;
-
+            `;
+            document.getElementById('app').innerHTML = html;
         }
         // Controller
         function setName(nameInput) {
             firstName = nameInput;
-            setFields();
+            updateView();
         }
         function setPlace(placeInput) {
             place = placeInput;
-            setFields();
+            updateView();
         }
         function setFood(foodInput) {
             food = foodInput;
-            setFields();
+            updateView();
         }
     </script>
     <style>
         .group {
             display: flex;
-            padding: 1px;
+            padding: 3px;
         }
     </style>
 </body>
diff --git a/oppgaver/uke4/adjektivhistorie.html b/oppgaver/uke4/adjektichistorie/adjektivhistorie.html
similarity index 64%
rename from oppgaver/uke4/adjektivhistorie.html
rename to oppgaver/uke4/adjektichistorie/adjektivhistorie.html
index d01f779..0a1f318 100644
--- a/oppgaver/uke4/adjektivhistorie.html
+++ b/oppgaver/uke4/adjektichistorie/adjektivhistorie.html
@@ -1,11 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
+    <link rel="stylesheet" href="style.css">
 </head>
+
 <body>
-    
+    <div id="app"></div>
+    <script src="script.js"></script>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/oppgaver/uke4/adjektichistorie/script.js b/oppgaver/uke4/adjektichistorie/script.js
new file mode 100644
index 0000000..7dae2d3
--- /dev/null
+++ b/oppgaver/uke4/adjektichistorie/script.js
@@ -0,0 +1,21 @@
+// Model Variabler
+let sentence = ""
+let words = ["Green", "Red", "Cat", "Man", "Started", "Jumped", "Pool", "Wall"];
+
+// View
+// HTML, onclick CSS
+updateView();
+function updateView() {
+    document.getElementById('app').innerHTML = 'Dette er ____';
+    document.getElementById('app').innerHTML = /*HTML*/ `
+     <button>${words[0]}</button><button>${words[1]}</button>
+     <button>${words[2]}</button><button>${words[3]}</button>
+     <button>${words[4]}</button><button>${words[5]}</button>
+     <button>${words[6]}</button><button>${words[7]}</button>
+     `;
+};
+
+//  Controller endrer modellen
+function insertWords() {
+
+} 
\ No newline at end of file
diff --git a/oppgaver/uke4/adjektichistorie/style.css b/oppgaver/uke4/adjektichistorie/style.css
new file mode 100644
index 0000000..e69de29
diff --git a/team/oppgave1/uke4/index.html b/team/oppgave1/uke4/index.html
index bf6fdf7..1a2a8e0 100644
--- a/team/oppgave1/uke4/index.html
+++ b/team/oppgave1/uke4/index.html
@@ -7,6 +7,6 @@
 </head>
 <body>
     <div>Thus spake the Master Programmer:<br>
-            "After three days without programming, life becomes meaningless."</div>
+            "After three days without programming, life becomes meaningless." - <a href="https://www.mit.edu/~xela/tao.html">The Tao of Programming</a></div>
 </body>
 </html>
\ No newline at end of file
