DPW17 - 5 - Creating DOM

by UDany

HTML

<h1>
    Cardápio - Total <span id="total"></span> R$
</h1>

<div id="products"></div>

CSS

body {
    padding: 50px;
}

JavaScript

var total = 0;
var products = [
	{name: "Hamburger", price:10 },
	{name: "X-Burger", price:12 },
	{name: "Coca", price:5 }
];

function updateTotal(){
	$("#total").text(total);
}

function purchase(product){
    total += product.price;
    updateTotal();
}

function createProductHtml(product){
	return $("<button />")
    	.text(product.name+" - "+product.price+"R$")
        .click(function(){
        	purchase(product);
        });
}

updateTotal();

var productsContainer = $("#products");
for (let product of products){
	createProductHtml(product).appendTo(productsContainer);
}