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

little more from the mvc chapter

Browse source
This commit is contained in:
Geir Okkenhaug Jerstad 2024-08-27 13:16:43 +02:00
parent cafa3b8957
commit 12dc3057b6
6 changed files with 74 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

2
oppgaver/uke4/adjektichistorie/adjektivhistorie.html
View file

@ -9,7 +9,7 @@
</head>
<body>
<div id="app"></div>
<div id="app" class="app"></div>
<script src="script.js"></script>
</body>

20
oppgaver/uke4/adjektichistorie/script.js
View file

@ -6,16 +6,20 @@ let words = ["Green", "Red", "Cat", "Man", "Started", "Jumped", "Pool", "Wall"];
// 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>
`;
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() {
function insertWords(word) {
document.getElementById('sentence').innerHTML = `annet ${word}`;
}

12
oppgaver/uke4/adjektichistorie/style.css
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;
}