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

a couple of loops

Browse source
This commit is contained in:
Geir Okkenhaug Jerstad 2024-08-27 14:38:00 +02:00
parent 12dc3057b6
commit 5868ff1a7a
5 changed files with 35 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

16
oppgaver/uke4/adjektivhistorie/adjektivhistorie.html Normal file
View file

@ -0,0 +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" class="app"></div>
<script src="script.js"></script>
</body>
</html>

25
oppgaver/uke4/adjektivhistorie/script.js Normal file
View file

@ -0,0 +1,25 @@
// Model Variabler
let sentence = ""
let words = ["Green", "Red", "Cat", "Man", "Started", "Jumped", "Pool", "Wall"];
// View
// HTML, onclick CSS
updateView();
function updateView() {
let html = `
<div id="sentence" class="sentence">Her er __ noe<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>`;
document.getElementById('app').innerHTML = html;
};
// Controller endrer modellen
function insertWords(word) {
document.getElementById('sentence').innerHTML = `annet ${word}`;
}

12
oppgaver/uke4/adjektivhistorie/style.css Normal file
View file

@ -0,0 +1,12 @@
.app{
background-color: blue;
}
.buttons{
display: grid;
grid-template-columns: 1fr 1fr;
margin-right: 20px;
color: aqua;
}
.sentence{
padding: 20px;
}