Ofereça e Mostre Cotações de Moedas em Tempo Real
Para quem deseja fornecer informações de cotações de moedas em tempo real diretamente em um site, aqui está uma solução simples e eficaz.
A implementação é rápida e fácil, permitindo que você exiba as taxas de câmbio mais atualizadas de várias moedas com um design limpo e intuitivo.
Créditos:
A exibição das cotações é alimentada pela API da AwesomeAPI, uma ferramenta gratuita e confiável para acesso a dados financeiros e de CEP.
- Limites de Solicitação: A API permite solicitações ilimitadas, mas pode bloquear temporariamente requisições sequenciais em excesso ou falhas frequentes (erro 404) por 1 hora.
- Origem dos Dados: As cotações são obtidas de fontes confiáveis, como o mercado Forex, enquanto os dados de CEP provêm do IBGE, garantindo precisão e atualizações regulares.
- Gratuidade: O uso da API é totalmente gratuito, oferecendo cotações de moedas e dados de CEP sem custos. Planos personalizados estão disponíveis mediante solicitação para necessidades específicas.
Agradecimento Especial:
Gostaríamos de expressar nossa gratidão ao desenvolvedor Ranielly Ferreira (sua página no github) por disponibilizar esta solução robusta. Sua contribuição ajuda a tornar a integração de dados financeiros acessível e eficiente para todos os usuários.
Segue um exemplo prático de código altamente responsivo, aplicável em diversos cenários, usando emojis como imagem
<style>
.container {
margin: auto;
text-align: center;
margin-top: 20px;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
max-width: 500px;
width: 90%;
margin-bottom: 20px;
}
.currency-info {
margin-top: 20px;
}
.currency-container {
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
width: 100%;
max-width: 1200px;
}
.currency {
display: flex;
align-items: center;
font-size: 16px;
font-weight: bold;
color: #333;
margin: 5px;
}
.currency span {
margin-right: 8px;
font-size: 20px;
}
.currency p {
margin: 0;
}
</style>
<div class="container">
<h2>Cotações Hoje 📈</h2>
<div class="currency-container">
<div class="currency"><span>🇺🇸</span><p id="usd-rate">Dólar: R$ --.--</p></div>
<div class="currency"><span>🇪🇺</span><p id="eur-rate">Euro: R$ --.--</p></div>
<div class="currency"><span>₿</span><p id="btc-rate">Bitcoin: R$ --.--</p></div>
<div class="currency"><span>🇨🇦</span><p id="cad-rate">Dólar Canadense: R$ --.--</p></div>
<div class="currency"><span>🇬🇧</span><p id="gbp-rate">Libra: R$ --.--</p></div>
<div class="currency"><span>🇲🇽</span><p id="mxn-rate">Peso Mexicano: R$ --.--</p></div>
<div class="currency"><span>🇦🇷</span><p id="ars-rate">Peso Argentino: R$ --.--</p></div>
</div>
</div>
<script>
async function fetchExchangeRates() {
const apiURL = 'https://economia.awesomeapi.com.br/last/USD-BRL,EUR-BRL,CAD-BRL,GBP-BRL,MXN-BRL,ARS-BRL,BTC-BRL';
try {
const response = await fetch(apiURL);
const data = await response.json();
document.getElementById('usd-rate').textContent = `Dólar: R$ ${parseFloat(data.USDBRL.bid).toFixed(2)}`;
document.getElementById('eur-rate').textContent = `Euro: R$ ${parseFloat(data.EURBRL.bid).toFixed(2)}`;
document.getElementById('btc-rate').textContent = `Bitcoin: R$ ${parseFloat(data.BTCBRL.bid).toFixed(2)}`;
document.getElementById('cad-rate').textContent = `Dólar Canadense: R$ ${parseFloat(data.CADBRL.bid).toFixed(2)}`;
document.getElementById('gbp-rate').textContent = `Libra: R$ ${parseFloat(data.GBPBRL.bid).toFixed(2)}`;
document.getElementById('mxn-rate').textContent = `Peso Mexicano: R$ ${parseFloat(data.MXNBRL.bid).toFixed(2)}`;
document.getElementById('ars-rate').textContent = `Peso Argentino: R$ ${parseFloat(data.ARSBRL.bid).toFixed(2)}`;
} catch (error) {
console.error('Erro ao obter cotações:', error);
alert('Não foi possível obter as cotações. Tente novamente mais tarde.');
}
}
document.addEventListener('DOMContentLoaded', () => {
fetchExchangeRates();
});
</script>A seguir, você pode ver o resultado final:
Cotações Hoje 📈
Dólar: R$ –.–
Euro: R$ –.–
Bitcoin: R$ –.–
Dólar Canadense: R$ –.–
Libra: R$ –.–
Peso Mexicano: R$ –.–
Peso Argentino: R$ –.–
Sobre o Desenvolvedor
Eu me chamo Luiz Eduardo, sou estudante de educação e atuante no campo da tecnologia.
Desenvolvi este gerador de senhas, além de outras ferramentas, usando 100% ChatGPT, sem saber nenhuma linguagem de programação, sabendo apenas a lógica.
Para fãs da trilogia Matrix, eu criei também uma versão futurista do melhor gerador de senhas que você vai encontrar, e que está disponível na minha página do GitHub destinada a ferramentas 100% criadas com uso de IA.
Para ir até lá, basta clicar abaixo:
Gerador de senhas com efeito Matrix em Github.io disponível em 3 idiomas!
Convite Especial
Estou organizando um evento aberto a todos os interessados em discutir o futuro da tecnologia e a programação “no code” 100% assistida por inteligências artificiais. Este é o evento ideal para quem gosta de ter conversas profundas sobre tecnologia e ideias.
Inscreva-se agora:
Quer aprender a criar ferramentas incríveis com inteligência artificial?
Nesse evento, vou te mostrar como desenvolver um gerador de senhas robusto e outras soluções práticas, utilizando o poder da IA.
Mas atenção: a IA ainda está em constante evolução, então veremos juntos quais são as possibilidades e limitações atuais.
Não perca essa oportunidade!
As vagas são limitadas.
Formulário de inscrição
Data: 31 de agosto (sujeito a alterações)
Confirmação: Por e-mail
As vagas são limitadas para este evento gratuito com duração aproximada de 1 hora. Ressaltamos que o objetivo é compartilhar conhecimento e auxiliar aqueles que desejam se aprofundar nesse novo mercado. Não haverá comercialização de produtos ou serviços.