Progresso | JavaScript: manipulando elementos no DOM | Alura

Capturando elementos com JavaScript Primeiro, precisamos selecionar os elementos do HTML que serão manipulados: O documento HTML. O elemento onde o temporizador será exibido. O elemento onde as imagens de cada contexto irão trocar de posição. O elemento onde as frases de cada contexto irão trocar de posição. Supondo que o HTML tenha as seguintes estruturas:.

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fokus</title>
</head>
<body>
<div id="temporizador">00:00</div>
<div id="imagens-contexto"></div>
<div id="frases-contexto"></div>
<button id="botao-iniciar">Iniciar/Pausar</button>
<button id="botao-foco">Foco</button>
<button id="botao-descanso-curto">Descanso Curto</button>
<button id="botao-descanso-longo">Descanso Longo</button>

<script src="script.js"></script>
</body>
</html>

Criando variáveis no JavaScript Agora, vamos criar as variáveis no JavaScript para armazenar esses elementos:

    // Selecionando os elementos do HTML
     const documentoHTML = document.documentElement;
    const elementoTemporizador = document.getElementById('temporizador');
    const elementoImagensContexto = document.getElementById('imagens-contexto');
   const elementoFrasesContexto = document.getElementById('frases-contexto');

 // Verificando se as variáveis estão corretas
    console.log(documentoHTML);
   console.log(elementoTemporizador);
  console.log(elementoImagensContexto);
  console.log(elementoFrasesContexto);

Criando botões da aplicação Vamos criar as variáveis para os botões que serão utilizados na aplicação:

  // Selecionando os botões da aplicação
const botaoIniciar = document.getElementById('botao-iniciar');
const botaoFoco = document.getElementById('botao-foco');
const botaoDescansoCurto = document.getElementById('botao-descanso-curto');
const botaoDescansoLongo = document.getElementById('botao-descanso-longo');

// Verificando se as variáveis estão corretas
console.log(botaoIniciar);
console.log(botaoFoco);
console.log(botaoDescansoCurto);
console.log(botaoDescansoLongo);

Selecionando botões com JavaScript e definindo tempos Agora, vamos criar variáveis com os tempos de cada tipo de temporizador:

// Definindo tempos dos temporizadores
   const tempoFoco = 1500;          // 25 minutos
   const tempoDescansoCurto = 300;  // 5 minutos
   const tempoDescansoLongo = 900;  // 15 minutos

// Verificando se as variáveis estão corretas
 console.log(tempoFoco);
console.log(tempoDescansoCurto);
console.log(tempoDescansoLongo);

Código Completo Juntando tudo, teremos:

// Selecionando os elementos do HTML
 const documentoHTML = document.documentElement;
 const elementoTemporizador = document.getElementById('temporizador');
 const elementoImagensContexto = document.getElementById('imagens-contexto');
 const elementoFrasesContexto = document.getElementById('frases-contexto');

 // Verificando se as variáveis estão corretas
  console.log(documentoHTML);
  console.log(elementoTemporizador);
  console.log(elementoImagensContexto);
  console.log(elementoFrasesContexto);

 // Selecionando os botões da aplicação
const botaoIniciar = document.getElementById('botao-iniciar');
const botaoFoco = document.getElementById('botao-foco');
const botaoDescansoCurto = document.getElementById('botao-descanso-curto');
const botaoDescansoLongo = document.getElementById('botao-descanso-longo');

 // Verificando se as variáveis estão corretas
 console.log(botaoIniciar);
 console.log(botaoFoco);
 console.log(botaoDescansoCurto);
 console.log(botaoDescansoLongo);

// Definindo tempos dos temporizadores
 const tempoFoco = 1500;          // 25 minutos
 const tempoDescansoCurto = 300;  // 5 minutos
  const tempoDescansoLongo = 900;  // 15 minutos

 // Verificando se as variáveis estão corretas
 console.log(tempoFoco);
 console.log(tempoDescansoCurto);
 console.log(tempoDescansoLongo);