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

some stuff

Browse source
This commit is contained in:
Geir Okkenhaug Jerstad 2024-10-31 09:07:48 +01:00
parent 4ae480551b
commit cf77bca4e0
15 changed files with 257 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
Codealong/controller.js Normal file
View file

@ -0,0 +1 @@

30
Codealong/index.html
View file

@ -1,30 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<div id="text">Tekst her</div>
<button onclick="change()">Trykk her</button>
Vis dyr: <input id="showAnimal" onchange="show()"></button>
<div id="show"></div>
</div>
<script>
function change() {
let animalList = ["hund", "katt", "esel"];
let animal = animalList[Math.floor(Math.random() * animalList.length)];
document.getElementById('text').innerHTML = `${animal}`;
}
function show(){
let animal = document.getElementById('showAnimal').value;
document.getElementById('show').innerHTML = `${animal}`;
}
</script>
</body>
</html>

36
Codealong/modell.js Normal file
View file

@ -0,0 +1,36 @@
// 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,
},
]
},
}

15
Codealong/sykkel.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="modell.js"></script>
<script src="controller.js"></script>
<script src="view.js"></script>
</body>
</html>

31
Codealong/view.js Normal file
View file

@ -0,0 +1,31 @@
updateView();
function updateView() {
app.innerHTML = /*html*/ `
<h1>Bikes R Us</h1>
<div>Alle sykkler:</div>
${bikeList()}
`;
}
function bikeList() {
let bikeHtml = '';
for (i = 0; i < modell.data.bikes.length; i++) {
bikeHtml += /*html*/ `
<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>`;
}
return bikeHtml;
}
function addBikeview(){
let addBikeHtml = /*html*/ `
`;
}

5
morse/view.js
View file

@ -1,7 +1,4 @@
function updateView(){
app.innerHTML = /*html*/ `
<input type="text" onchange="lettersFromInput=this.value"><button onclick="translator(lettersFromInput)">Button</button>
`;
app.innerHTML = '<input type="text" onchange="lettersFromInput=this.value"><button onclick="translator(lettersFromInput)">Button</button>';
}

38
mostly/flock.js Normal file
View file

@ -0,0 +1,38 @@
// class Flock {
// constructor(n) {
// this.seagulls = n;
// }
// cojoin(other) {
// this.seagulls += other.seagulls;
// return this;
// }
// breed(other) {
// this.seagulls = this.seagulls * other.seagulls;
// return this;
// }
// }
// const FlockA = new Flock(4);
// const FlockB = new Flock(2);
// const FlockC = new Flock(0);
// const result = FlockA
// .cojoin(FlockC)
// .breed(FlockB)
// .cojoin(FlockA.breed(FlockB))
// .seagulls;
// const cojoin = (flockX, flockY) => flockX + flockY;
// const breed = (flockX, flockY) => flockX * flockY;
const FlockA = 4;
const FlockB = 2;
const FlockC = 0;
// const result = cojoin(breed(FlockB, cojoin(FlockA, FlockC)), breed(FlockA, FlockB))
const add = (x, y) => x + y;
const multiply = (x, y) => x * y;
const result = add(multiply(FlockB, add(FlockA, FlockC)), multiply(FlockA, FlockB));
console.log(result);

7
package-lock.json generated
View file

@ -5,6 +5,7 @@
"packages": {
"": {
"dependencies": {
"@mostly-adequate/support": "^2.0.1",
"prompt": "^1.3.0",
"react-router-dom": "^6.26.2"
},
@ -21,6 +22,12 @@
"node": ">=0.1.90"
}
},
"node_modules/@mostly-adequate/support": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/@mostly-adequate/support/-/support-2.0.1.tgz",
"integrity": "sha512-+16tUURaxiGFGBiYcI4Xu82UsMLSxc2F5DVGimMVkkP/tO+wRNuDPUJTW9YMY7UlHW9KQ9XRHShDEubqliy7vA==",
"license": "MIT"
},
"node_modules/@remix-run/router": {
"version": "1.19.2",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.2.tgz",

1
package.json
View file

@ -1,5 +1,6 @@
{
"dependencies": {
"@mostly-adequate/support": "^2.0.1",
"prompt": "^1.3.0",
"react-router-dom": "^6.26.2"
},

0
prosjekt/controller.js Normal file
View file

4
prosjekt/helpers.js Normal file
View file

@ -0,0 +1,4 @@
const app = document.getElementById('app');
const headerHtml = document.getElementById('header');
const mainHtml = document.getElementById('mainView');
const footer = document.getElementById('footer');

48
prosjekt/index.html
View file

@ -4,45 +4,23 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Super cool project for homelabers</title>
<title>Book R Us</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<style>
div.page{
height: 100vh;
display: grid;
grid-template-columns: 1fr 4fr;
grid-template-rows: 20px 10fr 20px;
grid-template-areas:
'menu header'
'menu mainView'
'menu footer'; ;
}
div.header{
background-color: aquamarine;
grid-area: header;
}
div.menu{
background-color: grey;
grid-area: menu;
}
div.mainView{
background-color: whitesmoke;
grid-area: mainView;
}
div.footer{
background-color: black;
grid-area: footer;
}
</style>
<link rel="stylesheet" href="style.css">
<script src="controller.js"></script>
<script src="modell.js"></script>
<script src="view.js"></script>
<script type="text/javascript" src="helpers.js"></script>
</head>
<body>
<div class="page">
<div class="header">Header</div>
<div class="menu">Menu</div>
<div class="mainContent">MainContent</div>
<div class="footer">Footer</div>
<body onload="updateView()">
<div id="app" class="app">
<div id="header" class="header">Header</div>
<div id="menu" class="menu">Menu</div>
<div id="mainView" class="mainView">MainContent</div>
<div id="footer" class="footer">Footer</div>
</div>
<script></script>
</body>
</html>

22
prosjekt/modell.js Normal file
View file

@ -0,0 +1,22 @@
var model = {
app: {
pages: ['home','new'],
currentPage: "home",
},
input:{
search: '',
},
data: {
books: [],
book:{
id: 0,
title: '',
authorFirstName: '',
authorLastName: '',
file: '',
coverImg: '',
},
}
}

43
prosjekt/style.css Normal file
View file

@ -0,0 +1,43 @@
.app{
height: 100vh;
display: grid;
grid-template-columns: 1fr 4fr;
grid-template-rows: 100px 10fr 20px;
grid-template-areas:
'header header'
'menu mainView'
'footer footer'; ;
}
.header{
background-color: rgb(78, 206, 163);
color: black;
height: auto;
grid-area: header;
/* justify-content: center; */
}
.header li {
float: left;
display: inline;
list-style-type: none;
}
.header li:hover {
background-color: #b35959;
}
.header li input {
float: right;
}
.menu{
background-color: grey;
color: black;
grid-area: menu;
}
.mainView{
background-color: rgb(218, 131, 131);
color: black;
grid-area: mainView;
}
.footer{
background-color: black;
grid-area: footer;
}

45
prosjekt/view.js Normal file
View file

@ -0,0 +1,45 @@
const page = model.app.currentPage;
function updateView(){
if (page == "home"){
viewhome();
} else if (page == 'new'){
viewNew();
}
}
function viewhome(){
navbar();
document.getElementById('mainView').innerHTML = /*html*/ `
<h1>Hello from Home</h1>
`;
// mainHtml.innerHTML += 'Hello'
}
function navbar(){
document.getElementById('header').innerHTML = /*html*/ `
<ul>
<li><div onclick="goNew()">Books R Us</div></li>
<li>Søk: <input type="text"></li>
</ul>`;
}
function viewNew(){
navbar();
document.getElementById('mainView').innerHTML = '<h1>Hello from new</h1>'
}
function goNew(){
model.app.currentPage = 'new';
updateView();
}
function dialog() {
document.getElementById('mainView'),innerHTML += /*html*/ `
<form method="dialog">
<button type="button" id="dialog-trigger">Show me!</button>
<dialog id="dialog"><p>Ansewer the question</p>
<menu>
<button value="1">1</button>
</menu>
</form>
`;
}