From 6d39986056f516be0a31c3748ca1b2d5ed9ee7aa Mon Sep 17 00:00:00 2001 From: Fredrik Baksaas <fredbaks@stud.ntnu.no> Date: Wed, 3 Nov 2021 13:10:13 +0000 Subject: [PATCH] La til populering av meny ved js --- css/style.css | 5 ++- js/handlekurv.js | 99 ++++++++++++++++++++++++++++++------------------ meny.html | 25 +++--------- 3 files changed, 72 insertions(+), 57 deletions(-) diff --git a/css/style.css b/css/style.css index d0c17cc..50b49f8 100644 --- a/css/style.css +++ b/css/style.css @@ -409,6 +409,7 @@ footer { position: relative, left; margin:0px; padding:0px; + font-size: 10px; } .menyListe{ @@ -420,13 +421,13 @@ footer { } .menyListeVenstre{ - width: 80%; + width: 70%; display: inline-block; text-align: left; } .menyListeHoyre{ - width: 18%; + width: 29%; display: inline-block; text-align: right; } diff --git a/js/handlekurv.js b/js/handlekurv.js index 6f5d5a5..22757df 100644 --- a/js/handlekurv.js +++ b/js/handlekurv.js @@ -11,27 +11,75 @@ if(localStorage.getItem("handlekurv") == null){ const varer = [ { index : 1, - navn : "Margherita", - pris : 130, - antall : 0 + navn : "Hamburger", + pris : 100, + antall : 0, + type: "Burger", + beskrivelse: "Storfe kjøtt, hamburgerbrød, løk, salat, tomat, dressing" }, { index : 2, - navn : "Hamburger", - pris : 110, - antall : 0 + navn : "Margherita", + pris : 130, + antall : 0, + type: "Pizza", + beskrivelse: "Pizzabunn, tomatsaus, ost, basilikum" } ]; - -for(let vare of varer){ - let index = vare.index; - let submit = document.getElementById("submitIndex" + index); - let pointer = vare.navn; - - if(submit){ - submit.addEventListener("click", function(){leggTilHandlekurv(pointer)}); + +const typer = ["Burger", "Pizza", "Drikke"]; + + +for(typ of typer){ + 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){ let navn = null; @@ -57,31 +105,10 @@ for(let vare of varer){ sorterListe(); - - console.log(handlekurv); + localStorage.setItem("handlekurv", JSON.stringify(handlekurv)); } function sorterListe(){ return handlekurv.sort(function(a,b){return a.index - b.index}); - } - - - - - - 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 diff --git a/meny.html b/meny.html index 5591dae..476a00b 100644 --- a/meny.html +++ b/meny.html @@ -13,7 +13,7 @@ <body> - <header> + <header id="header"> <nav> <div class="burger"> <div class="line1"></div> @@ -64,14 +64,7 @@ <header> <h1> Burgere</h1> </header> - <ul class="menyListe"> - <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 class="menyListe" id="menyListeBurger"> </ul> </section> @@ -79,21 +72,15 @@ <header> <h1>Pizza</h1> </header> - <ul> - <li id="Margarita">Margarita</li> - <li id="Peperoni">Peperoni Pizza</li> - - </ul> + <ul class="menyListe" id="menyListePizza"> + </ul> </section> <section id="Dmny"> <header> <h1>Drikke</h1> </header> - <ul> - <li id="Cola">Cola</li> - <li id="Sprite">Sprite</li> - + <ul class="menyListe" id="menyListeDrikke"> </ul> </section> </div> @@ -108,8 +95,8 @@ </footer> <script src="js/navbar.js"></script> - <script src="js/handlekurvVindu.js"></script> <script src="js/handlekurv.js"></script> + <script src="js/handlekurvVindu.js"></script> </body> </html> \ No newline at end of file -- GitLab