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