1

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)
}
2
  • Y tu pregunta es...?
    – Arriel
    Commented el 9 jun. 2021 a las 0:25
  • Como puedo sumar al restante, el costo de la compra que elimine Commented el 9 jun. 2021 a las 14:06

2 respuestas 2

2

La pregunta no esta muy acertada pero aún así me he metido a revisar tu código.

Tras la revisión he podido ver que lo único que te hacia falta era actualizar una propiedad de la clase Presupuesto y además llamar a un método que ya estaba hecho.

Te dejo aquí las modificaciones que he realizado en el método quitarCompra(id):

quitarCompra(id){

    let comprasLocal = JSON.parse(localStorage.getItem('compras'))
    let arregloCompras = comprasLocal.filter(compra => compra.id !== id);

    this.arregloCompras = arregloCompras; // Se asignan nuevos valores

    localStorage.setItem('compras', JSON.stringify(arregloCompras));

    mostrarLocalStorage();
    this.actualizarRestante(); // Se realiza la llamada de actualización
}
1

Para añadir o modificar algo pones localStorage.setItem("Nombre del item", valor) y para leer localStorage.getItem("Nombre del item") y para mostrarlo en la web puedes poner var e = localStorage.getItem("AB"); Document.getElementById("Element").innerHTML = e también puedes usar el sessionStorage el cual se elimina tras cerrar el navegador

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.