codealong og oppgave

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

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;
}

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,
},
]
},
}

View file

@ -3,11 +3,16 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<title>Sykkelutleie</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<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="view.js"></script>

View file

@ -1,31 +1,53 @@
updateView();
function updateView() {
app.innerHTML = /*html*/ `
<h1>Bikes R Us</h1>
header.innerHTML = '<h1 class="header">Lån en sykkel</h1>';
main.innerHTML = /*html*/ `
<div>Alle sykkler:</div>
${bikeList()}
${bikeList()}`;
input.innerHTML = /*html*/ `
<h1> Legg til en sykkel:</h1>
${addBikeview()}
`;
}
function bikeList() {
let bikeHtml = '';
for (i = 0; i < modell.data.bikes.length; i++) {
let bikes = model.data.bikes
for (i = 0; i < model.data.bikes.length; i++) {
bikeHtml += /*html*/ `
<div class="list">
<ul>
<li>Merke: ${modell.data.bikes[i].modell}</li>
<li>Gir: ${modell.data.bikes[i].gears}</li>
<li>Beskrivelse: ${modell.data.bikes[i].description}</li>
<li>Tilgjengelig: ${modell.data.bikes[i].isAvilable}</li>
<li>Tilstand: ${modell.data.bikes[i].state}</li>
</ul>`;
<li>Merke: ${bikes[i].brand}</li>
<li>Gir: ${bikes[i].gears}</li>
<li>Beskrivelse: ${bikes[i].description}</li>
<li>Tilgjengelig: ${bikes[i].isAvilable}</li>
<li>Tilstand: ${bikes[i].state}</li>
</ul>
</div>`;
}
return bikeHtml;
}
function addBikeview() {
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);