Currency Converter

Our project is a quick and easy-to-use currency converter with great visuals to understand the buying power of countries around the world! We hope our Currency Converter helps in Waffle Paradise.

Comment

Inspiration

We were inspired to make the Currency Converter because our parents travel a lot for work, so we wanted a way to convert between different currencies. Additionally, we were curious about the buying powers of currencies around the world, so we thought this project would help us visualize their differences.

What it does

Our project can be broken down into three parts: the currency converter takes in a currency and returns the equivalent in terms of the user’s desired output currency, the bar graph shows the disparity between each selected country’s currency, and the algorithm estimates the cost of a cup of coffee in different currencies.

How we built it

We built the program using Javascript, HTML, CSS, the ExchangeRate-API, and the Google Charts API. First, we started with the basic converter; we found a list of countries stored in Javascript on GitHub, implemented the ExchangeRate-API, implemented the logic for the converter, and tested it in the console. Then, we built a basic front-end for the website with a dropdown menu, swap input/output button, and convert button. Afterwards, we wanted to give the user a better idea of how purchasing power parity differs between countries, so we added a bar graph (Google Charts API) and coffee cost estimator (CSS and HTML). The CSS and HTML of the coffee cup was composed of the cup body, plate, handle, and animations. The animations were built on four repeated key frames for added effect.

Challenges we ran into

The first challenge we faced was figuring out where to start. This was our first hackathon, so we were kind of confused as to what the goal was, but the community was super nice and gave us a few ideas for projects. We realized that all of their suggestions would require a lot of heavy lifting because we’ve never even touched Javascript, HTML, or CSS before. We decided that we needed to learn a lot, so we might as well come up with our own project idea. Our next challenge was to pick an idea that we could realistically make without it being too easy and we landed on making a Currency Converter. After more than six hours of research we were finally able to create a barebones website, but this was still one of the easier parts of our journey. We then worked to integrate APIs into our website, yet another thing we had never even heard of. It took us a lot of time to figure out how to integrate these APIs and the different ways we needed to deconstruct it in order to use different aspects of it to our advantage. We also struggled with the many types of APIs; because there are so many types of APIs we were forced to constantly try something new. Finally, making the site visually appealing was extremely difficult due to how different CSS is to anything we’ve ever seen before; it was significantly harder to do stuff with elements than it was in Processing 3D (a drawing coding tool that we used in school).

Accomplishments that we're proud of

If our past selves, even from just this morning, could see our project now, they’d be shocked. Every facet of the project was completely foreign to us 24 hours ago, so to have this project even working in a somewhat complex fashion is something we’re very proud of. Specifically, we're proud of our price to buy coffee because we think it does a good job of portraying the value of each currency in a manner everyone can understand. We had to completely break down the ExchangeRate API to use it in our own functions, so we’re also proud that we used an API for exchange rates instead of a static exchange rate database. Using a static exchange rate database would have been easier but using the API increased the value of our product exponentially.

What we learned

On top of learning CSS, Javascript, HTML, and API’s we learned a lot about real-world implementation. A topic we’ve struggled with is taking our coding knowledge out of the classroom and putting it to work. By participating in this Hackathon we’ve taken the first few steps to actually changing the world for the better .

What's next for Currency Converter

Currency Converter is an awesome first step for us. We can continue to improve upon it by applying new coding concepts we learn which will continue to advance our coding capabilities. We can also make Currency Converter a real app that will focus on ease of access so that it may have more real world use. We are thinking that it could be expanded to a broader use travel app that contains a bit of history about each country selected, some headline news, places to visit, restaurants to eat at, etc.

Built With

Share this project:

Updates