const buttons = document.querySelectorAll('button')
/*através do 1° const eu posso maninuplar os indices*/
let cont = 0
while (cont < buttons.length) {
const BUTTONS = buttons[cont]
const buttons_individuais = BUTTONS.classList[1]
console.log('buttons_individuais', buttons_individuais)
// INICIO FUNCTION ONCLICK...
BUTTONS.onclick = function () {
let imagem = document.querySelectorAll('img')
const body = document.getElementById('body')
let temporizador = document.querySelector('.app__card-timer')
if (buttons_individuais === 'app__card-button--foco') {
imagem[1].src = './imagens/foco.png';
buttons[0].classList.add('active')
buttons[1].classList.remove('active')
buttons[2].classList.remove('active')
body.style.backgroundImage = 'var(--main-bg-color)'
time = 25
temporizador.innerHTML = time
if (time === 25) {
setInterval(() => {
if (time > 0 ) {
time--
temporizador.innerHTML = time
}
},1000) }
}
else if (buttons_individuais.endsWith('app__card-button--curto')) {
imagem[1].src = './imagens/descanso-curto.png'
buttons[0].classList.remove('active')
buttons[1].classList.add('active')
buttons[2].classList.remove('active')
body.style.backgroundImage = ' var( --cor2)'
time1 = 15
temporizador.innerHTML = time1
}
else if (buttons_individuais.endsWith('app__card-button--longo')) {
imagem[1].src = './imagens/descanso-longo.png'
buttons[0].classList.remove('active')
buttons[1].classList.remove('active')
buttons[2].classList.add('active')
body.style.backgroundImage = 'var(--cor3)'
time2 = 5
temporizador.innerHTML = time2
}
let meu_span_comecar = document.querySelector('.meu_span')
if (buttons_individuais === 'comecar') {
const meuaudio = document.createElement('audio')
/*endsWith é um método em JavaScript que verifica se uma string termina com um texto específico. Ele retorna true se a string termina com o trecho informado, e false caso contrário.*/
if (imagem[2].src.endsWith('imagens/play_arrow.png')) {
imagem[2].src = 'imagens/pause.png'
buttons[3].appendChild(meuaudio)
meuaudio.src = 'sons/play.wav'
meuaudio.play()
meu_span_comecar.innerHTML = 'Pausar'
if (time === 0) {
time = valor_ao_lado_time
}
} // (end of the 1° if of the inside) ...
else {
imagem[2].src = 'imagens/play_arrow.png'
buttons[3].appendChild(meuaudio)
meuaudio.src = 'sons/pause.mp3'
meuaudio.play()
meu_span_comecar.innerHTML = 'Começar'
valor_ao_lado_time = time
time = 0
} // (end of the else of the inside)...
} //END OF THE LAST BUTTON...
} //END FUNCTION ONCLICK...
cont++
}//WHILE
