Skip to content

Commit

Permalink
Fixed bug in cart enhancement
Browse files Browse the repository at this point in the history
  • Loading branch information
@tharanithar-r
tharanithar-r committed Oct 27, 2023
1 parent def36cd commit fe341a8
Show file tree
Hide file tree
Showing 3 changed files with 88 additions and 63 deletions.
18 changes: 17 additions & 1 deletion menu.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,10 @@ div.col h3{
padding-left: 10px;
}

.sidebar .row{
padding-top: 10px;
}

.sidebar{
background-color:darkgrey !important;
}
Expand All @@ -109,6 +113,9 @@ div.col h3{
border-radius: 8px;
width: 50%;
}
.remove:hover{
background: #E06161;
}

.fb{
background-color: #2F4858;
Expand All @@ -123,8 +130,17 @@ div.col h3{
background-color: black;
width: 100px;
}


.flex-menu {
display: flex;
justify-content: space-between;
gap: 1px;
}
.item-card{
padding: 12px;
box-shadow: 0 2px 6px rgba(65, 11, 16, .15)
}

.fb:hover{
background: #385568;
}
97 changes: 53 additions & 44 deletions menu.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
Expand Down Expand Up @@ -54,6 +56,12 @@
<li class="nav-item">
<a href="faq.html" class="nav-link active" style="color:rgba(255, 255, 255);">FAQ</a>
</li>
<li class="nav-item">
<a href="signup.html" class="nav-link active" style="color:rgba(255, 255, 255);">Sign Up</a>
</li>
<li class="nav-item">
<a href="login.html" class="nav-link active" style="color:rgba(255, 255, 255);">Login</a>
</li>
</ul>
</div>
</div>
Expand All @@ -62,35 +70,16 @@
<div class="sidebar h-100" style="overflow-y: scroll;">
<br>
<div class="container">
<div class="row">
<div class="col-10" style="text-align: center;">
<h3 style="color: #2F4858;padding-left: 50px;font-weight: bold;">Cart</h3>
</div>
<div class="col-2"><div type="button" style="background: #2F4858;border-radius: 12px;color: white;" class="close col">X</div></div>
<div class="row">
<div class="col-10" style="text-align: center;">
<h3 style="color: #2F4858;padding-left: 50px;font-weight: bold;">Cart</h3>
</div>
<br>
<div id="divcart">
<div class="card item-card" id="cartcontainer" style="border-bottom-left-radius: 0px;border-bottom-right-radius: 0px; border-top-left-radius: 12px;border-top-right-radius: 12px;">

</div>
<div class="footer">
<div class="card" style="border-top-right-radius: 0px;border-top-left-radius: 0px;border-bottom-left-radius: 12px;border-bottom-right-radius: 12px;padding:12px;background-color: #de5656;">
<div class="row" >
<div class="col-6" style="text-align: end;font-weight: bold;font-size: large;">Total:</div>
<div class="col-6" style="text-align: start;font-weight: bold;font-size: large;"><label id="lbltotal"></label></div>
</div>
<div class="row" style="height: 15px;"></div>
<div class="row">
<div class="col" style="text-align: center;">
<button class="fb" style="background-color: #2F4858;color: white;">Checkout<a href="order.html"></a></button>
</div>
</div>
<div class="row" style="height: 15px;"></div>
<div class="row">
<div class="col" style="text-align: center;"><button class="fb" id="clear">Clear Cart</button></div>
</div>
</div>
<div class="col-2"><div type="button" style="background: #2F4858;border-radius: 12px;color: white;" class="close col">X</div>
</div>
</div>
<br>
<div id="divcart">
<div class="card item-card" id="cartcontainer" style="border-bottom-left-radius: 0px;border-bottom-right-radius: 0px; border-top-left-radius: 12px;border-top-right-radius: 12px;">
<!-- <div class="row">
<div class="col-md-6">
<div class="row">name</div>
Expand All @@ -101,17 +90,37 @@ <h3 style="color: #2F4858;padding-left: 50px;font-weight: bold;">Cart</h3>
<div class="row" type="button">remove</div>
</div>
</div> -->
</div>
<div class="footer">
<div class="card" style="border-top-right-radius: 0px;border-top-left-radius: 0px;border-bottom-left-radius: 12px;border-bottom-right-radius: 12px;padding:12px;background-color: #de5656;">
<div class="row" >
<div class="col-6" style="text-align: end;font-weight: bold;font-size: large;">Total:</div>
<div class="col-6" style="text-align: start;font-weight: bold;font-size: large;"><label id="lbltotal"></label></div>
</div>
<div class="row" style="height: 15px;"></div>
<div class="row">
<div class="col" style="text-align: center;">
<button class="fb" style="">Checkout<a href="order.html"></a></button>
</div>
</div>
<div class="row" style="height: 15px;"></div>
<div class="row">
<div class="col" style="text-align: center;">
<button class="fb" id="clear">Clear Cart</button>
</div>
</div>
</div>
<div id="divempty" style="display: none;">
<div class="card item-card" id="cartcontainer" style="border-radius: 12px;padding:30px;">
<label style="text-align: center;">Your Cart is Empty</label>
</div>
</div>
<div id="divempty" style="display: none;">
<div class="card item-card" id="cartcontainer" style="border-radius: 12px;padding:30px;">
<label style="text-align: center;">Your Cart is Empty</label>

</div>
</div>
</div>
</div>
<br>
<br>

</div>
</div>
<h1 class="text-bg-dark">CAFE MENU</h1>
Expand All @@ -122,52 +131,52 @@ <h1 class="text-bg-dark">CAFE MENU</h1>
<tr>
<th>ITEMS</th>
<th style="width:117px">PRICE</th>
<th style="width: 100px;"></th>
<th style="width: 120px;"></th>
</tr>
</thead>
<tbody>
<tr>
<td id="itemi1">Hot Coffee</td>
<td id="pricei1">Rs.80</td>
<td id="ri1" class="add"><button id="i1" class="btn cart" type="button">Add</button></td>
<td id="ri1" class="add flex-menu"><button id="i1" class="btn cart" type="button">Add</button></td>
</tr>
<tr>
<td id="itemi2">Black Coffee</td>
<td id="pricei2">Rs.80</td>
<td id="ri2" class="add"><button id="i2" class="btn cart" type="button">Add</button></td>
<td id="ri2" class="add flex-menu"><button id="i2" class="btn cart" type="button">Add</button></td>
</tr>
<tr>
<td id="itemi3">Hazelnut Cold Coffee</td>
<td id="pricei3">Rs.125</td>
<td id="ri3" class="add"><button id="i3" class="btn cart" type="button">Add</button></td>
<td id="ri3" class="add flex-menu"><button id="i3" class="btn cart" type="button">Add</button></td>
</tr>
<tr>
<td id="itemi4">Chocolate Cold Coffee</td>
<td id="pricei4">Rs.125</td>
<td id="ri4" class="add"><button id="i4" class="btn cart" type="button">Add</button></td>
<td id="ri4" class="add flex-menu"><button id="i4" class="btn cart" type="button">Add</button></td>
</tr>
<tr>
<td id="itemi5">Caramel Cold Coffee</td>
<td id="pricei5">Rs.125</td>
<td id="ri5" class="add"><button id="i5" class="btn cart" type="button">Add</button></td>
<td id="ri5" class="add flex-menu"><button id="i5" class="btn cart" type="button">Add</button></td>
</tr>
<tr>
<td id="itemi6">Classic Cold Coffee</td>
<td id="pricei6">Rs.100</td>
<td id="ri6" class="add"><button id="i6" class="btn cart" type="button">Add</button></td>
<td id="ri6" class="add flex-menu"><button id="i6" class="btn cart" type="button">Add</button></td>
</tr>
<tr>
<td id="itemi7">Iced Americano</td>
<td id="pricei7">Rs.160</td>
<td id="ri7" class="add">
<buttonn id="i7" class="btn cart" type="button">Add</buttonn>
<td id="ri7" class="add flex-menu">
<button id="i7" class="btn cart" type="button">Add</button>
</td>
</tr>
<tr>
<td id="itemi8">Maggie</td>
<td id="pricei8">Rs.30</td>
<td id="ri8" class="add">
<buttonn id="i8" class="btn cart" type="button">Add</buttonn>
<td id="ri8" class="add flex-menu">
<button id="i8" class="btn cart" type="button">Add</button>
</td>
</tr>
</tbody>
Expand All @@ -179,4 +188,4 @@ <h1 class="text-bg-dark">CAFE MENU</h1>

</body>

</html>
</html>
36 changes: 18 additions & 18 deletions menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ function updatecart(cart){
document.getElementById("r"+item).innerHTML=`<button id="`+item+`" class="btn cart" type="button">Add</button>`;
}
else{
document.getElementById("r"+item).innerHTML="<button id='minus"+item+"' class='btn minus'>-</button><div id='val"+item+"' style='text-align:center;'>"+cart[item].quantity+"</div><button id='plus"+item+"' class='btn plus'>+</button>";
document.getElementById("r"+item).innerHTML=`<div><button id='minus${item}' class='btn minus'> -</button></div><div id='val${item}' style='font-size: 3vh;'> ${cart[item].quantity} </div> <div><button id='plus${item}' class='btn plus'>+ </button> </div>`;
}
}
localStorage.setItem('cart', JSON.stringify(cart));
Expand All @@ -97,25 +97,25 @@ function addtocart(cart){
let str=``
for(let item in cart){
str+=`
<div class="row">
<div class="col-6">
<strong>`+cart[item].name+`</strong>
</div>
<div class="col-6" style="text-align:end;" >
<strong>Rs.`+cart[item].price+`</strong>
</div>
<div class="row">
<div class="col-6">
<strong>`+cart[item].name+`</strong>
</div>
<div class="row" style="height:5px"></div>
<div class="row">
<div class="col-6 cartq" style="text-align:start;">
<label>Quantity: <strong>`+cart[item].quantity+`</strong></label>
</div>
<div class="col-6 cartprice" style="padding-right:10px;justify-content:end;">
<button class="remove" id="remove`+item+`"><i class='bx bx-trash-alt' style="color:black" undefined ></i></button>
</div>
<div class="col-6" style="text-align:end;" >
<strong>Rs.`+cart[item].price+`</strong>
</div>
<hr>
`;
</div>
<div class="row" style="height:5px"></div>
<div class="row">
<div class="col-6 cartq" style="text-align:start;">
<label>Quantity: <strong>`+cart[item].quantity+`</strong></label>
</div>
<div class="col-6 cartprice" style="padding-right:10px;justify-content:end;">
<button class="remove" id="remove`+item+`"><i class='bx bx-trash-alt' style="color:black" undefined ></i></button>
</div>
</div>
<hr>
`;
}

document.getElementById("cartcontainer").innerHTML=str;
Expand Down

0 comments on commit fe341a8

Please sign in to comment.