Question

Easy Shopping cart using HTML/CSS And javascript please no Bootstrap Thank you in advance!!!!

Easy Shopping cart using HTML/CSS And javascript

please no Bootstrap

Thank you in advance!!!!

0 0
Add a comment Improve this question Transcribed image text
Answer #1

Coding

<html>
<head>
<script>
var shoppingCart = [];//array declare here
function display(){
var o_product_table=document.getElementById("o_product_table");
while(o_product_table.rows.length>0) {
o_product_table.deleteRow(0);
}
var total_price=0;
for(var product in shoppingCart){
var row=o_product_table.insertRow();
var cellName = row.insertCell(0);
var cellDescription = row.insertCell(1);
var cellPrice = row.insertCell(2);
cellPrice.align="right";
cellName.innerHTML = shoppingCart[product].Name;
cellDescription.innerHTML = shoppingCart[product].Description;
cellPrice.innerHTML = shoppingCart[product].Price;
total_price+=shoppingCart[product].Price;
}
document.getElementById("cart_total").innerHTML="Total Price is ::"+total_price.toString();
}


function Cart(name,description,price){
var Product = {};
Product.Name=name;
Product.Description=description;
Product.Price=price;
shoppingCart.push(Product);
display();
}

</script>
<style>
img{
height:200px;
weight:150px;
}
</style>
</head>
<table cellpadding="4" cellspacing="4" border="1">
<tr>
<td valign="top">
<table cellpadding="4" cellspacing="4" border="0">
<thead>
<tr>
<td colspan="2">
Product For Here<!--Product here -->
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
Table<!--Product here -->
</td>
                       <td>
                       <img src="table.jpg"><!--Product Image Display Here-->
                       </td>
<td>
<input type="button" value="Add to cart" onclick="Cart('Table','Big Blue table',50)"/>
</td>
</tr>
<tr>
<td>
Door<!--Product here -->
</td>
                       <td>
                       <img src="door.jpg"><!--Product Image Display Here-->
                       </td>
<td>
<input type="button" value="Add to cart" onclick="Cart('Door','Red Door',150)"/>
</td>
</tr>
<tr>
<td>
Ferari Car
</td>
                       <td>
                       <img src="car.jpeg"><!--Product Image Display Here-->
                       </td>
<td>
<input type="button" value="Add to cart" onclick="Cart('Ferrari','Red Ferrari S234',150000)"/>
</td>
</tr>
</tbody>

</table>
</td>
<td valign="top">
<table cellpadding="4" cellspacing="4" border="1" id="orderedProductsTbl">
<thead>
<tr>
<td>
Name
</td>
<td>
Description
</td>
<td>
Price
</td>
</tr>
</thead>
<tbody id="o_product_table">

</tbody>
<tfoot>
<tr>
<td colspan="3" align="right" id="cart_total">

</td>
</tr>
</tfoot>
</table>
</td>
</tr>
</table>

output:

if you still have any Problem regarding this question please comment and if you like my code please appreciate me by thumbs up thank you.........

Add a comment
Know the answer?
Add Answer to:
Easy Shopping cart using HTML/CSS And javascript please no Bootstrap Thank you in advance!!!!
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions
ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT