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

Javascript til handlekurv, og starta på handlekurv.html

parent 6614899b
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
css/styleHandlekurv.css 0 → 100644
+ 49
− 0
View file @ 3be09aad
.checkout{
width : 90%;
position: relative;
left: 50%;
transform: translate(-50%,0);
margin-top: 20px;
padding: 30px;
border-radius: 7px;
box-shadow: 0px 5px 5px;
background-color: white;
}
#checkoutNedeLeft{
position:relative;
display: inline-block;
width: 50%;
}
#checkoutNedeRight{
position: relative;
display: inline-block;
height: 100px;
}
#checkoutRabatt{
position: relative;
margin-top: 10px;
}
#checkoutPay{
display: inline-block;
}
#checkoutTime{
position: relative;
left:8%;
width: 20%;
height: 10%;
}
#checkoutRabattInput{
width: 90%;
margin-top: 1%;
}
.checkoutPayTekst{
display: inline-block;
position: relative;
}
handlekurv.html 0 → 100644
+ 88
− 0
View file @ 3be09aad
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QuickFood</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/styleHandlekurv.css">
<link rel="icon" type="image/png" href="img/QuickFood Favicon.png">
</head>
<body>
<header>
<nav>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<div class="logo">
<a href="index.html">
<img src="img/QuickFood logo.png" alt="logo">
</a>
</div>
<ul class="nav-links">
<li>
<a href="#">Meny</a>
</li>
<li>
<a href="#">Min side</a>
</li>
<li>
<a href="#">Om oss</a>
</li>
</ul>
<div class="cart">
<a href="#">
<img src="img/cart.svg" alt="cart">
</a>
</div>
</nav>
</header>
<main>
<div class="checkout">
<h2>Handlekurv</h2>
<div>
Handlekurven er tom
</div>
</div>
<div class="checkout">
<div id="checkoutNedeLeft">
<div id="checkoutLevering">
<h3>Estimert leveringstid:</h3>
ASAP (20 min)
<select id="checkoutTime">
<option>25</option>
<option>30</option>
<option>35</option>
<option>40</option>
</select>
</div>
<div id="checkoutRabatt">
Har du en rabattkode?
<input type="text" id="checkoutRabattInput">
</div>
</div>
<div id="checkoutNedeRight">
<div id="checkoutPay">
<p class="checkoutPayTekst">Subtotal:</p><pclass="checkoutPayTekst">450kr</p>
</div>
</div>
</div>
</main>
<footer>
bla bla bla kontakt oss.. tlf epost Adresse osv
</footer>
<script src="js/navbar.js"></script>
</body>
</html>
\ No newline at end of file
js/handlekurv.js 0 → 100644
+ 62
− 0
View file @ 3be09aad
const varer = [
{
index : 1,
navn : "margherita",
pris : 130
},
{
index : 2,
navn : "hamburger",
pris : 110
}
];
const 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)});
}
}
function leggTilHandlekurv(vare){
let index = vare.index;
let select = document.getElementById("selectIndex" + index)
let antall = select.value;
for(let i=0; i<antall; i++){
handlekurv.push(vare);
}
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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment