codealong og oppgave
This commit is contained in:
parent
1e04ea8aa3
commit
0d48ecd36c
BIN
Codealong/bikes.webp
Normal file
BIN
Codealong/bikes.webp
Normal file
Binary file not shown.
After Width: | Height: | Size: 423 KiB |
43
Codealong/model.js
Normal file
43
Codealong/model.js
Normal file
|
@ -0,0 +1,43 @@
|
|||
// Sykkelutleie
|
||||
// Kunden ønsker en applikasjon som skal kunne liste opp syklene den har så andre kan leie dem. Det skal også være mulig å legge til nye sykler etterhvert.
|
||||
// Lag en modell som kan fungere til teksten ovenfor
|
||||
// Lag viewfunksjon for å vise frem alle syklene våre
|
||||
// Lag en controllerfunksjon og et view til for å kunne legge til nye sykler
|
||||
const header = document.getElementById('header');
|
||||
const main = document.getElementById('main');
|
||||
const input = document.getElementById('input');
|
||||
const model = {
|
||||
app: {
|
||||
|
||||
},
|
||||
input: {
|
||||
newBike: {
|
||||
brand: '',
|
||||
gears: 0,
|
||||
state: '',
|
||||
description: '',
|
||||
isAvilable: true,
|
||||
}
|
||||
},
|
||||
data: {
|
||||
bikes: [
|
||||
{
|
||||
id: 1,
|
||||
brand: 'DBS',
|
||||
gears: 5,
|
||||
description: '5 gir er veldig tungt',
|
||||
state: 'works',
|
||||
isAvilable: true,
|
||||
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
brand: 'DBS',
|
||||
gears: 7,
|
||||
description: 'forhjulet er litt skeivt',
|
||||
state: 'refurbished',
|
||||
isAvilable: true,
|
||||
},
|
||||
]
|
||||
},
|
||||
}
|
27
Codealong/style.css
Normal file
27
Codealong/style.css
Normal file
|
@ -0,0 +1,27 @@
|
|||
body {
|
||||
margin: 0;
|
||||
background-image: url("bikes.webp");
|
||||
background-color: chocolate;
|
||||
overflow: hidden;
|
||||
}
|
||||
.header {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
.main {
|
||||
align-content: center;
|
||||
width: 50%;
|
||||
border-radius: 25%;
|
||||
background-color: aliceblue;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
.main li {
|
||||
font-size: x-large;
|
||||
list-style-type: none;
|
||||
}
|
||||
.input{
|
||||
width: 50%;
|
||||
background-color: antiquewhite;
|
||||
text-align: center;
|
||||
}
|
Loading…
Reference in a new issue