My problem right now is creating a shopping cart website. Condition is that if q
ID: 3918449 • Letter: M
Question
My problem right now is creating a shopping cart website. Condition is that if quantity is changed by the user, then the price will automatically gets updated.
We were asked to use Javascript to implement all the logic, html and css only. I know how to create html that will show the products and also a decent designing.
My problem right now is to implement the logic where the price change depends on the quantity.
My goal right now is to mock this simple shopping cart.
Explanation / Answer
<!DOCTYPE html>
<html>
<head>
<title>XYZ</title>
<style type="text/css">
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.comment-bar {
display: -ms-flexbox;
display: flex;
-ms-flex-align: start;
align-items: flex-start;
padding: 10px 0px;
}
.comment-body {
-ms-flex: 1;
flex: 1;
font-size: 14px;
padding-left: 20px;
}
.mr-3{
margin-right: 1rem !important;
height: 70px;
width: 70px;
}
.mt-0{
margin-top: 0 !important;
}
td{
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<table>
<thead>
<tr>
<th width="45%"><h2>Shopping Cart</h2></th>
<th width="15%">Price</th>
<th width="25%">Quantity</th>
<th width="15%">Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="comment-bar">
<img class="mr-3" src="" alt="item image">
<div class="comment-body">
<h5 class="mt-0">Dingo Dog Bones</h5>
<p class="comment-date">
The best dog bones of all time. Holy carp. Your dog will be begging for these things! I got curious once and ate one myself. I'm a fan.
</p>
</div>
</div>
</td>
<td>$12.99</td>
<td>
<select id="item1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</td>
<td>$<span id="output1">12.99</span></td>
</tr>
<tr>
<td>
<div class="comment-bar">
<img class="mr-3" src="" alt="item image">
<div class="comment-body">
<h5 class="mt-0">Nutro Adult Lamb nad Rice Dog Food</h5>
<p class="comment-date">
Who doesn't like lamb and rice? We'ev all hit the halal cart at 3am while quasi-blackout after a night of binge drinking in Manhattan. Now it's
</p>
</div>
</div>
</td>
<td>$45.99</td>
<td>
<select id="item2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</td>
<td>$<span id="output2">45.99</span></td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
//for the first item
function func1(){
var input1 = document.getElementById("item1").value; //getting value from the select
var output1 = 12.99 * input1;
document.getElementById('output1').innerHTML = output1; //printing the values in span
}
function func2(){
var input2 = document.getElementById("item2").value;
var output2 = 45.99 * input2;
document.getElementById('output2').innerHTML = output2;
}
</script>
</body>
</html>
// change the css as you want and i didnt add the remove button coz u mainly wanted the logic behind the quantity. Adding the remove button is easy.
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.