Merge branch 'main' of https://github.com/geokkjer/startit

oppgaver/uke4/adjektivhistorie/script.js

@@ -1,25 +1,52 @@
 // Model Variabler
-let sentence = ""
-let words = ["Green", "Red", "Cat", "Man", "Started", "Jumped", "Pool", "Wall"];
 
+let words = ["green", "red", "cat", "man", "stared", "jumped", "pool", "wall"];
+let word1 = '__ ';
+let word2 = '__ ';
+let word3 = '__ ';
+let word4 = '__ ';
+let sentence = "Once there was " + word1 + " " + word2 +" that " + word3 + " in the " + word4 + " - and great things happened. The End";
 // View
 // HTML, onclick CSS
 updateView();
 function updateView() {
     let html = `
-    <div id="sentence" class="sentence">Her er __ noe<br></div>
+    <div id="sentence" class="sentence">${sentence}<br></div>
     <div id="buttons" class="buttons">
-     <div onclick="insertWords(words[0])">${words[0]}</div><button onclick="insertWords(words[0])">${words[1]}</button>
+     <div class="button" onclick="insertWords1(words[0])">${words[0]}</div>
-     <button onclick="insertWords(words[0])">${words[2]}</button><button onclick="insertWords(words[0])">${words[3]}</button>
+     <div class="button" onclick="insertWords1(words[1])">${words[1]}</div>
-     <button onclick="insertWords(words[0])">${words[4]}</button><button onclick="insertWords(words[0])">${words[5]}</button>
+     <div class="button" onclick="insertWords2(words[2])">${words[2]}</div>
-     <button onclick="insertWords(words[0])">${words[6]}</button><button onclick="insertWords(words[0])">${words[7]}</button>
+     <div class="button" onclick="insertWords2(words[3])">${words[3]}</div>
+     <div class="button" onclick="insertWords3(words[4])">${words[4]}</div>
+     <div class="button" onclick="insertWords3(words[5])">${words[5]}</div>
+     <div class="button" onclick="insertWords4(words[6])">${words[6]}</div>
+     <div class="button" onclick="insertWords4(words[7])">${words[7]}</div>
      </div>`;
     document.getElementById('app').innerHTML = html;
-    
 };
 
 //  Controller endrer modellen
-function insertWords(word) {
+function insertWords1(word) {
-    document.getElementById('sentence').innerHTML = `annet ${word}`;
+    word1 = word;
+    sentence = "Once there was " + word1 + " " + word2 +" that " + word3 + " in the " + word4 + " - and great things happened. The End";
+    document.getElementById('sentence').innerHTML = sentence;
+    updateView();
+
+} 
+function insertWords2(word) {
+    word2 = word;
+    sentence = "Once there was " + word1 + " " + word2 +" that " + word3 + " in the " + word4 + " - and great things happened. The End";
+    document.getElementById('sentence').innerHTML = sentence;
+
+}
+function insertWords3(word) {
+    word3 = word;
+    sentence = "Once there was " + word1 + " " + word2 +" that " + word3 + " in the " + word4 + " - and great things happened. The End";
+    document.getElementById('sentence').innerHTML = sentence;
+
+} function insertWords4(word) {
+    word4 = word;
+    sentence = "Once there was " + word1 + " " + word2 +" that " + word3 + " in the " + word4 + " - and great things happened. The End";
+    document.getElementById('sentence').innerHTML = sentence;
 
 } 

oppgaver/uke4/adjektivhistorie/style.css

@@ -1,12 +1,24 @@
-.app{
+.app {
     background-color: blue;
 }
-.buttons{
+
+.buttons {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    margin-right: 20px;
+    margin-left: 20px;
-    color: aqua;
+    color: rgb(28, 46, 46);
+    width: auto;
 }
-.sentence{
+.button{
+    border-radius: 25px;
+    background: #73AD21;
+    padding: 10px;
+    width: 50px;
+    height: 10px;
+}
+
+.sentence {
     padding: 20px;
+    background-color: blanchedalmond;
+    font-size: x-large;
 }