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

oppgave uke 4

Browse source
This commit is contained in:
Geir Okkenhaug Jerstad 2024-08-30 13:45:16 +02:00
parent 7d03b87ddc
commit afaa746f1b
2 changed files with 54 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
oppgaver/uke4/adjektivhistorie/script.js
View file

@ -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>
<button onclick="insertWords(words[0])">${words[2]}</button><button onclick="insertWords(words[0])">${words[3]}</button>
<button onclick="insertWords(words[0])">${words[4]}</button><button onclick="insertWords(words[0])">${words[5]}</button>
<button onclick="insertWords(words[0])">${words[6]}</button><button onclick="insertWords(words[0])">${words[7]}</button>
<div class="button" onclick="insertWords1(words[0])">${words[0]}</div>
<div class="button" onclick="insertWords1(words[1])">${words[1]}</div>
<div class="button" onclick="insertWords2(words[2])">${words[2]}</div>
<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) {
document.getElementById('sentence').innerHTML = `annet ${word}`;
function insertWords1(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;
}

22
oppgaver/uke4/adjektivhistorie/style.css
View file

@ -1,12 +1,24 @@
.app{
.app {
background-color: blue;
}
.buttons{
.buttons {
display: grid;
grid-template-columns: 1fr 1fr;
margin-right: 20px;
color: aqua;
margin-left: 20px;
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;
}