Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

[Projeto] Mão na massa !

Referente ao curso JavaScript: manipulando elementos no DOM, no capítulo Iniciando o projeto Fokus e atividade Lista de exercícios

por Joao pedro
| 62.9k xp | 28 posts

1 = Capturando elementos com JavaScript

document.querySelector('html');
document.querySelector('#timer');
document.querySelector('.app__image');
document.querySelector('.app__title');

2 = Criando variáveis no JavaScript

const html = document.querySelector('html');
const temporizador = document.querySelector('#timer');
const imagem = document.querySelector('.app__image');
const frase = document.querySelector('.app__title');

3 = Criando botões da aplicação

const botaoIniciar = document.querySelector('#start-pause');
const focoBt = document.querySelector('.app__card-button--foco');
const curtoBt = document.querySelector('.app__card-button--curto');
const longoBt = document.querySelector('.app__card-button--longo');

4 = Selecionando botões com JavaScript

const tempoFoco = 1500; 
const tempoDescansoCurto = 300; 
const tempoDescansoLongo = 900;
3 respostas
por Rafael Rocha
| 2649.1k xp | 5608 posts
Alura Scuba Team Time Alura | Apoio Educacional no Fórum

Boa noite João! Tudo bem com você?

Obrigado por compartilhar seu modo de resolução com a comunidade Alura. Sua resolução está correta.

Uma curiosidade é que ao capturar elementos com document.querySelector, se em algum momento você precisar manipular vários elementos com a mesma classe, o document.querySelectorAll pode entrar em cena e te ajudar nisso. Ele retorna todos os elementos que correspondem ao seletor, o que permite manipulações em lote. Quer ver um exemplo? Se tivéssemos vários parágrafos com a classe .texto, poderíamos capturá-los assim:

const paragrafos = document.querySelectorAll('.texto');

E se quiséssemos mudar a cor do texto de todos eles para a cor azul, faríamos assim:

paragrafos.forEach(paragrafo => {
    paragrafo.style.color = 'blue';
});

Espero ter ajudado. Abraços e bons estudos!

Continue se empenhando e se tiver dúvidas, não hesite em voltar ao fórum ✓
por Joao pedro
| 62.9k xp | 28 posts

Boa noite, Rafael ! tudo sim e com voce ?

obrigado por dar uma olhada na minha resolução ! as suas dias me ajudaram sim e manterei elas anotadas comigo aqui.

so uma pergunta , Rafael! no segundo trecho de código que você usou para mudar as cores dos textos o "forEach" seria também um elemento DOM ?

solução!
por Rafael Rocha
| 2649.1k xp | 5608 posts
Alura Scuba Team Time Alura | Apoio Educacional no Fórum

Bom dia João! Estou bem sim :)

Fico feliz em saber que as dicas foram úteis para você. O forEach não é um elemento do DOM, na verdade, ele é um método de arrays em JavaScript. Ele permite a execução de uma função em cada item de um array.

No exemplo que mencionei, o document.querySelectorAll('.texto') retorna uma NodeList, que é semelhante a um array. A NodeList contém todos os elementos do DOM que correspondem ao seletor .texto. Embora a NodeList não seja tecnicamente um array, ela possui métodos similares, como o forEach. Com ele, podemos iterar sobre cada elemento da lista e aplicar a mudança desejada, como alterar a cor do texto.

Uma analogia que podemos fazer é, imagine que você tem uma lista de tarefas (a NodeList), e para cada tarefa na lista, você precisa fazer algo específico, como marcar como concluída (mudar a cor). O forEach é o método que você usa para percorrer a lista e aplicar a ação em cada item.

Caso queira se aprofundar ainda mais sobre o forEach deixo abaixo alguns materiais complementares:

Abraços e bons estudos!