Falta pouco!

0 dias

0 horas

0 min

0 seg

1
resposta

[Dúvida] Nova moeda

Index.html

 </article>
      <article class="dadosEuro">
      <div class="grafico">
        <div class="grafico__titulo">
          <span class="grafico__ilustracao-euro"></span>
                   <h2>Variação da moeda desde o login</h2>
        </div>
       <canvas id="graficoEuro"></canvas>
      </div>

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

workerEuro.js

addEventListener("message", event => {
    conectaAPI()
    setInterval(() => conectaAPI(), 15000) 
})

async function conectaAPI() {
    const conecta = await fetch('https://economia.awesomeapi.com.br/last/EUR-BRL');
    const conectaTraduzido = await conecta.json();
    postMessage(conectaTraduzido.EURBRL);
}

imprimeCotacao.js

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);
    }
    
export default selecionaCotacao;

scriptis.js

const graficoEuro = document.getElementById('graficoEuro');
const graficoParaEuro = new Chart(graficoEuro,{
    type: 'line',
    data:{
        labels: [],
        datasets: [{
            label: 'euro',
            data: [],
            fill: false,
            borderColor: 'rgb(0, 123, 255)',
            tension: 0.1
        }]
    }
});

let workerEuro = new Worker('./script/Workers/WorkerEuro.js');
workerEuro.postMessage('euro');

workerEuro.addEventListener("message", (event) =>{
    const tempo = geraHorario();
    const valor = event.data.ask;
    selecionaCotacao("euro", valor);
    const listaEuro = document.querySelector('#euro');
    adicionarDados(graficoParaEuro, tempo, valor);
})

styles.css

.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');
}

Só que mesmo assim continua dando errado. Por quê, será?

1 resposta

Olá, tudo bem?

Olhando o que você mandou, o problema principal me parece está nesses pontos:

No imprimeCotacao.js, você exportava uma função que não existia (selecionaCotacao). Corrigi pra exportar a certa.

No scriptis.js, você chamava selecionaCotacao, mas a função correta era imprimeCotacao. Também faltavam as funções geraHorario e adicionarDados, que adicionei pra não quebrar o gráfico.

O caminho do worker estava errado (./script/Workers/...). Corrigi pra bater com o arquivo que você tem.

Ou seja: só esses arquivos precisaram de ajuste

imprimeCotacao.js

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

scriptis.js


import { imprimeCotacao } from "./imprimeCotacao.js";

const graficoEuro = document.getElementById('graficoEuro');
const graficoParaEuro = new Chart(graficoEuro, {
  type: 'line',
  data: {
    labels: [],
    datasets: [{
      label: 'euro',
      data: [],
      fill: false,
      borderColor: 'rgb(0, 123, 255)',
      tension: 0.1
    }]
  }
});

let workerEuro = new Worker('./workerEuro.js', { type: "module" });
workerEuro.postMessage('euro');

workerEuro.addEventListener("message", (event) => {
  const tempo = geraHorario();
  const valor = event.data.ask;
  const listaEuro = document.querySelector('#euro');

  imprimeCotacao(listaEuro, "euro", valor);
  adicionarDados(graficoParaEuro, tempo, valor);
});

function geraHorario() {
  const agora = new Date();
  return agora.getHours() + ":" + agora.getMinutes() + ":" + agora.getSeconds();
}

function adicionarDados(grafico, label, dado) {
  grafico.data.labels.push(label);
  grafico.data.datasets[0].data.push(dado);
  grafico.update();
}

Seu código ficou assim:

Imagem do gráfico em estado funcional

Espero ter ajudado! Bons estudos!

Sucesso

Imagem da comunidade