readme-en.md

🇺🇸 English

🇧🇷 Português

💱 Currency Converter Project

Video   |    Technologies   |    About   |    Highlights   |    Cloning   |    Contact

📹 Project Video Presentation

result-currency-converter.mp4

If the video has any errors, reload the page!
Access the project online HERE

🚀 Technologies Used

• Javascript / Fetch API
• CSS
• HTML

📝 About

Watching the video above and/or accessing the project online will help you understand the explanation!

The Currency Converter is a currency conversion web application inspired by the challenge DevClub Convert Money, and gave me a lot of learning.
Following the Mobile-First concept, I delved deeper into HTML, CSS and Javascript to obtain such a result, which, in terms of both layout and functionality, was very far from the original model.
Consuming the API of coins and getting the values in real time, it converts from R$-Real to $-Dollar, €-Euro and ￥-Yen.

📌 Some Highlights

• Use of CSS variables and manipulation of them via Javascript;
• API consumption via Javascript FetchAPI;
• Complete styling of the rigid HTML Select tag;
• Use of MediaQueries to develop responsiveness;
• Use of KeyFrames for more apparent and complex animations and CSS Transition for simpler ones;
• If the Dollar is below R$5.00, a Thanos meme will appear;
• Small mapping of the Enter key to perform the conversion;
• Use of the Intl.NumberFormat() method to format numbers;

📖 Cloning the Project

To clone and run this project on your computer, you just need Git to be previously installed.
After that, in the terminal:

# Clone this repository with:
> git clone https://github.com/Luk4x/devClub-convert-money.git

# Enter the repository with:
> cd devClub-convert-money

# Run the project with:
> start index.html # For Windows users
> open index.html # For Linux/Mac users

🤝 Contributor Contact

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

Back to Top