Vídeo   |    Tecnologias   |    Sobre   |    Destaques   |    Clone   |    Contato

Caso o vídeo apresente algum erro, recarregue a página!
Acesse o projeto online AQUI

• Javascript / Fetch API
• CSS
• HTML

Assistir o vídeo acima e/ou acessar o projeto online ajudará na compreensão da explicação!

O Currency Converter é uma aplicação web de conversão de moedas inspirada no desafio DevClub Convert Money, e me rendeu bastante aprendizado.
Seguindo o conceito de Mobile-First, me aprofundei mais em HTML, CSS e Javascript para obter tal resultado, que tanto em layout quanto em funcionalidades, se distanciou bastante do modelo original.
Consumindo a API de moedas e obtendo os valores em tempo real, ele converte de R$-Real para $-Dollar, €-Euro e ￥-Yen.

• Utilização de variáveis CSS e manipulação das mesmas via Javascript;
• Consumo de API via Javascript FetchAPI;
• Estilização completa da rígida tag HTML Select;
• Utilização de MediaQueries para o desenvolvimento da responsividade;
• Utilização de KeyFrames para animações mais aparentes e complexas e CSS Transition pra as mais simples;
• Caso o Dollar fique abaixo de R$5,00, aparecerá um meme do Thanos;
• Pequeno mapeamento da tecla Enter para realizar a conversão;
• Utilização do método Intl.NumberFormat() para a formatação dos números;

Para clonar e executar este projeto em seu computador, você precisará apenas que o Git esteja previamente instalado.
Feito isso, no terminal:

# Clone esse repositório com:
> git clone https://github.com/Luk4x/devClub-convert-money.git

# Entre no repositório com:
> cd devClub-convert-money

# Execute o projeto com:
> start index.html # Para usuários de Windows
> open index.html # Para usuários de Linux/Mac

Vitrine.Dev 🪟 Lucas Maciel 🪧 Vitrine.Dev Lucas Maciel ✨ Nome 💱 Currency Converter 🏷️ Tecnologias javascript, css, html 📷 Img

Voltar ao Topo