grafico.css
.dadosDolar,
.dadosIene {
margin: 3em auto;
padding: 2em;
display: flex;
justify-content: space-between;
background-color: white;
border-radius: 24px;
width: 65%;
color: var(--cinza);
}
.dadosEuro {
margin:3em auto;
padding: 2em;
display: flex;
justify-content: space-between;
background-color:white;
border-radius: 24px;
width: 65%;
color: var(--cinza);
}
.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');
}
index.html
<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="grafico__ilustracao-Euro"></canvas>
</div>
<div class="investimentos">
<h2>Valores da moeda</h2>
<ul class="investimentos__lista" id= "Euro" data-lista>
</ul>
</div>
</article>
Imprime Cotação.
function imprimeCotacao(lista, nome, valor) {
lista.innerHTML = '';
const plurais = {
"dolar": "dolares",
"iene": "ienes",
"euro": "euros"
}
worker Euro.js
addEventListener("message", event => {
conectaAPI()
setInterval(() => conectaAPI(), 20000)
})
async function conectaAPI() {
const conecta = await fetch("https://economia.awesomeapi.com.br/last/EUR-BRL");
const conectaTraduzido = await conecta.json();
postMessage(conectaTraduzido.EURBRL);
}
scripts.js
let workerEuro= new Worker ("./script/workers/workerEuro.js");
workerEuro.postMessage('euro');
workerEuro.addEventListener("message", event => {
let tempo = geraHorario();
valor = event.data.ask;
adicionarDados(graficoEuro, tempo, valor);
selecionaCotacao("Euro", valor);
})
const graficoEuro= document.getElementById('garficoEuro');
const graficoParaEuro= new Chart(graficoEuro, {
type: 'line',
data:{
labels:[],
datasets: [{
data: [],
borderWidth: 1
}]
}
})
Nessa atividade, só inseriu um gráfico que foi o do dólar. Desde já agradeço ajuda.