[Dúvida] Nova moeda

Oi, Estanislau! Como vai?

Oproblema está em nomes inconsistentes (maiúsculas/minúsculas), ids trocados/typos, e no uso das funções para atualizar o gráfico e a lista.

1) index.html — corrige classes e ids

<article class="dadosEuro">
  <div class="grafico">
    <div class="grafico__titulo">
      <span class="grafico__ilustracao-euro"></span> <!-- minusculas e igual ao CSS -->
      <h2>Variação da moeda desde o login</h2>
    </div>
    <canvas id="graficoEuro"></canvas> <!-- id simples e sem __ -->
  </div>

  <div class="investimentos">
    <h2>Valores da moeda</h2>
    <ul class="investimentos__lista" id="euro" data-lista></ul> <!-- id em minusculas -->
  </div>
</article>

O que mudar e por quê:

• Troque .grafico__ilustracao-Euro por .grafico__ilustracao-euro para casar com o CSS.
• Troque o por id="graficoEuro" (id simples para usar no JS).
• Troque o
  • por id="euro" para manter padrão (minúsculas).

  2) grafico.css — mantenha a classe em minusculas

  .grafico__ilustracao-euro { background-image: url('../imagens/Euro.png'); }
  .grafico__ilustracao-dolar { background-image: url('../imagens/cifrao.png'); }
  .grafico__ilustracao-iene  { background-image: url('../imagens/iene.png'); }
  

  O que mudar e por quê:

  • Confirme que a classe é exatamente .grafico__ilustracao-euro.
  • O arquivo da imagem deve existir no caminho indicado. Se o nome do arquivo mudar, atualize a URL.

  3) workerEuro.js — mantém o fetch correto e o retorno do worker

  addEventListener("message", () => {
    conectaAPI();
    setInterval(conectaAPI, 20000); // atualiza a cada 20s
  });
  
  async function conectaAPI() {
    const resposta = await fetch("https://economia.awesomeapi.com.br/last/EUR-BRL");
    const dados = await resposta.json();
    postMessage(dados.EURBRL); // envia objeto com ask/bid
  }
  

  O que mudar e por quê:

  • Garanta o caminho do arquivo como ./scripts/workers/workerEuro.js.
  • Use EURBRL (euro para real). Isso retorna ask que você usa no gráfico/lista.

  4) script.js — seleciona o canvas certo, cria Chart e integra o worker

  const graficoEuro = document.getElementById('graficoEuro'); // sem typo
  const graficoParaEuro = new Chart(graficoEuro, {
    type: 'line',
    data: {
      labels: [],
      datasets: [{
        label: 'Euro',
        data: [],
        fill: false,
        borderColor: 'rgb(0, 123, 255)', // personalize a cor
        tension: 0.1
      }]
    }
  });
  
  let workerEuro = new Worker("./scripts/workers/workerEuro.js");
  workerEuro.postMessage('euro');
  
  workerEuro.addEventListener("message", (event) => {
    const tempo = geraHorario();      // sua função existente para timestamp
    const valor = event.data.ask;     // string numérica vinda da API
    adicionarDados(graficoParaEuro, tempo, valor); // use o mesmo nome de função do seu projeto
    const listaEuro = document.querySelector('#euro'); // pega o <ul> correto
    imprimeCotacao(listaEuro, 'euro', valor); // imprime valores na lista
  });
  

  O que mudar e por quê:

  • Corrija o typo garficoEuro para graficoEuro.
  • Use o mesmo objeto do Chart na atualização: adicionarDados(graficoParaEuro,...).
  • Se no seu projeto a função se chama adicionarData, mantenha esse nome padronizado.
  • Substitua selecionaCotacao("Euro", valor) por imprimeCotacao(listaEl, 'euro', valor) passando o elemento UL (não apenas a string).

  5) imprimeCotacao — padronize a função que escreve na lista

  function imprimeCotacao(lista, nome, valor) {
    lista.innerHTML = '';
    const plurais = { dolar: 'dolares', iene: 'ienes', euro: 'euros' };
    const li = document.createElement('li');
    li.textContent = `${nome} agora: R$ ${Number(valor).toFixed(4)} (${plurais[nome]})`;
    lista.appendChild(li);
  }
  

  O que mudar e por quê:

  • Garanta que o primeiro parâmetro é o elemento UL (ex.: document.querySelector('#euro')).
  • Formate o valor com Number(valor).toFixed(4) para padronizar casas decimais.
  • Mantenha o objeto plurais com as chaves todas em minúsculas.

  Continuarei no tópico abaixo devido à grande quantidade de código...

Checklist final para conferir tudo:

• Classe e id no HTML em minúsculas e id simples: graficoEuro, #euro, .grafico__ilustracao-euro.
• Caminho do worker: ./scripts/workers/workerEuro.js.
• Atualização do Chart usando o mesmo objeto (graficoParaEuro).
• Uso consistente de imprimeCotacao(lista, 'euro', valor).

Espero ter ajudado. Conte com o apoio do Fórum na sua jornada. Fico à disposição.

Abraços e bons estudos!