vinlotteri oppgave
This commit is contained in:
parent
340fd0f151
commit
63fcc0c68d
|
|
@ -12,3 +12,4 @@ let hungryRabbit = {
|
|||
whiteRabbit.speak("Oh my fur and whiskers");
|
||||
|
||||
hungryRabbit.speak("Got any carrots?");
|
||||
|
||||
|
|
|
|||
4
emne2/Vinlotterix/controller.js
Normal file
4
emne2/Vinlotterix/controller.js
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
function setRules(){
|
||||
console.log(model.input.rules.numWinners);
|
||||
updateViewRules();
|
||||
}
|
||||
27
emne2/Vinlotterix/index.html
Normal file
27
emne2/Vinlotterix/index.html
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Vin LotteriX</title>
|
||||
<script src="model.js"></script>
|
||||
<script src="view.js"></script>
|
||||
<script src="controller.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script>
|
||||
updateView();
|
||||
function updateView() {
|
||||
const page = model.app.page;
|
||||
if (page === 'home') updateViewHome();
|
||||
else if (page === 'rules') updateViewRules();
|
||||
else if (page === 'list') updateViewList();
|
||||
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
22
emne2/Vinlotterix/model.js
Normal file
22
emne2/Vinlotterix/model.js
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
const model = {
|
||||
app: {
|
||||
pages: ["home", "rules", "list"],
|
||||
page: "home",
|
||||
},
|
||||
input: {
|
||||
rules: {
|
||||
numWinners: 1,
|
||||
listEmployees: [],
|
||||
},
|
||||
},
|
||||
// Felles data
|
||||
employees: [
|
||||
{ id: 1, name: "Per" },
|
||||
{ id: 2, name: "Pål" },
|
||||
{ id: 3, name: "Espen" },
|
||||
{ id: 4, name: "Anita" },
|
||||
{ id: 5, name: "Kari" },
|
||||
{ id: 6, name: "Gry" }
|
||||
],
|
||||
|
||||
}
|
||||
18
emne2/Vinlotterix/oppgave.md
Normal file
18
emne2/Vinlotterix/oppgave.md
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
En gjeng kolleger på Nilsens verksted vil dra i gang litt sosial stemning på jobb. En gang i mnd ønsker de å ha et vinlotteri, der de utfører en trekning blant de påmeldte ansatte. Hjelp dem med å lage en webside til denne hensikt!
|
||||
|
||||
Legg til følgende funksjonalitet:
|
||||
|
||||
En liste over de ansatte en kan velge å ha med eller ikke ha med i trekningen
|
||||
Mulighet for å legge til eller slette ansatte fra listen
|
||||
Mulighet for å velge hvor mange vinnere som skal trekkes
|
||||
En meny der man kan toggle mellom mennesker og utførte trekninger
|
||||
En liste som viser utførte trekninger med dato og dagens vinnere
|
||||
Forskjellige trekninger kan ha et forskjellig antall vinnere
|
||||
En knapp som kan skjule eller vise menyen (personer og trekning)
|
||||
Inspirasjonsfoto her - men bruk gjerne egen fantasi til å løse oppgaven
|
||||
|
||||
Sider:
|
||||
- trekk vinner
|
||||
- velge regler for trekning(hvem skal være med og hvor mange vinnere)
|
||||
-
|
||||
|
||||
64
emne2/Vinlotterix/view.js
Normal file
64
emne2/Vinlotterix/view.js
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
|
||||
function createMenu(){
|
||||
return /*html*/ `
|
||||
<button onclick="updateViewHome()">Home</button>
|
||||
<button onclick="showWinnersView()">Trekk vinnere</button>
|
||||
<button onclick="updateViewRules()">Sett opp regler for trekningen</button>
|
||||
<button onclick="updateViewList()">Vis tidligere trekkinger</button>
|
||||
<br/>
|
||||
`;
|
||||
}
|
||||
|
||||
function updateViewHome(){
|
||||
document.getElementById('app').innerHTML = /*HTML*/ `
|
||||
<h1>Hello World!</h1>
|
||||
${createMenu()}
|
||||
`;
|
||||
}
|
||||
|
||||
function updateViewRules(){
|
||||
app.innerHTML = /*HTML*/ `
|
||||
<h2>Hello from rules</h2>
|
||||
${createMenu()}
|
||||
<label for="model.input.rules.numWinners">Hvor mange vinnere?</label>
|
||||
<input type="number"
|
||||
onchange="model.input.rules.numWinners=this.value"
|
||||
min="0"
|
||||
max="10"
|
||||
value="${model.input.rules.numWinners || ''}"
|
||||
name="NumberOfWinners"></select>
|
||||
<ol>
|
||||
<li>Nummer: ${model.input.rules.numWinners}</li>
|
||||
</ol>
|
||||
<button onclick="setRules()">Sett regler</button><br>
|
||||
`;
|
||||
|
||||
}
|
||||
|
||||
function updateViewList(){
|
||||
let html = '';
|
||||
const employees = model.employees;
|
||||
for (let i = 0; i < employees.length; i++){
|
||||
const person = employees[i];
|
||||
html += /*html*/ `
|
||||
<li>${person.name}</li>
|
||||
`;
|
||||
}
|
||||
app.innerHTML = html + 'This is the list <button onclick="updateViewHome()">Home</button>'
|
||||
}
|
||||
|
||||
function showWinnersView(){
|
||||
let winners = [];
|
||||
let num = model.input.rules.numWinners;
|
||||
|
||||
for (i = 0; i < num; i++){
|
||||
index = Math.floor(Math.random() * (model.employees.length));
|
||||
console.log(index)
|
||||
winners.push(model.employees[index])
|
||||
}
|
||||
for (i = 0; i < winners.length; i++){
|
||||
app.innerHTML += /*html*/ `
|
||||
<h4>${winners[i].name}</h4>
|
||||
`; console.log(winners[i].name)}
|
||||
|
||||
}
|
||||
Loading…
Reference in a new issue