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

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
Download patch file Download diff file Expand all files Collapse all files

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