Tengo la siguiente pagina, el cual es una pagina que es usando clases, la pagina es para agregar compras. Tengo dos input, donde se agrega la compra y el costo de la compra y un boton para agregar la compra, los valores de lo que se pongan en los inputs los agrego en un objeto junto a un id para despues agregar ese objeto a un arreglo vacio donde se va llenando con todas las compras, y lo guardo en el localStorage, para despues mostrarlo en el HTML en forma de lista.
Al cargar la pagina pido por un prompt una cantidad, la cual de igual forma guardo en el localStorage, para despues mostrarla en el html donde tengo dos divs, uno con el presupuesto y el restante donde al inciar la pagina, ambos tienen la misma cantidad, donde el presupuesto es lo que tengo para "gastar" y el restante lo que me queda de lo que he comprado, tengo una funcionalidad de que al agregar una compra el restante disminuye, por la compra que agregue.
Tambien agrege para poder eliminar una compra, mediante un botton(ELIMINAR), ya logro eliminar la compra del HTML y del localStorage, pero quiero cambiar la cantidad del restante para sumarle lo que costaba la compra eliminada, pero no logro conseguirlo, intente recorriendo el arreglo del localStorage, pero no encuentro la forma de al eliminar una compra, sumar lo que constaba esa compra al restante.
<header>
<div class="container bg-white">
<h1 class="text-center my-5">LISTA DE COMPRAS</h1>
<div class="row">
<div class="col-12 col-sm-6 mb-5 col-primario">
<h1 class="text-center mb-5 mt-3">Agregar Compras</h1>
<form id="formulario">
<div class="form-group mb-4">
<label for="formGroupExampleInput">Compra</label>
<input type="text" class="form-control" id="compra" placeholder="Ingresa la compra">
</div>
<div class="form-group">
<label for="formGroupExampleInput">Costo</label>
<input type="text" class="form-control" id="costo" placeholder="Ingresa el costo de la compra">
</div>
<div class="btn-agregar text-center mt-4">
<button type="submit" id="agregar-compra" class="btn btn-primary">Agregar Compra</button>
</div>
</form>
</div>
<div class="col-12 col-sm-6 mt-5 col-secundario">
<h1 class="text-center mb-4">Lista de compras</h1>
<div class="mb-5">
<ul class="list-group" id="lista-compras">
</ul>
</div>
<div class="presupuesto-restante d-flex flex-column align-items-center ">
<div class="presupuesto alert alert-primary py-3 px-2">
<p>Presupuesto: <span id="presupuesto"></span></p>
</div>
<div class="restante alert alert-success py-3 px-2">
<p>Restante: <span id="restante"></span></p>
</div>
</div>
</div>
</div>
</div>
</header>
const formulario = document.querySelector('#formulario');
const listaCompras = document.querySelector('#lista-compras')
eventListeners();
function eventListeners(){
document.addEventListener('DOMContentLoaded', () => {
pedirPresupuesto();
mostrarLocalStorage();
cambiarRestanteHTML();
})
formulario.addEventListener('submit', agregarCompra)
}
class Presupuesto{
constructor(presupuesto){
this.presupuesto = Number(presupuesto);
this.restante = Number(presupuesto);
this.arregloCompras = [];
}
//Agregar objCompra al carrito arregloCompras
agregarCompraArreglo(objCompra){
this.arregloCompras = [...this.arregloCompras, objCompra]
console.log(this.arregloCompras)
//Guardar el arregloCompras en localStorage
localStorage.setItem('compras', JSON.stringify(this.arregloCompras))
this.actualizarRestante()
}
actualizarRestante(arregloCompras){
const gastado = this.arregloCompras.reduce((total,compra) => total + compra.costo,0);
this.restante = this.presupuesto - gastado;
localStorage.setItem('restante', this.restante)
cambiarRestanteHTML();
}
quitarCompra(id){
let comprasLocal = JSON.parse(localStorage.getItem('compras'))
let arregloCompras = comprasLocal.filter(compra => compra.id !== id);
localStorage.setItem('compras', JSON.stringify(arregloCompras));
mostrarLocalStorage();
}
restanteAlEliminar(id){
}
}
class UI{
//Mostrar presupueto y restante en el HTML
mostrarPresupuestoRestante(presupuestoTotal){
const {presupuesto} = presupuestoTotal;
document.querySelector('#presupuesto').textContent = presupuesto
document.querySelector('#restante').textContent = presupuesto
}
mostrarAlertas(mensaje, tipo){
const mensajeAlerta = document.createElement('div');
mensajeAlerta.classList.add('alert', 'text-center','alert-success')
mensajeAlerta.textContent = mensaje
if(tipo === 'error'){
mensajeAlerta.classList.add('alert-danger')
}
document.querySelector('.col-primario').insertBefore(mensajeAlerta,formulario)
setTimeout(() => {
mensajeAlerta.remove()
},3000)
}
cambiarColorRestante(presupuestoTotal){
const {presupuesto,restante} = presupuestoTotal;
const divRestante = document.querySelector('.restante');
if((presupuesto / 4) > restante){
divRestante.classList.remove('alert-success', 'alert-warning')
divRestante.classList.add('alert-danger')
}else if((presupuesto / 2) > restante){
divRestante.classList.remove('alert-success','alert-danger')
divRestante.classList.add('alert-warning')
}else{
divRestante.classList.remove('alert-warning','alert-danger')
divRestante.classList.add('alert-success')
}
if(restante <= 0){
ui.mostrarAlertas('Se ha agotado el presupuesto', 'error')
document.querySelector('#agregar-compra').disabled = true;
}else{
document.querySelector('#agregar-compra').disabled = false;
}
}
}
//Instanciamos las clases
const ui = new UI;
let presupuesto;
//Pedir presupuesto al usuario
function pedirPresupuesto(){
let presupuestoTotal = 0
do{
let presupuestoUsuario = localStorage.getItem('presupuesto');
if(!presupuestoUsuario){
presupuestoUsuario = prompt('Ingresa tu presupuesto')
}
if(presupuestoUsuario <= 0 || isNaN(presupuestoUsuario)){
}else{
localStorage.setItem('presupuesto', presupuestoUsuario)
presupuestoTotal = presupuestoUsuario
}
}while(presupuestoTotal <= 0)
if(localStorage.getItem('restante')){
}else{
localStorage.setItem('restante', presupuestoTotal)
}
//Agregar presupuesto y restante
presupuesto = new Presupuesto(presupuestoTotal);
//Mostrar el presupuesto y restante del HTML
ui.mostrarPresupuestoRestante(presupuesto)
}
//Agregar compra al dar click en comprar compra
function agregarCompra(e){
e.preventDefault();
const compra = document.querySelector('#compra').value;
const costo = Number(document.querySelector('#costo').value);
if(compra === '' || costo === ''){
ui.mostrarAlertas('Debe agregar una compra y su costo', 'error')
return;
}else if(costo <= 0 || isNaN(costo)){
ui.mostrarAlertas('El costo no es valido', 'error')
return;
}
//Objeto con la compra y el costo y un id
const objCompra = {
compra,
costo,
id:Date.now(),
}
ui.mostrarAlertas('Se ha agregado la compra')
//Agregar el objeto con las compras al arregloCompras
presupuesto.agregarCompraArreglo(objCompra)
//MOSTRAR COMPRA EN EL HTML DESDE LOCALSTORAGE
mostrarLocalStorage();
//Cambiar cantidad restante al agregarCompra HTML
ui.cambiarColorRestante(presupuesto);
formulario.reset();
}
// MOSTRAR LOS ELEMENTOS AGREGADOS AL LOCAL STORAGE, SE REINCIIAN AL SALIR Y ENTRAR Y GREGAR UNA NUEVA COMPRA
function mostrarLocalStorage(arregloCompras){
limpiarHTML();
let comprasLocalStorage = JSON.parse(localStorage.getItem('compras')) || [];
comprasLocalStorage.forEach(compraLocal => {
const {compra,costo,id} = compraLocal;
const compraItem = document.createElement('li');
compraItem.classList.add('list-group-item', 'd-flex', 'justify-content-between', 'align-items-center')
compraItem.innerHTML = `${compra}<span class="badge bg-primary rounded-pill">${costo}</span>`
//Crear boton de eliminar compra
const btnEliminar = document.createElement('button');
btnEliminar.classList.add('btn', 'btn-danger')
btnEliminar.textContent = 'Eliminar'
btnEliminar.dataset.id = id
btnEliminar.onclick = () => {
eliminarCompra(id)
}
listaCompras.appendChild(compraItem)
compraItem.appendChild(btnEliminar)
})
}
function limpiarHTML(){
while(listaCompras.firstChild){
listaCompras.removeChild(listaCompras.firstChild)
}
}
function cambiarRestanteHTML(RestanteoLocal){
document.querySelector('#restante').textContent = localStorage.getItem('restante')
}
function eliminarCompra(id){
presupuesto.quitarCompra(id)
presupuesto.restanteAlEliminar(id)
}