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

Lagt til funksjonalitet i handlekurv.html, lagt til handlekurv dropdown på...

Lagt til funksjonalitet i handlekurv.html, lagt til handlekurv dropdown på alle sider, og jobba med handlekurvsystemet generelt
parent 0eda3d49
No related branches found
No related tags found
No related merge requests found
......@@ -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
......@@ -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{
......
......@@ -37,10 +37,8 @@
</li>
</ul>
<div class="cart">
<a href="#">
<div class="cart" onclick="toggleHandlekurvVindu()">
<img src="img/cart.svg" alt="cart">
</a>
</div>
</nav>
</header>
......@@ -48,9 +46,19 @@
<main>
<div class="checkout" id="topBox">
<h2>Handlekurv</h2>
<div id="coVarer">
Handlekurven er tom
<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
......@@ -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="#">
<div class="cart" onclick="toggleHandlekurvVindu()">
<img src="img/cart.svg" alt="cart">
</a>
</div>
</nav>
</header>
......@@ -136,6 +134,7 @@
</footer>
<script src="js/navbar.js"></script>
<script src="js/handlekurvVindu.js"></script>
</body>
</html>
//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
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;
......@@ -26,9 +39,23 @@ const varer = [
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();
......
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
......@@ -37,10 +37,8 @@
</li>
</ul>
<div class="cart">
<a href="#">
<div class="cart" onclick="toggleHandlekurvVindu()">
<img src="img/cart.svg" alt="cart">
</a>
</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
......@@ -35,10 +35,8 @@
</li>
</ul>
<div class="cart">
<a href="#">
<div class="cart" onclick="toggleHandlekurvVindu()">
<img src="img/cart.svg" alt="cart">
</a>
</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
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment