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

little more from the mvc chapter

Browse source
This commit is contained in:
Geir Okkenhaug Jerstad 2024-08-27 13:11:59 +02:00
parent ed7c48e877
commit cafa3b8957
6 changed files with 87 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
MVC/MVC_quizz.html Normal file
View file

@ -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>

52
MVC/intro.html
View file

@ -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>

7
oppgaver/uke4/adjektivhistorie.html → oppgaver/uke4/adjektichistorie/adjektivhistorie.html
View file

@ -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>

21
oppgaver/uke4/adjektichistorie/script.js Normal file
View file

@ -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() {
}

0
oppgaver/uke4/adjektichistorie/style.css Normal file
View file

2
team/oppgave1/uke4/index.html
View file

@ -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>