Respuestas

const calculadora = {
    valorActual: '0',
    valorAnterior: '',
    operacion: undefined,
    reiniciarPantalla: false
};

const valorAnteriorDisplay = document.getElementById('valor-anterior');
const valorActualDisplay = document.getElementById('valor-actual');

const botonesNumeros = document.querySelectorAll('.numero');
const botonesOperadores = document.querySelectorAll('.operador');
const botonIgual = document.querySelector('[value="igual"]');
const botonBorrar = document.getElementById('borrar');
const botonBorrarTodo = document.getElementById('borrarTodo');
const botonDecimal = document.getElementById('decimal');

function actualizarDisplay() {
    valorActualDisplay.textContent = calculadora.valorActual;
    valorAnteriorDisplay.textContent = calculadora.operacion
        ? `${calculadora.valorAnterior} ${obtenerSimboloOperacion(calculadora.operacion)}`
        : calculadora.valorAnterior;
}

function obtenerSimboloOperacion(operacion) {
    switch (operacion) {
        case 'sumar': return '+';
        case 'restar': return '-';
        case 'multiplicar': return '×';
        case 'dividir': return '÷';
        case 'areaT': return '△';
        case 'areaC': return '○';
        default: return '';
    }
}

function agregarNumero(numero) {
    calculadora.valorActual = calculadora.reiniciarPantalla
        ? numero
        : calculadora.valorActual === '0' ? numero : calculadora.valorActual + numero;
    calculadora.reiniciarPantalla = false;
}

function agregarDecimal() {
    if (calculadora.reiniciarPantalla) {
        calculadora.valorActual = '0.';
        calculadora.reiniciarPantalla = false;
        return;
    }
    if (!calculadora.valorActual.includes('.')) {
        calculadora.valorActual += '.';
    }
}

function borrar() {
    calculadora.valorActual = calculadora.valorActual.length <= 1 ||
        (calculadora.valorActual.length === 2 && calculadora.valorActual.startsWith('-'))
        ? '0'
        : calculadora.valorActual.slice(0, -1);
}

function borrarTodo() {
    calculadora.valorActual = '0';
    calculadora.valorAnterior = '';
    calculadora.operacion = undefined;
}

function elegirOperacion(operacion) {
    if (operacion === 'areaC') {
        const radio = parseFloat(calculadora.valorActual);
        if (!isNaN(radio)) {
            calculadora.valorAnterior = `π×(${radio})²`;
            calculadora.valorActual = (Math.PI * radio * radio).toFixed(4);
            calculadora.operacion = undefined;
            calculadora.reiniciarPantalla = true;
        }
        return;
    }
    if (calculadora.valorActual === '') return;
    if (calculadora.valorAnterior !== '') calcular();

    calculadora.operacion = operacion;
    calculadora.valorAnterior = calculadora.valorActual;
    calculadora.reiniciarPantalla = true;
}

function calcular() {
    if (calculadora.operacion === 'areaT') {
        const base = parseFloat(calculadora.valorAnterior);
        const altura = parseFloat(calculadora.valorActual);
        if (!isNaN(base) && !isNaN(altura)) {
            calculadora.valorActual = (base * altura / 2).toString();
        }
        calculadora.operacion = undefined;
        calculadora.valorAnterior = '';
        calculadora.reiniciarPantalla = true;
        return;
    }

    let resultado;
    const anterior = parseFloat(calculadora.valorAnterior);
    const actual = parseFloat(calculadora.valorActual);

    if (isNaN(anterior) || isNaN(actual)) return;

    switch (calculadora.operacion) {
        case 'sumar': resultado = anterior + actual; break;
        case 'restar': resultado = anterior - actual; break;
        case 'multiplicar': resultado = anterior * actual; break;
        case 'dividir': resultado = actual === 0 ? 'Error' : anterior / actual; break;
        default: return;
    }

    calculadora.valorActual = resultado.toString();
    calculadora.operacion = undefined;
    calculadora.valorAnterior = '';
    calculadora.reiniciarPantalla = true;
}

botonesNumeros.forEach(boton => {
    boton.addEventListener('click', () => {
        agregarNumero(boton.textContent);
        actualizarDisplay();
    });
});

botonesOperadores.forEach(boton => {
    boton.addEventListener('click', () => {
        elegirOperacion(boton.value);
        actualizarDisplay();
    });
});

botonIgual.addEventListener('click', () => {
    if (calculadora.operacion !== 'areaC') {
        calcular();
        actualizarDisplay();
    }
});

botonBorrar.addEventListener('click', () => {
    borrar();
    actualizarDisplay();
});

botonBorrarTodo.addEventListener('click', () => {
    borrarTodo();
    actualizarDisplay();
});

botonDecimal.addEventListener('click', () => {
    agregarDecimal();
    actualizarDisplay();
});

actualizarDisplay();

document.addEventListener("DOMContentLoaded", function () {
    const input_numero = document.getElementById("numero");
    const boton_solicitar = document.getElementById("solicitar");
    const boton_borrar = document.getElementById("eliminar");
    const select_eliminados = document.getElementById("eliminados");
    const mostrar_posts = document.getElementById("posts");

    boton_solicitar.addEventListener("click", function () {
        getData(input_numero.value);
    });

    boton_borrar.addEventListener("click", function () {
        const todosposts = mostrar_posts.querySelectorAll("*");
        console.log(select_eliminados.value);

        todosposts.forEach(article => {
            if (article.id === select_eliminados.value) {
                article.remove();
            }
        });
    });
});

function getData(numero) {
    const numeroPosts = document.getElementById("numeroPosts");
    const img = document.createElement("img");
    img.src = "loading.gif";
    numeroPosts.appendChild(img);

    const mensaje = { numero };

    const options = {
        body: JSON.stringify(mensaje),
        method: "POST",
        headers: { "Content-Type": "application/json" }
    };

    const url = "http://localhost:8000/posts.php";

    fetch(url, options)
        .then(response => {
            if (!response.ok) throw new Error("error con la respuesta fetch");
            return response.json();
        })
        .then(datos => {
            img.remove();
            console.log(datos);

            const mostrar_posts = document.getElementById("posts");
            mostrar_posts.innerHTML = "";

            datos.forEach(post => {
                const article = document.createElement("article");
                article.classList.add("post");
                article.id = post.id;

                const h2 = document.createElement("h2");
                h2.textContent = post.title;

                const p = document.createElement("p");
                p.textContent = post.body;

                const p2 = document.createElement("p");
                p2.textContent = "usuario: " + post.userId;

                const p3 = document.createElement("p");
                p3.textContent = "post: " + post.id;

                article.append(h2, p, p2, p3);
                mostrar_posts.appendChild(article);
            });
        });
}

document.addEventListener("DOMContentLoaded", function () {
    const formulario = document.querySelector("form");
    const input_usuario = document.getElementById("usuario");
    const input_dni = document.getElementById("dni");
    const input_pwd = document.getElementById("pwd");
    const input_naci = document.getElementById("nacimiento");
    const input_rama = document.getElementById("rama");
    const input_horas = document.getElementsByName("horas");
    const input_condiciones = document.getElementById("condiciones");

    formulario.addEventListener("submit", function (e) {
        e.preventDefault();
        validarUsuario();
        validarDni();
        validarPwd();
        validarRama();
        validarFecha();
        validarHoras();
        validarCondiciones();
        if (validarPwd() && validarDni() && validarUsuario() && validarFecha() && validarRama() && validarHoras() && validarCondiciones()) {
            formulario.submit();
        }
    });

    input_usuario.addEventListener("blur", validarUsuario);
    input_dni.addEventListener("blur", validarDni);
    input_dni.addEventListener("input", function () {
        if (input_dni.value.length === 8 && /^[0-9]{8}$/.test(input_dni.value)) {
            input_dni.value += "-";
        }
    });
    input_pwd.addEventListener("blur", validarPwd);
    input_naci.addEventListener("blur", validarFecha);
    input_rama.addEventListener("blur", validarRama);
    input_horas.forEach(radio => radio.addEventListener("blur", validarHoras));
    input_condiciones.addEventListener("blur", validarCondiciones);
});

function validarUsuario() {
    const input = document.getElementById("usuario");
    const info = document.getElementById("infousuario");
    info.classList.remove("error");
    info.innerHTML = "";
    let noerror = true;

    if (input.value === "") {
        info.innerHTML += "No puede estar vacío <br>";
        info.classList.add("error");
        noerror = false;
    }
    if (!/[0-9]+/.test(input.value)) {
        info.innerHTML += "Debe tener un número <br>";
        info.classList.add("error");
        noerror = false;
    }
    if (!/[a-z]+/.test(input.value)) {
        info.innerHTML += "Debe tener una minúscula <br>";
        info.classList.add("error");
        noerror = false;
    }
    return noerror;
}

function validarDni() {
    const input = document.getElementById("dni");
    const info = document.getElementById("infodni");
    info.classList.remove("error");
    info.innerHTML = "";
    let noerror = true;

    if (input.value === "") {
        info.innerHTML += "No puede estar vacío <br>";
        info.classList.add("error");
        noerror = false;
    }
    if (!/^[0-9]{8}-[A-Z]/.test(input.value.toUpperCase())) {
        info.innerHTML += "El DNI no cumple con el formato 12345678-X <br>";
        info.classList.add("error");
        noerror = false;
    }
    return noerror;
}

function validarPwd() {
    const input = document.getElementById("pwd");
    const info = document.getElementById("infopwd");
    info.classList.remove("error");
    info.innerHTML = "";
    let noerror = true;

    if (input.value === "") {
        info.innerHTML += "No puede estar vacío <br>";
        info.classList.add("error");
        noerror = false;
    }
    if (!/[0-9]+/.test(input.value)) {
        info.innerHTML += "Debe tener al menos un número <br>";
        info.classList.add("error");
        noerror = false;
    }
    if (!/[a-z]+/.test(input.value)) {
        info.innerHTML += "Debe tener una minúscula <br>";
        info.classList.add("error");
        noerror = false;
    }
    if (!/[A-Z]+/.test(input.value)) {
        info.innerHTML += "Debe tener una mayúscula <br>";
        info.classList.add("error");
        noerror = false;
    }
    if (!/[#@]+/.test(input.value)) {
        info.innerHTML += "Debe tener un carácter especial <br>";
        info.classList.add("error");
        noerror = false;
    }
    if (input.value.length < 8) {
        info.innerHTML += "Debe ser más larga que 8 caracteres <br>";
        info.classList.add("error");
        noerror = false;
    }
    return noerror;
}

function validarFecha() {
    const input = document.getElementById("nacimiento");
    const info = document.getElementById("infonacimiento");
    info.classList.remove("error");
    info.innerHTML = "";
    let noerror = true;

    let fechanaci = new Date(input.value);
    let fechaahora = new Date();
    let edad = fechaahora.getFullYear() - fechanaci.getFullYear();
    let mes = fechaahora.getMonth() - fechanaci.getMonth();

    if (input.value === "") {
        info.innerHTML += "No puede estar vacío <br>";
        info.classList.add("error");
        noerror = false;
    }

    if (mes < 0 || (mes === 0 && fechaahora.getDate() < fechanaci.getDate())) {
        edad--;
    }
    if (edad < 18) {
        info.innerHTML += "Debes ser mayor de 18 años <br>";
        info.classList.add("error");
        noerror = false;
    }
    return noerror;
}

function validarRama() {
    const input = document.getElementById("rama");
    const info = document.getElementById("inforama");
    info.classList.remove("error");
    info.innerHTML = "";
    let noerror = true;

    if (input.value === "") {
        info.innerHTML += "Debes seleccionar una rama <br>";
        info.classList.add("error");
        noerror = false;
    }
    return noerror;
}

function validarHoras() {
    const input = document.getElementsByName("horas");
    const info = document.getElementById("infohoras");
    info.classList.remove("error");
    info.innerHTML = "";
    let seleccionado = false;
    let noerror = true;

    input.forEach(radio => {
        if (radio.checked) seleccionado = true;
    });

    if (!seleccionado) {
        info.innerHTML += "Debes seleccionar al menos una opción <br>";
        info.classList.add("error");
        noerror = false;
    }
    return noerror;
}

function validarCondiciones() {
    const input = document.getElementById("condiciones");
    const info = document.getElementById("infocondiciones");
    info.classList.remove("error");
    info.innerHTML = "";
    let noerror = true;

    if (!input.checked) {
        info.innerHTML += "Debes aceptar las condiciones <br>";
        info.classList.add("error");
        noerror = false;
    }
    return noerror;
}

document.addEventListener("DOMContentLoaded", function () {
    Usuarios = [
        "Manolo$Lama Sánchez$999000000$lama@cope.es$28200$04/03/1969",
        "Manu$Carreño López$666000000$carreno@ser.es$12001$04/12/1975",
        "Maria Teresa$Molina Fernández$666000000$mteresa@extra.es$12001$21/08/1982"
    ];

    const mostrardata = document.getElementById("mostrardata");
    let array_clase_usuario = recuperarLocalStorage();

    console.log(array_clase_usuario);

    let usuarios = limpiarArray(Usuarios);

    if (array_clase_usuario.length === 0) {
        usuarios.forEach(usuario => {
            array_clase_usuario.push(new Usuario(usuario[0], usuario[1], usuario[2], usuario[3], usuario[4], usuario[5], usuario[6], usuario[7]));
        });
        guardarLocalStorage(array_clase_usuario);
    }

    mostrarUsuarios(array_clase_usuario);
});

function limpiarArray(Usuarios) {
    return Usuarios.map(usuario => {
        let datos = usuario.split("$");
        let nombres = datos[0].split(" ");
        let nombre1 = nombres[0];
        let nombre2 = nombres.length > 1 ? nombres.slice(1).join(" ") : "";

        let apellidos = datos[1].split(" ");
        let apellido1 = apellidos[0];
        let apellido2 = apellidos.length > 1 ? apellidos.slice(1).join(" ") : "";

        return [nombre1, nombre2, apellido1, apellido2, datos[2], datos[3], datos[4], datos[5]];
    });
}

function generarNombre(nombre1, nombre2, apellido1, apellido2) {
    let primeraletra = nombre1.charAt(0);
    let tresultimasletras = apellido1.slice(-3);
    let longitud = nombre1.length + nombre2.length + apellido1.length + apellido2.length;

    return primeraletra + tresultimasletras + longitud;
}

function generarClave(nombre1) {
    let numero = parseInt((Math.random() + 1) * 1000);
    return nombre1.toUpperCase() + numero;
}

function validarFecha(fecha) {
    if (!(fecha instanceof Date)) {
        throw new Error("La fecha no es un objeto Date: " + fecha);
    }

    let ahora = new Date();
    let edad = ahora.getFullYear() - fecha.getFullYear();
    let mes = ahora.getMonth() - fecha.getMonth();

    if (mes < 0 || (mes === 0 && ahora.getDate() - fecha.getDate() === 0)) {
        edad--;
    }

    return edad >= 18 && fecha.getDay() === 1;
}

class Usuario {
    constructor(nombre1, nombre2, apellido1, apellido2, telefono, email, cp, fecha_nacimiento) {
        this.nombre1 = nombre1;
        this.nombre2 = nombre2;
        this.apellido1 = apellido1;
        this.apellido2 = apellido2;
        this.telefono = telefono;
        this.email = email;
        this.cp = cp;
        this.fecha_nacimiento = fecha_nacimiento;
    }

    get todosLosNombres() {
        return this.nombre1 + this.nombre2;
    }

    get todosLosApellidos() {
        return this.apellido1 + this.apellido2;
    }

    get clave() {
        return generarClave(this.nombre1);
    }

    get usuario() {
        return generarNombre(this.nombre1, this.nombre2, this.apellido1, this.apellido2);
    }

    get cumpleEnLunesyEsmayorDeEdad() {
        return validarFecha(new Date(this.fecha_nacimiento));
    }

    get info() {
        return `\n nombre: ${this.nombre1} \n segundo nombre: ${this.nombre2}`;
    }
}

function guardarLocalStorage(datos) {
    localStorage.setItem("datos", JSON.stringify(datos));
}

function recuperarLocalStorage() {
    let datos = JSON.parse(localStorage.getItem("datos")) || [];
    datos.forEach(usuario => {
        usuario.__proto__ = new Usuario();
    });

    return datos;
}

function mostrarUsuarios(usuarios) {
    const mostrardata = document.getElementById("mostrardata");
    let idusuario = 0;

    usuarios.forEach(usuario => {
        idusuario++;
        const div_usuario = document.createElement("div");
        div_usuario.id = idusuario;
        div_usuario.style.display = "flex";
        div_usuario.style.justifyContent = "space-between";
        div_usuario.style.border = "solid black 1px";
        div_usuario.style.margin = "10px";
        div_usuario.style.padding = "10px";

        const h2 = document.createElement("h2");
        const nombre1 = document.createElement("h3");
        const nombre2 = document.createElement("h3");
        const apellido1 = document.createElement("h4");
        const apellido2 = document.createElement("h4");
        const telefono = document.createElement("p");
        const email = document.createElement("p");
        const cp = document.createElement("p");
        const fecha = document.createElement("p");

        h2.textContent = "Usuario: " + idusuario;
        nombre1.textContent = usuario.nombre1;
        nombre2.textContent = usuario.nombre2;
        apellido1.textContent = usuario.apellido1;
        apellido2.textContent = usuario.apellido2;
        telefono.textContent = "tlf: " + usuario.telefono;
        email.textContent = "email: " + usuario.email;
        cp.textContent = "cp: " + usuario.cp;
        fecha.textContent = "fecha de nacimiento: " + usuario.fecha_nacimiento;

        div_usuario.appendChild(h2);
        div_usuario.appendChild(nombre1);
        div_usuario.appendChild(nombre2);
        div_usuario.appendChild(apellido1);
        div_usuario.appendChild(apellido2);
        div_usuario.appendChild(telefono);
        div_usuario.appendChild(email);
        div_usuario.appendChild(cp);
        div_usuario.appendChild(fecha);

        mostrardata.appendChild(div_usuario);
    });
}

class Alarma {
    constructor(etiqueta, hora, minutos, repetir, dias = []) {
        this.etiqueta = etiqueta;
        this.hora = hora;
        this.minutos = minutos;
        this.repetir = repetir;
        this.lunes = dias.includes(1);
        this.martes = dias.includes(2);
        this.miercoles = dias.includes(3);
        this.jueves = dias.includes(4);
        this.viernes = dias.includes(5);
        this.activa = true;
    }

    sonar() {
        return `Sonando alarma ${this.etiqueta} programada a las ${this.hora.toString().padStart(2, '0')}:${this.minutos.toString().padStart(2, '0')}`;
    }

    getDiasRepeticion() {
        const dias = [];
        if (this.lunes) dias.push("Lunes");
        if (this.martes) dias.push("Martes");
        if (this.miercoles) dias.push("Miércoles");
        if (this.jueves) dias.push("Jueves");
        if (this.viernes) dias.push("Viernes");
        return dias;
    }
}

let alarmas = [];

const fechaDisplay = document.getElementById('fecha');
const horaDisplay = document.getElementById('hora');
const formAlarma = document.getElementById('formAlarma');
const etiquetaInput = document.getElementById('etiqueta');
const horaAlarmaInput = document.getElementById('horaAlarma');
const repetirCheckbox = document.getElementById('repetir');
const diasSemanaDiv = document.getElementById('diasSemana');
const alarmasLista = document.getElementById('alarmasLista');

repetirCheckbox.addEventListener('change', () => {
    diasSemanaDiv.style.display = repetirCheckbox.checked ? 'grid' : 'none';
});

diasSemanaDiv.style.display = 'none';

function formatearFecha(fecha) {
    const opciones = { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' };
    return fecha.toLocaleDateString('es-ES', opciones);
}

function actualizarHora() {
    const ahora = new Date();
    fechaDisplay.textContent = formatearFecha(ahora);
    horaDisplay.textContent = ahora.toLocaleTimeString('es-ES');
}

setInterval(actualizarHora, 1000);
actualizarHora();

setInterval(comprobarAlarmas, 1000);

function comprobarAlarmas() {
    const ahora = new Date();
    const diaActual = ahora.getDay();
    const horaActual = ahora.getHours();
    const minutoActual = ahora.getMinutes();

    alarmas.forEach(alarma => {
        if (!alarma.activa) return;
        if (parseInt(alarma.hora) === horaActual && parseInt(alarma.minutos) === minutoActual) {
            if (alarma.repetir) {
                if (diaActual === 0 || diaActual === 6) return;
                const diaAlarma = diaActual;
                if ((diaAlarma === 1 && alarma.lunes) || (diaAlarma === 2 && alarma.martes) ||
                    (diaAlarma === 3 && alarma.miercoles) || (diaAlarma === 4 && alarma.jueves) ||
                    (diaAlarma === 5 && alarma.viernes)) {
                    alert(alarma.sonar());
                }
            } else {
                alert(alarma.sonar());
            }
        }
    });
}

formAlarma.addEventListener('submit', (e) => {
    e.preventDefault();

    const etiqueta = etiquetaInput.value;
    const horaCompleta = horaAlarmaInput.value;
    const [hora, minutos] = horaCompleta.split(':');
    const repetir = repetirCheckbox.checked;

    let dias = [];
    if (repetir) {
        const checkboxes = document.querySelectorAll('.dia:checked');
        dias = Array.from(checkboxes).map(cb => parseInt(cb.value));
    }

    const alarma = new Alarma(etiqueta, hora, minutos, repetir, dias);
    alarmas.push(alarma);

    actualizarListaAlarmas();

    formAlarma.reset();
    diasSemanaDiv.style.display = 'none';
});

function actualizarListaAlarmas() {
    while (alarmasLista.firstChild) {
        alarmasLista.removeChild(alarmasLista.firstChild);
    }

    if (alarmas.length === 0) {
        const mensaje = document.createElement('div');
        mensaje.classList.add('empty-message');
        mensaje.textContent = 'No hay alarmas programadas';
        alarmasLista.appendChild(mensaje);
        return;
    }

    alarmas.forEach((alarma, index) => {
        const alarmaItem = document.createElement('div');
        alarmaItem.classList.add('alarma-item');
        if (!alarma.activa) alarmaItem.classList.add('alarma-inactiva');

        const etiquetaDiv = document.createElement('div');
        etiquetaDiv.classList.add('alarma-etiqueta');
        etiquetaDiv.textContent = alarma.etiqueta;

        const horaDiv = document.createElement('div');
        horaDiv.classList.add('alarma-hora');
        horaDiv.textContent = `Hora: ${alarma.hora.padStart(2, '0')}:${alarma.minutos.padStart(2, '0')}`;

        alarmaItem.appendChild(etiquetaDiv);
        alarmaItem.appendChild(horaDiv);

        if (alarma.repetir) {
            const diasDiv = document.createElement('div');
            diasDiv.classList.add('alarma-dias');
            diasDiv.textContent = `Días: ${alarma.getDiasRepeticion().join(', ') || 'Ninguno'}`;
            alarmaItem.appendChild(diasDiv);
        }

        const accionesDiv = document.createElement('div');
        accionesDiv.classList.add('alarma-actions');

        const btnEliminar = document.createElement('button');
        btnEliminar.classList.add('btn-eliminar');
        btnEliminar.dataset.index = index;
        btnEliminar.textContent = 'Eliminar';
        btnEliminar.addEventListener('click', () => {
            alarmas.splice(index, 1);
            actualizarListaAlarmas();
        });

        const btnEstado = document.createElement('button');
        btnEstado.dataset.index = index;
        if (alarma.activa) {
            btnEstado.classList.add('btn-desactivar');
            btnEstado.textContent = 'Desactivar';
            btnEstado.addEventListener('click', () => {
                alarmas[index].activa = false;
                actualizarListaAlarmas();
            });
        } else {
            btnEstado.classList.add('btn-activar');
            btnEstado.textContent = 'Activar';
            btnEstado.addEventListener('click', () => {
                alarmas[index].activa = true;
                actualizarListaAlarmas();
            });
        }

        accionesDiv.appendChild(btnEliminar);
        accionesDiv.appendChild(btnEstado);

        alarmaItem.appendChild(accionesDiv);
        alarmasLista.appendChild(alarmaItem);
    });
}

actualizarListaAlarmas();

var array_productos = [];

function cesta(id) {
    const color = document.getElementById("color" + id);
    const modelo = document.getElementById("modelo" + id);
    const descripcion = document.getElementById("descripcion" + id);
    const precio = document.getElementById("precio" + id);

    console.log("info:", modelo.textContent, color.value, descripcion.textContent, precio.textContent);

    let crearproducto = true;

    array_productos.forEach(producto => {
        if (producto.modelo === modelo.textContent) {
            producto.cantidad++;
            crearproducto = false;
            guardarLocalStorage(array_productos);
        }
    });

    if (crearproducto) {
        const producto = new Producto(modelo.textContent, color.textContent, descripcion.textContent, parseInt(precio.textContent));
        array_productos.push(producto);
        guardarLocalStorage(array_productos);
    }
    actualizarCantidad();
}

class Producto {
    cantidad = 0;

    constructor(modelo, color, descripcion, precio) {
        this.modelo = modelo;
        this.color = color;
        this.descripcion = descripcion;
        this.precio = precio;
        this.cantidad++;
    }

    toString() {
        return `Modelo: ${this.modelo}\nColor: ${this.color}\nDescripción: ${this.descripcion}\nPrecio: ${this.precio}`;
    }
}

function guardarLocalStorage(productos) {
    localStorage.setItem("productos", JSON.stringify(productos));
}

function recuperarLocalStorage() {
    let productosjson = localStorage.getItem("productos");
    let productos = [];
    if (!(productosjson === null)) {
        productos = JSON.parse(productosjson);
        productos.forEach(producto => {
            producto.__proto__ = new Producto();
        });
        return productos;
    }
}

function actualizarCantidad() {
    const n_articulos = document.getElementById("n_articulos");
    let cantidad = 0;
    array_productos.forEach(producto => {
        cantidad += producto.cantidad;
    });

    n_articulos.textContent = cantidad;
}

function mostrarProductos(productos) {
    const div_productos = document.getElementById("productos");

    while (div_productos.firstChild) {
        div_productos.removeChild(div_productos.firstChild);
    }

    const precio_total = document.createElement("p");
    let precio_total_a_pagar = 0;

    productos.forEach(producto => {
        const div = document.createElement("div");
        const cantidad = document.createElement("span");
        cantidad.textContent = producto.cantidad;

        const modeloP = document.createElement("p");
        modeloP.textContent = `Modelo: ${producto.modelo}`;

        const colorP = document.createElement("p");
        colorP.textContent = `Color: ${producto.color}`;

        const descripcionP = document.createElement("p");
        descripcionP.textContent = `Descripción: ${producto.descripcion}`;

        const precioP = document.createElement("p");
        precioP.textContent = `Precio: ${producto.precio}`;

        const cantidadLabel = document.createElement("p");
        cantidadLabel.textContent = "Cantidad: ";
        cantidadLabel.appendChild(cantidad);

        const boton_eliminar = document.createElement("button");
        boton_eliminar.textContent = "Eliminar";

        const boton_mas = document.createElement("button");
        boton_mas.textContent = "Más";

        const boton_menos = document.createElement("button");
        boton_menos.textContent = "Menos";

        div.appendChild(modeloP);
        div.appendChild(colorP);
        div.appendChild(descripcionP);
        div.appendChild(precioP);
        div.appendChild(cantidadLabel);
        div.appendChild(boton_mas);
        div.appendChild(boton_menos);
        div.appendChild(boton_eliminar);

        boton_eliminar.addEventListener("click", function () {
            const indice = array_productos.findIndex(element => element.modelo === producto.modelo);
            if (indice !== -1) {
                array_productos.splice(indice, 1);
            }
            div_productos.removeChild(div);
            guardarLocalStorage(array_productos);
        });

        boton_mas.addEventListener("click", function () {
            array_productos.forEach(element => {
                if (element.modelo === producto.modelo) {
                    element.cantidad++;
                }
            });
            cantidad.textContent++;
            guardarLocalStorage(array_productos);
        });

        boton_menos.addEventListener("click", function () {
            array_productos.forEach(element => {
                if (element.modelo === producto.modelo) {
                    element.cantidad--;
                }
            });
            cantidad.textContent--;
            guardarLocalStorage(array_productos);
        });

        precio_total_a_pagar += producto.precio * producto.cantidad;
        div_productos.appendChild(div);
    });

    precio_total.textContent = `Total a pagar: ${precio_total_a_pagar}`;
    div_productos.appendChild(precio_total);
}