From 8257e4177bc3d4e2ea1487c67ebe57739dd2cdc9 Mon Sep 17 00:00:00 2001
From: Fredrik Baksaas <fredbaks@stud.ntnu.no>
Date: Sun, 31 Oct 2021 20:55:51 +0000
Subject: [PATCH] =?UTF-8?q?Lagt=20til=20funksjonalitet=20i=20handlekurv.ht?=
=?UTF-8?q?ml,=20lagt=20til=20handlekurv=20dropdown=20p=C3=A5=20alle=20sid?=
=?UTF-8?q?er,=20og=20jobba=20med=20handlekurvsystemet=20generelt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
css/style.css | 56 ++++++++++++++++++
css/styleHandlekurv.css | 39 ++++++++++---
handlekurv.html | 39 ++++++++-----
index.html | 9 ++-
js/checkout.js | 122 ++++++++++++++++++++++++++++++++++++++++
js/handlekurv.js | 57 ++++++++++++++-----
js/handlekurvVindu.js | 83 +++++++++++++++++++++++++++
meny.html | 7 +--
om_oss.html | 7 +--
9 files changed, 371 insertions(+), 48 deletions(-)
create mode 100644 js/checkout.js
create mode 100644 js/handlekurvVindu.js
diff --git a/css/style.css b/css/style.css
index 7641887..912864a 100644
--- a/css/style.css
+++ b/css/style.css
@@ -472,3 +472,59 @@ footer {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
+
+#hkMain{
+ position: fixed;
+ left: 98%;
+ transform: translate(-100%,0);
+ top: 7%;
+ min-height: 80px;
+ width: 250px;
+ border-radius: 7px;
+ box-shadow: 0px 0px 10px;
+ background-color: white;
+}
+
+#hkTrekant{
+ position: fixed;
+ top: -12.8%;
+ left: 57.5%;
+ width: 0;
+ height: 0;
+ border-left: 25px solid transparent;
+ border-right: 25px solid transparent;
+ border-bottom: 25px solid white;
+}
+
+#hkBody{
+ padding: 10px;
+}
+
+#hkListe{
+ padding-top: 10px;
+ font-size: 14px;
+ list-style-type: none;
+}
+
+.hkListeV, .hkListeH{
+ display: inline-block;
+
+}
+
+.hkListeV{
+ width: 75%;
+}
+
+.hkListeH{
+ width: 23%;
+ text-align: right;
+}
+
+#hkKnapp{
+ width: 100%;
+ height: 30px;
+ border: solid 1px;
+ border-radius: 5px;
+ background-color: #b82a31;
+ margin-top: 15px;
+}
\ No newline at end of file
diff --git a/css/styleHandlekurv.css b/css/styleHandlekurv.css
index ecd648e..4a6373f 100644
--- a/css/styleHandlekurv.css
+++ b/css/styleHandlekurv.css
@@ -7,14 +7,14 @@
padding: 30px;
border-radius: 7px;
box-shadow: 0px 5px 5px;
- background-color: white;
+ background-color: #FFE119;
}
-#coTimeSelect,#coBestill{
+#coTimeSelect,#coBestill, #coRabattInput, .coVareKnapp{
height: 30px;
border: solid 1px;
border-radius: 5px;
- background-color: white;
+ background-color: #b82a31;
}
#topBox{
@@ -29,11 +29,38 @@
position: relative;
padding-top: 50px;
padding-bottom: 50px;
- padding-left: 30px;
+ padding-left: 50px;
+ padding-right: 50px;
min-height: 100px;
width: 100%;
border: solid 1px;
border-radius: 5px;
+ background-color: #b82a31;
+ list-style-type: none;
+ font-size: 22px;
+}
+
+.coVareP{
+ padding-top: 5px;
+ padding-bottom: 5px;
+}
+
+.coVareVen{
+ display: inline-block;
+ width: 80%;
+}
+
+.coVareHoy{
+ display: inline-block;
+ text-align: right;
+ width: 19%;
+}
+
+.coVareKnapp{
+ width: 30px;
+ text-align: center;
+ display: inline-block;
+ background-color: #FFE119;
}
#coNedeLeft{
@@ -67,9 +94,7 @@
#coTimeSelect{
position: absolute;
- width: 100px;
- left: 100%;
- transform: translate(-100%,-15%);
+ transform: translate(30%,-15%);
}
#coRabatt{
diff --git a/handlekurv.html b/handlekurv.html
index 6dbe283..c24be18 100644
--- a/handlekurv.html
+++ b/handlekurv.html
@@ -37,10 +37,8 @@
</li>
</ul>
- <div class="cart">
- <a href="#">
- <img src="img/cart.svg" alt="cart">
- </a>
+ <div class="cart" onclick="toggleHandlekurvVindu()">
+ <img src="img/cart.svg" alt="cart">
</div>
</nav>
</header>
@@ -48,9 +46,19 @@
<main>
<div class="checkout" id="topBox">
<h2>Handlekurv</h2>
- <div id="coVarer">
- Handlekurven er tom
- </div>
+ <ul id="coVarer">
+ <li class="coVareP">Handlekurven er tom</li>
+ <li class="coVareP">
+ <div class="coVareVen">
+ <div class="coVareKnapp">-</div>
+ <div class="coVareKnapp">+</div>
+ 2 stk Margherita
+ </div>
+ <div class="coVareHoy">
+ NA,-
+ </div>
+ </li>
+ </ul>
</div>
<div class="checkout" id="bottomBox">
@@ -58,7 +66,7 @@
<div id="coLevering">
<h3>Estimert leveringstid:</h3>
<div id="coTime">
- ASAP (20 min)
+ Levering:
<select id="coTimeSelect">
<option>25</option>
<option>30</option>
@@ -76,19 +84,22 @@
<div style="width: 100%;">
<ul id="leftList" class="coPayList">
<li class="leftListPoint">Subtotal:</li>
- <li class="leftListPoint">Subtotal:</li>
- <li class="leftListPoint">Subtotal:</li>
+ <li class="leftListPoint">Levering:</li>
+ <li class="leftListPoint">Total:</li>
</ul>
<ul id="rightList" class="coPayList">
- <li class="rightListPoint">NA,-</li>
- <li class="rightListPoint">NA,-</li>
- <li class="rightListPoint">NA,-</li>
+ <li class="rightListPoint" id="subtotal">NA,-</li>
+ <li class="rightListPoint" id="levering">NA,-</li>
+ <li class="rightListPoint" id="total">NA,-</li>
</ul>
</div>
<button id="coBestill">Bestill</button>
</div>
</div>
+
+
+
</main>
<footer>
@@ -96,6 +107,8 @@
</footer>
<script src="js/navbar.js"></script>
+ <script src="js/handlekurvVindu.js"></script>
+ <script src="js/checkout.js"></script>
</body>
</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 0f2e6b2..ebcea6f 100644
--- a/index.html
+++ b/index.html
@@ -21,7 +21,7 @@
</div>
<div class="logo">
<a href="index.html">
- <img src="img/QuickFood-logo.png" alt="logo">
+ <img src="img/QuickFood logo.png" alt="logo">
</a>
</div>
<ul class="nav-links">
@@ -36,10 +36,8 @@
</li>
</ul>
- <div class="cart">
- <a href="#">
- <img src="img/cart.svg" alt="cart">
- </a>
+ <div class="cart" onclick="toggleHandlekurvVindu()">
+ <img src="img/cart.svg" alt="cart">
</div>
</nav>
</header>
@@ -136,6 +134,7 @@
</footer>
<script src="js/navbar.js"></script>
+ <script src="js/handlekurvVindu.js"></script>
</body>
</html>
diff --git a/js/checkout.js b/js/checkout.js
new file mode 100644
index 0000000..6602c96
--- /dev/null
+++ b/js/checkout.js
@@ -0,0 +1,122 @@
+//var handlekurv = JSON.parse(localStorage.getItem("handlekurv"));
+
+let ul = document.getElementById("coVarer");
+oppdaterCheckout();
+console.log(handlekurv);
+
+function oppdaterCheckout(){
+ ul.innerHTML = "";
+ let subtotal = 0;
+ if(handlekurv.length == 0){
+ let li = document.createElement("li");
+ ul.appendChild(li);
+ li.innerText = "Handlekurven er tom";
+ }else{
+ for(vare of handlekurv){
+ let antall = vare.antall;
+ let pris = vare.pris * antall;
+ subtotal += pris;
+ let navn = vare.navn;
+ let pointer = vare;
+
+ let li = document.createElement("li");
+ ul.appendChild(li);
+
+ let venstre = document.createElement("div");
+ li.appendChild(venstre);
+ venstre.className = "coVareVen";
+ venstre.innerText += " " + antall + " stk " + navn;
+
+ let minus = document.createElement("button");
+ minus.className = "coVareKnapp";
+ minus.innerText = "-";
+ minus.addEventListener("click", function(){trekkFra(pointer)});
+
+ let pluss = document.createElement("button");
+ pluss.className = "coVareKnapp";
+ pluss.innerText = "+";
+ pluss.addEventListener("click", function(){leggTil(pointer)});
+
+
+ venstre.prepend(pluss);
+ venstre.prepend(minus);
+
+ let hoyre = document.createElement("div");
+ li.appendChild(hoyre);
+ hoyre.className = "coVareHoy";
+ hoyre.innerText = pris + ",-";
+ }
+ }
+ pris(subtotal);
+ settTid();
+}
+
+function pris(subtotalPris){
+ let subtotal = document.getElementById("subtotal");
+ let levering = document.getElementById("levering");
+ let total = document.getElementById("total");
+
+ subtotal.innerHTML = subtotalPris + ",-";
+ levering.innerHTML = "40,-";
+ total.innerHTML = (subtotalPris + 40) + ",-";
+}
+
+function settTid(){
+ const date = new Date();
+ let time = date.getHours();
+ let min = date.getMinutes();
+
+ let select = document.getElementById("coTimeSelect");
+ select.innerHTML = "";
+
+ let delmin = 0;
+ let deltime = 0;
+ let tidut;
+
+ for(let i = 20; i<45; i = i+5){
+ tidut = "";
+ deltime = time;
+ delmin = min + i;
+
+ if((delmin/60) > 1){
+ deltime++;
+ if(deltime > 23){
+ deltime = 0;
+ }
+ }
+
+ delmin = delmin%60;
+ if(delmin < 10){
+ delmin = "0" + delmin;
+ }
+
+ let option = document.createElement("option");
+ option.innerText = deltime + ":" + delmin;
+ select.appendChild(option);
+
+ }
+}
+
+function trekkFra(vare){
+ for(item of handlekurv){
+ if(item.index == vare.index){
+ if(item.antall > 1){
+ item.antall--;
+ }else{
+ handlekurv.splice(handlekurv.indexOf(item), 1);
+ }
+ }
+ }
+
+ oppdaterCheckout();
+}
+
+function leggTil(vare){
+ for(item of handlekurv){
+ if(item.index == vare.index){
+ item.antall++;
+ }
+ }
+
+ oppdaterCheckout();
+}
\ No newline at end of file
diff --git a/js/handlekurv.js b/js/handlekurv.js
index ea35451..a5d915e 100644
--- a/js/handlekurv.js
+++ b/js/handlekurv.js
@@ -1,34 +1,61 @@
+if(localStorage.getItem("handlekurv") == null){
+ const handlekurv = [];
+ localStorage.setItem("handlekurv", JSON.stringify(handlekurv));
+ console.log(localStorage.getItem("handlekurv"));
+ console.log("la til ny");
+}else{
+ console.log(localStorage.getItem("handlekurv"));
+ console.log("brukte gamle");
+}
+
const varer = [
{
index : 1,
- navn : "margherita",
- pris : 130
+ navn : "Margherita",
+ pris : 130,
+ antall : 0
},
{
index : 2,
- navn : "hamburger",
- pris : 110
+ navn : "Hamburger",
+ pris : 110,
+ antall : 0
}
- ];
- const handlekurv = [];
+];
+
+const handlekurv = JSON.parse(localStorage.getItem("handlekurv"));
- for(let vare of varer){
- let index = vare.index;
- let submit = document.getElementById("submitIndex" + index);
- let pointer = vare;
-
- if(submit){
- submit.addEventListener("click", function(){leggTilHandlekurv(pointer)});
- }
+for(let vare of varer){
+ let index = vare.index;
+ let submit = document.getElementById("submitIndex" + index);
+ let pointer = vare;
+
+ if(submit){
+ submit.addEventListener("click", function(){leggTilHandlekurv(pointer)});
}
+}
function leggTilHandlekurv(vare){
let index = vare.index;
let select = document.getElementById("selectIndex" + index)
let antall = select.value;
+ let navn = null;
- for(let i=0; i<antall; i++){
+ for(item of handlekurv){
+ if(item.navn == vare.navn){
+ navn = item;
+ }
+ }
+
+ if(!navn){
handlekurv.push(vare);
+ navn = vare;
+ navn.antall++;
+ antall--;
+ }
+
+ for(let i=0; i<antall; i++){
+ navn.antall++;
}
sorterListe();
diff --git a/js/handlekurvVindu.js b/js/handlekurvVindu.js
new file mode 100644
index 0000000..d1c04b8
--- /dev/null
+++ b/js/handlekurvVindu.js
@@ -0,0 +1,83 @@
+if(localStorage.getItem("handlekurv") == null){
+ const handlekurv = [];
+ localStorage.setItem("handlekurv", JSON.stringify(handlekurv));
+ console.log(localStorage.getItem("handlekurv"));
+ console.log("la til ny");
+}else{
+ console.log(localStorage.getItem("handlekurv"));
+ console.log("brukte gamle");
+}
+
+const handlekurv = JSON.parse(localStorage.getItem("handlekurv"));
+var toggle = false;
+
+function toggleHandlekurvVindu(){
+ if(toggle){
+ console.log("Vindu av");
+ let main = document.getElementById("hkMain");
+ document.body.removeChild(main);
+ toggle = false;
+ }else{
+ console.log("Vindu på");
+ lagVindu();
+ toggle = true;
+ }
+}
+
+function lagVindu(){
+ let body = document.body;
+
+ let hkMain = document.createElement("div");
+ hkMain.id = "hkMain";
+ body.appendChild(hkMain);
+
+ let hkTrekant = document.createElement("div");
+ hkTrekant.id = "hkTrekant";
+ hkMain.appendChild(hkTrekant);
+
+ let hkBody = document.createElement("div");
+ hkBody.id = "hkBody";
+ hkMain.appendChild(hkBody);
+
+ hkBody.innerText = "Handlekurv:"
+
+ hkListe = document.createElement("ul");
+ hkBody.appendChild(hkListe);
+ hkListe.id = "hkListe";
+
+
+ if(handlekurv.length == 0){
+ let li = document.createElement("li");
+ hkListe.appendChild(li);
+ li.innerText = "Handlekurven er tom";
+ }else{
+ for(vare of handlekurv){
+ let antall = vare.antall;
+ let pris = vare.pris * antall;
+ let navn = vare.navn;
+
+ let li = document.createElement("li");
+ hkListe.appendChild(li);
+ let venstre = document.createElement("div");
+ li.appendChild(venstre);
+ venstre.className = "hkListeV";
+ venstre.innerText = antall + " stk " + navn;
+
+ let hoyre = document.createElement("div");
+ li.appendChild(hoyre);
+ hoyre.className = "hkListeH";
+ hoyre.innerText = pris + ",-";
+
+ }
+ }
+
+ let link = document.createElement("a");
+ link.href = "handlekurv.html";
+
+ let button = document.createElement("button");
+ button.id = "hkKnapp";
+ button.innerText = "Gå til checkout";
+
+ link.appendChild(button);
+ hkBody.appendChild(link);
+}
\ No newline at end of file
diff --git a/meny.html b/meny.html
index 3912650..39704b9 100644
--- a/meny.html
+++ b/meny.html
@@ -37,10 +37,8 @@
</li>
</ul>
- <div class="cart">
- <a href="#">
- <img src="img/cart.svg" alt="cart">
- </a>
+ <div class="cart" onclick="toggleHandlekurvVindu()">
+ <img src="img/cart.svg" alt="cart">
</div>
</nav>
</header>
@@ -107,6 +105,7 @@
</footer>
<script src="js/navbar.js"></script>
+ <script src="js/handlekurvVindu.js"></script>
</body>
</html>
\ No newline at end of file
diff --git a/om_oss.html b/om_oss.html
index 3b07747..cef59c6 100644
--- a/om_oss.html
+++ b/om_oss.html
@@ -35,10 +35,8 @@
</li>
</ul>
- <div class="cart">
- <a href="#">
- <img src="img/cart.svg" alt="cart">
- </a>
+ <div class="cart" onclick="toggleHandlekurvVindu()">
+ <img src="img/cart.svg" alt="cart">
</div>
</nav>
</header>
@@ -95,6 +93,7 @@
</footer>
<script src="js/navbar.js"></script>
<script src="js/handlekurv.js"></script>
+ <script src="js/handlekurvVindu.js"></script>
</body>
</html>
\ No newline at end of file
--
GitLab