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