Skip to content
Snippets Groups Projects
Commit 6d399860 authored by Fredrik Baksaas's avatar Fredrik Baksaas
Browse files

La til populering av meny ved js

parent 81de18e2
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
css/style.css
+ 3
− 2
View file @ 6d399860
...@@ -409,6 +409,7 @@ footer { ...@@ -409,6 +409,7 @@ footer {
position: relative, left; position: relative, left;
margin:0px; margin:0px;
padding:0px; padding:0px;
font-size: 10px;
} }
.menyListe{ .menyListe{
...@@ -420,13 +421,13 @@ footer { ...@@ -420,13 +421,13 @@ footer {
} }
.menyListeVenstre{ .menyListeVenstre{
width: 80%; width: 70%;
display: inline-block; display: inline-block;
text-align: left; text-align: left;
} }
.menyListeHoyre{ .menyListeHoyre{
width: 18%; width: 29%;
display: inline-block; display: inline-block;
text-align: right; text-align: right;
} }
......
js/handlekurv.js
+ 63
− 36
View file @ 6d399860
...@@ -11,26 +11,74 @@ if(localStorage.getItem("handlekurv") == null){ ...@@ -11,26 +11,74 @@ if(localStorage.getItem("handlekurv") == null){
const varer = [ const varer = [
{ {
index : 1, index : 1,
navn : "Margherita", navn : "Hamburger",
pris : 130, pris : 100,
antall : 0 antall : 0,
type: "Burger",
beskrivelse: "Storfe kjøtt, hamburgerbrød, løk, salat, tomat, dressing"
}, },
{ {
index : 2, index : 2,
navn : "Hamburger", navn : "Margherita",
pris : 110, pris : 130,
antall : 0 antall : 0,
type: "Pizza",
beskrivelse: "Pizzabunn, tomatsaus, ost, basilikum"
} }
]; ];
for(let vare of varer){ const typer = ["Burger", "Pizza", "Drikke"];
let index = vare.index;
let submit = document.getElementById("submitIndex" + index);
let pointer = vare.navn;
if(submit){ for(typ of typer){
submit.addEventListener("click", function(){leggTilHandlekurv(pointer)}); for(rett of varer){
if(rett.type == typ){
leggTilListeElem(rett, typ);
}
}
} }
function leggTilListeElem(rett, type){
let rettNavn = rett.navn;
let rettPris = rett.pris;
let rettBesk = rett.beskrivelse;
let liste = document.getElementById("menyListe" + type);
liste.innerHTML = "";
let li = document.createElement("li");
let navn = document.createElement("div");
navn.className = "menyListeVenstre";
navn.innerText = rettNavn;
let pris = document.createElement("div");
pris.className = "menyListeHoyre";
pris.innerText = rettPris + ",-";
let linje = document.createElement("div");
linje.className = "menyLinje";
let besk = document.createElement("div");
besk.className = "menyListeVenstre menyListeBesk";
besk.innerText = rettBesk;
let butt = document.createElement("div");
butt.className = "menyListeHoyre";
let button = document.createElement("button");
button.className = "menybutton";
button.addEventListener("click", function(){leggTilHandlekurv(rettNavn)});
button.innerText = "Legg til handlekurv"
butt.appendChild(button);
li.appendChild(navn);
li.appendChild(pris);
li.appendChild(linje);
li.appendChild(besk);
li.appendChild(butt);
liste.appendChild(li);
} }
function leggTilHandlekurv(vare){ function leggTilHandlekurv(vare){
...@@ -58,30 +106,9 @@ for(let vare of varer){ ...@@ -58,30 +106,9 @@ for(let vare of varer){
sorterListe(); sorterListe();
console.log(handlekurv);
localStorage.setItem("handlekurv", JSON.stringify(handlekurv)); localStorage.setItem("handlekurv", JSON.stringify(handlekurv));
} }
function sorterListe(){ function sorterListe(){
return handlekurv.sort(function(a,b){return a.index - b.index}); return handlekurv.sort(function(a,b){return a.index - b.index});
} }
\ No newline at end of file
function skrivVerdi(){
let liste = document.getElementById("output");
let strListe = localStorage.getItem("handlekurv");
console.log(strListe);
let objListe = JSON.parse(strListe);
console.log(objListe);
for(let vare of objListe){
let li = document.createElement("li");
li.innerText = vare.navn + ", koster " + vare.pris;
liste.appendChild(li);
}
}
\ No newline at end of file
meny.html
+ 6
− 19
View file @ 6d399860
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<body> <body>
<header> <header id="header">
<nav> <nav>
<div class="burger"> <div class="burger">
<div class="line1"></div> <div class="line1"></div>
...@@ -64,14 +64,7 @@ ...@@ -64,14 +64,7 @@
<header> <header>
<h1> Burgere</h1> <h1> Burgere</h1>
</header> </header>
<ul class="menyListe"> <ul class="menyListe" id="menyListeBurger">
<li>
<div class="menyListeVenstre">Burger</div>
<div class="menyListeHoyre">100,-</div>
<div class="menyLinje"></div>
<div class="menyListeVenstre menyListeBesk">Ost, Salsa, Jalapeño</div>
<div class="menyListeHoyre"><button class="menybutton" onclick="leggTilHandlekurv('vare')"> Buy Me!</button></div>
</li>
</ul> </ul>
</section> </section>
...@@ -79,10 +72,7 @@ ...@@ -79,10 +72,7 @@
<header> <header>
<h1>Pizza</h1> <h1>Pizza</h1>
</header> </header>
<ul> <ul class="menyListe" id="menyListePizza">
<li id="Margarita">Margarita</li>
<li id="Peperoni">Peperoni Pizza</li>
</ul> </ul>
</section> </section>
...@@ -90,10 +80,7 @@ ...@@ -90,10 +80,7 @@
<header> <header>
<h1>Drikke</h1> <h1>Drikke</h1>
</header> </header>
<ul> <ul class="menyListe" id="menyListeDrikke">
<li id="Cola">Cola</li>
<li id="Sprite">Sprite</li>
</ul> </ul>
</section> </section>
</div> </div>
...@@ -108,8 +95,8 @@ ...@@ -108,8 +95,8 @@
</footer> </footer>
<script src="js/navbar.js"></script> <script src="js/navbar.js"></script>
<script src="js/handlekurvVindu.js"></script>
<script src="js/handlekurv.js"></script> <script src="js/handlekurv.js"></script>
<script src="js/handlekurvVindu.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment