Cesta compra 2.0

 <input type="text" id="producto" >
 <input type="button" id="compra" value="Comprar">
 <input type="button" id="ordenar" value="Ordenar">
 <input type="button" id="ordenar2" value="Ordenar desc">
 <div id="cesta"></div>
var cesta = [];

document.getElementById("compra").addEventListener("click", comprar);
document.getElementById("ordenar").addEventListener("click", function () {
ordenar(1);
});
document.getElementById("ordenar2").addEventListener("click", function () {
ordenar(2);
});
document.getElementById("producto").addEventListener("keypress", tecla);

function comprar() {
var producto = document.getElementById('producto').value;
if (producto.trim() !== "" && cesta.indexOf(producto) === -1) {
cesta.push(producto);
document.getElementById('producto').value = "";
mostrar();
} else {
alert("Producto incorrecto o repetido");
}
}
function tecla(event) {

if (event.keyCode === 13 || event.key === "+") {
comprar();
event.preventDefault();
}
if (event.key >= "0" && event.key <= "9") {
event.preventDefault();
}
}
function ordenar(tipo) {
cesta.sort();
if (tipo === 2) {
cesta.reverse();
}
mostrar();
}

function mostrar() {
var resultado = document.getElementById('cesta');
resultado.innerHTML = "";
for (var i = 0; i < cesta.length; i++) {
var parrafo = document.createElement("p");
parrafo.innerHTML = i + ".- " + cesta[i];
var boton = document.createElement("button");
boton.innerHTML = "X";
boton.id=i;
boton.addEventListener("click", function () {
borrar(this.id);
})
parrafo.appendChild(boton);
resultado.appendChild(parrafo);

}
}

function borrar(i) {
cesta.splice(i, 1);
mostrar();
}

Publicado por

Juan Pablo Fuentes

Formador de programación y bases de datos