Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Solucionado (ver solución)
Solucionado
(ver solución)
3
respuestas

[Bug] Errores varios.

En el capítulo de 'JavaScript: manipulando elementos en el DOM' encuentro varios errores al finalizar el proyecto que no logro distinguir la raíz del problema como para solucionarlos, especialmente comparando con el proyecto terminado. Primeramente, el timer me incluye fecha a pesar de tener el mismo código en el .js que el finalizado, y en segundo lugar el botón de Comenzar/Pausar no me muestra el ícono correspondiente, incluso agregando las líneas de código correspondiente para agregar la imagen. Comparto código de mi proyecto, e imagen del problema.

const html = document.querySelector('html')
const botonCorto = document.querySelector('.app__card-button--corto')
const botonEnfoque = document.querySelector('.app__card-button--enfoque')
const botonLargo = document.querySelector('.app__card-button--largo')
const banner = document.querySelector('.app__image')
const titulo = document.querySelector('.app__title')
const botones = document.querySelectorAll('.app__card-button')
const inputEnfoqueMusica = document.querySelector('#alternar-musica')
const musica = new Audio('./sonidos/luna-rise-part-one.mp3')
const botonIniciarPausar = document.querySelector('#start-pause')
const sonidoPlay = new Audio('./sonidos/play.wav')
const sonidoPausa = new Audio('./sonidos/pause.mp3')
const sonidoTerminando = new Audio('./sonidos/beep.mp3')
const textoIniciarPausar = document.querySelector('#start-pause span')
const tiempoEnPantalla = document.querySelector('#timer')



let tiempoTranscurridoEnSegundos = 1500
let idIntervalo = null

musica.loop = true

inputEnfoqueMusica.addEventListener('change', () => {
    if(musica.paused){
        musica.play()
    } else {
        musica.pause()
    }
})

botonCorto.addEventListener('click', () => {
    tiempoTranscurridoEnSegundos = 300
    cambiarContexto('descanso-corto')
    botonCorto.classList.add('active');
});

botonEnfoque.addEventListener('click', () => {
    tiempoTranscurridoEnSegundos = 1500
    cambiarContexto('enfoque');
    botonEnfoque.classList.add('active');
});

botonLargo.addEventListener('click', () => {
    tiempoTranscurridoEnSegundos = 900
    cambiarContexto('descanso-largo');
    botonLargo.classList.add('active');
});

function cambiarContexto(contexto){
    
    mostrarTiempo()
    botones.forEach(function(contexto){
        contexto.classList.remove('active');
    })

    html.setAttribute('data-contexto', contexto)

    banner.setAttribute('src', `./imagenes/${contexto}.png`)
    switch (contexto) {
        case "enfoque":
            titulo.innerHTML = `
            Optimiza tu productividad,<br>
            <strong class="app__title-strong">sumérgete en lo que importa.</strong>
            `
            break;
        
        case "descanso-corto":
            titulo.innerHTML = `
            ¿Qué tal tomar un respiro?<br>
            <strong class="app__title-strong">¡Haz una pausa corta!</strong>
            `
            break;

        case "descanso-largo":
            titulo.innerHTML = `
            Hora de volver a la superficie<br>
            <strong class="app__title-strong">Haz una pausa larga.</strong>
            `
            break;
        default:

            break;

    }
};

const cuentaRegresiva = () => {
    if(tiempoTranscurridoEnSegundos <= 0){
        sonidoTerminando.play()
        alert ('Se acabó el tiempo!')
        reiniciar()
        return
    }
    tiempoTranscurridoEnSegundos -= 1
    mostrarTiempo()
}

botonIniciarPausar.addEventListener('click', iniciarPausar)

function iniciarPausar(){
    if (idIntervalo){
        sonidoPausa.play()
        reiniciar()
        return
    }
    sonidoPlay.play()
    idIntervalo = setInterval(cuentaRegresiva, 1000)
    textoIniciarPausar.textContent = "Pausar"
    iconoIniciarPausar.setAttribute('src', `/imagenes/pause.png`)
}

function reiniciar(){
    clearInterval(idIntervalo)
    idIntervalo = null
    textoIniciarPausar.textContent = "Comenzar"
    iconoIniciarPausar.setAttribute('src', `/imagenes/play_arrow.png`);
    idIntervalo = null;
}

function mostrarTiempo(){
    const tiempo = new Date (tiempoTranscurridoEnSegundos * 1000)
    const tiempoFormateado = tiempo.toLocaleDateString('es-ES', {minute:'2-digit', second:'2-digit'})
    tiempoEnPantalla.innerHTML = `${tiempoFormateado}`
}

mostrarTiempo()

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

Desde ya muchas gracias, Walter Martinez

3 respuestas
solución!

Hola, Walter!

El problema es que en esta linea estás utilizando "toLocaleDateString" en lugar de "toLocaleTimeString" :

const tiempoFormateado = tiempo.toLocaleDateString('es-ES', {minute:'2-digit', second:'2-digit'})

Código correcto:

const tiempoFormateado = tiempo.toLocaleTimeString('es-ES', {minute:'2-digit', second:'2-digit'});

Muchísimas gracias, recién lo pude probar. Lo único que me falta resolver es lo de los botones entonces, que no muestran los íconos de pausa y play.

Esta declarado así:

const botonIniciarPausar = document.querySelector('#start-pause')

y se está llamando con otro nombre:

iconoIniciarPausar.setAttribute('src', `/imagenes/play_arrow.png`);