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

codealong og oppgave

Browse source
This commit is contained in:
Geir Okkenhaug Jerstad 2024-11-01 14:45:13 +01:00
parent cf77bca4e0
commit 1e04ea8aa3
5 changed files with 99 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
Codealong/controller.js
View file

@ -1 +1,34 @@
function addBike() {
let newBike = model.input.newBike;
let myBike = {
id: addNewId(),
brand: newBike.brand,
gears: newBike.gears,
state: newBike.state,
isAvilable: newBike.isAvilable,
description: newBike.description,
};
model.data.bikes.push(myBike);
newBike.id = "";
newBike.brand = "";
newBike.gears = "";
newBike.state = "";
newBike.description = "";
console.log(model.data.bikes)
updateView();
}
function addNewId(){
let newId = Math.floor(Math.random()*9999)
for(let i = 0; i < model.data.bikes.length; i++){
if(newId === model.data.bikes[i].id){
addNewId();
}
}
return newId;
}

36
Codealong/modell.js
View file

@ -1,36 +0,0 @@
// 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 app = document.getElementById('app');
const modell = {
app: {
},
input: {
},
data: {
bikes: [
{
id: 1,
modell: 'DBS',
gears: 5,
description: '',
state: 'works',
isAvilable: true,
},
{
id: 2,
modell: 'DBS',
gears: 7,
description: '',
state: 'refurbished',
isAvilable: true,
},
]
},
}

9
Codealong/sykkel.html
View file

@ -3,11 +3,16 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <title>Sykkelutleie</title>
<link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script src="modell.js"></script> <div id="header" class="header"></div>
<div id="main" class="main"></div>
<div id="input" class="input"></div>
</div>
<script src="model.js"></script>
<script src="controller.js"></script> <script src="controller.js"></script>
<script src="view.js"></script> <script src="view.js"></script>

50
Codealong/view.js
View file

@ -1,31 +1,53 @@
updateView(); updateView();
function updateView() { function updateView() {
app.innerHTML = /*html*/ ` header.innerHTML = '<h1 class="header">Lån en sykkel</h1>';
<h1>Bikes R Us</h1> main.innerHTML = /*html*/ `
<div>Alle sykkler:</div> <div>Alle sykkler:</div>
${bikeList()} ${bikeList()}`;
input.innerHTML = /*html*/ `
<h1> Legg til en sykkel:</h1>
${addBikeview()}
`; `;
} }
function bikeList() { function bikeList() {
let bikeHtml = ''; let bikeHtml = '';
let bikes = model.data.bikes
for (i = 0; i < modell.data.bikes.length; i++) { for (i = 0; i < model.data.bikes.length; i++) {
bikeHtml += /*html*/ ` bikeHtml += /*html*/ `
<div class="list">
<ul> <ul>
<li>Merke: ${modell.data.bikes[i].modell}</li> <li>Merke: ${bikes[i].brand}</li>
<li>Gir: ${modell.data.bikes[i].gears}</li> <li>Gir: ${bikes[i].gears}</li>
<li>Beskrivelse: ${modell.data.bikes[i].description}</li> <li>Beskrivelse: ${bikes[i].description}</li>
<li>Tilgjengelig: ${modell.data.bikes[i].isAvilable}</li> <li>Tilgjengelig: ${bikes[i].isAvilable}</li>
<li>Tilstand: ${modell.data.bikes[i].state}</li> <li>Tilstand: ${bikes[i].state}</li>
</ul>`; </ul>
</div>`;
} }
return bikeHtml; return bikeHtml;
} }
function addBikeview(){ function addBikeview() {
let addBikeHtml = /*html*/ ` let addBikeHtml = /*html*/ `
<div>
<label class="labels">Merke:</label>
<input type="text" onchange="model.input.newBike.brand = this.value">
</div>
<div>
<label class="labels">Gir:</label>
<input type="number" onchange="model.input.newBike.gears = this.value">
</div>
<div>
Er sykkelen tigjengelig<input type="checkbox" checked="checked" onclick="model.input.newBike.isAvailable = this.value">Ja</button>
<input type="checkbox" checked="" onclick="model.input.newBike.isAvailable = this.value">Nei</button>
</div>
<div>
<label class="labels">Beskrivelse:</label>
<textarea onchange="model.input.newBike.comment = this.value"></textarea>
</div>
<button onclick="addBike()">Legg til sykkel</button>
`; `;
return addBikeHtml
} }

22
oppgaver/checkLetters.js Normal file
View file

@ -0,0 +1,22 @@
const letters = "abcdefghijklmnopqrstuvwxzy ";
let string = "Not a pangram";
let string2 = "The quick brown fox jumps over the lazy dog"
// console.log(letters, string,letterArray, stringArray,test)
function isPangram(str) {
const lowerStr = str.toLowerCase();
if (letters.split('').every(char => lowerStr.includes(char))){
console.log('ja')
return true;
} else {
console.log('nei')
return false
};
}
isPangram(string2);