const btnSumar = document.querySelector("#sumar");
const btnRestar = document.querySelector("#restar");

function actualizarVista(valor) {
    const MIN = 0;
    const MAX = 10;
    const parrafo = document.querySelector("#contador");
    parrafo.textContent = valor;

    // Habilitamos o deshabilitamos los botones según el valor actual.
    // Cuando disabled es true, el botón no responde a clics.
    btnSumar.disabled = valor === MAX;
    btnRestar.disabled = valor === MIN;
}

btnSumar.addEventListener("click", () => {
    // Obtenermos el valor actual
    let valor = parseInt(document.querySelector('#contador').textContent);
    // Sumamos 1
    valor++;
    // y actualizamos la vista
    actualizarVista(valor);
});

btnRestar.addEventListener("click", () => {
    // Obtenermos el valor actual
    let valor = parseInt(document.querySelector('#contador').textContent);
    // Restamos 1
    valor--;
    // y actualizamos la vista
    actualizarVista(valor);
});

// Llamamos a actualizarVista al inicio para establecer el estado inicial en 5.
actualizarVista(5);