DPW17 - 6 - AJAX

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 = [];

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);
        });
}
function createProducts(){
    var productsContainer = $("#products");
    for (let product of products){
        createProductHtml(product).appendTo(productsContainer);
    }
}

updateTotal();



$.post(
	'/echo/json/',
    {
        json: JSON.stringify([
            {name: "Hamburger", price:10 },
            {name: "X-Burger", price:12 },
            {name: "Coca", price:5 }
        ])
    },
    function(response){
    	products = response;
        createProducts();
    }
)