Converter Day 43

Oh, this was a hell of a learning experience. okay lets back up a moment. Given I’m starting slow [becuase of my rusty knowledge] I decided to do a currency converter app. I didn’t suspect I’d use a lot of things I haven’t used so this was awesome.

Now as always, I started with the UI, because let’s face it, it’s what takes up most of the time. Positioning is a bitch so I had to first make sure it’s positioned right and responsive

Okay perfect now let’s add a bit of design to the mix

okay gradient Bg [check], date [check], input elemets[check], swap button [check]. Okay now the list of currencies, lets first set up the UI and then deal with the list of content.

Okay… now is where the real work starts. So being the lazy programmer I as, there is no way in hell I’d manually add all those currency codes so what are my options? API’s yes! So here’s where the learning part starts. got to know the open exchange rate API, and worked with AJAX and JSON to grab the data. After reading the MDN for it, I started the test.

Hell! it worked! awesome sauce [yes, I am one of those annoying people who say awesome sauce]  okay now let’s try to save these rates in a js object and after a couple of attempts let’s try to save these rates in a js object and after a

couple of attempts

I got those codes. Now, taking advantage of the dom to create those list options we get

woohooo! we’re on a roll here. now let’s try converting. First, let’s see if I can grab the selected options so what better way then testing

Alright, I have the codes now the actual conversion. It’s just a simple multiplication but I wanted to use more third party so I used money.js and hooked it up with a button and then as always test

Yay! Now normally. I’d stop here, but I’m an idiot who added a swapper in the UI so let’s stick to the original design and make it work. What I want to do is switch the values of the selected options and then converting the values. So this shouldn’t be hard

What’s going on… why is the currency code in the top disappearing? hummm I’m pretty sure the code is right. After a couple of debugging, I realized I did a stupid mistake of swapping the selected option with the input value and with that small fix we have a working converter!

You can check out the final result here.

I’d like to mention a list of the helpful resources I used to complete this project:

I wanted to share these resources, to show my work process, and who knows they might help some of you out.

So this was fun.

Until next time, Happy coding 🙂

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *