index.html file:
<html>
<head>
<title>Advanced Js Cart</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</head>
</html>
<body>
<div class="container">
<div class="row">
<div class="col-md-7">
<div class="row" style="background: cornsilk;padding: 20px;text-align: center;">
<div class="col-md-6">
<img src="phone.png" id ="pic" width="100"><br>
Name: Pink Flower<input type="hidden" id = "name" value="Pink Flower"><br>
Price: Rs 2000<input type="hidden" id = "price" value="2000"><br>
Description: Good<input type="hidden" id = "description" value="Good "><br><br>
<input type="button" onclick="add(1)" class="btn btn-info btn-sm" value="Add to cart">
</div>
<div class="col-md-6">
<img src="other.png" id ="pic2" width="100"><br>
Name: Red Flower<input type="hidden" id = "name2" value="red Flower"><br>
Price: Rs 3000<input type="hidden" id = "price2" value="3000"><br>
Description: Best<input type="hidden" id = "description2" value="Best"><br><br>
<input type="button" onclick="add(2)" class="btn btn-info btn-sm" value="Add to cart">
</div>
</div>
</div>
<div class="col-md-1"></div>
<div class="col-md-4" style="background: #4985c794;">
Total Cart Item : <b id = "c">0</b>
<div id="cartval"></div><br>
<div style=" background: aliceblue;padding: 6px;">Amount<b style="float: right;" id="t">0</b></div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
script.js file:
var count = 0;
var r = 0;
function add(val){
if(val=='1'){
var name = document.getElementById("name").value;
var price = parseInt(document.getElementById("price").value);
var description = document.getElementById("description").value;
var img = document.getElementById("pic").src;
count = count+1;
document.getElementById("c").innerHTML=count;
document.getElementById("t").innerHTML = r;
document.getElementById("cartval").innerHTML+="<div style='background:white; width:350px;height:100px;'><img style='width:50px;' src="+img+"><br>Name:"+name+" Description:"+description+"<br>Price: "+price+"</div>";
}
if(val=='2'){
var name = document.getElementById("name2").value;
var price = parseInt(document.getElementById("price2").value);
var description = document.getElementById("description2").value;
var img = document.getElementById("pic2").src;
count = count+1;
document.getElementById("c").innerHTML=count;
document.getElementById("t").innerHTML = r;
document.getElementById("cartval").innerHTML+="<div style='background:white; width:350px;height:100px;'><img style='width:50px;' src="+img+"><br>Name:"+name+" Description:"+description+"<br>Price: "+price+"</div>";
}
r = r+price;
document.getElementById("t").innerHTML=r;
}
