What a crazy adventure this has been so far. From starting out strong in early 2022, to being bogged down by the whole family getting Covid, to getting a second breath and diving right back into everything again once the flex pilot program started, phase 1 has definitely been interesting. Like many, I was entirely lost when I started, and a lot of preconceived notions about what learning how to code would be like went out of the window. There was definitely more frustration, feeling lost, and questioning my abilities than I suspected there would be. Especially after having to take a hiatus for a few months due to family illness, diving back into learning JavaScript was the direct opposite of easy and painless. But in the end, everything fell right back into place, and I actually managed to learn a thing or two. I think there’s a good reason for that.
I’ve always loved building things. When I was 20 years old, I built an electric cello entirely by hand, with zero previous knowledge of how to build an instrument, and, quite frankly, having never even touched a cello before in my life. My first job out of college was framing new houses. After doing that for a few years and gaining a good deal of carpentry skills, my next foray was building custom furniture. After building every piece of furniture in my house out of solid lumber (ask a few of my friends how fun it is to help me move), I decided to turn that hobby into a business, which I still do on the side to this day.
I always had an inkling that my affinity for woodworking would translate to an affinity for coding. Suspicions confirmed - I get the same exact satisfying feeling out of writing code. The feeling of joy, satisfaction, and accomplishment I get from making a perfect dovetail joint, or putting the last finishing touch of stain on a desk that I designed and built entirely from scratch, is the exact same feeling I get when I write good code. When you’ve been sitting there, wrangling a fetch request or trying to figure out how to do some DOM manipulation to get the data that you need into your .js file, and you hit the refresh button on your browser and everything finally works exactly how you want it to, gives me the same exact feeling of euphoria and pride.
This project was by no means easy, and I could not have done it without the help of my classmates and a few good friends. But in the end, I feel as if I have leveled up from being a level 1 character.
So, on to it. The project, plain and simple, is a currency conversion app. You choose your base currency (though, at the time of this writing, the base currency is set to USD. The next time I work on this project, I will address that issue along with a few others), put in an amount of it, and choose another currency to convert it to. I used the Exchangerate-API (https://www.exchangerate-api.com/docs/overview) to get all of my conversion data. Their formatting was great, and after I signed up for an account, they even reached out to me personally to ask if I had any questions or improvement suggestions.
Here’s the code I used for my fetch request. Using Object, I was able to take all of the key value pairs, and map them so that both the name and the rate could be grabbed individually:
Unpacking the data and getting it to show up on the DOM was a more complicated process. For starters, I needed all of the currencies to show up on a dropdown list. So first thing is first, I had to make the dropdown list itself. I intentionally left it blank in my HTML, so I could populate it in the DOM:
Next, I had to get all of the data from the API and make it show up in the DOM. I did this by creating a function to get all of that data:
After that, I had to build the conversion itself. In this case, I just took the value of the rate (that we are going to exchange the currency to), and the value of the base rate (which is for now set to USD), and multiplied the two together.
I also wanted to make a conversion history section. I had to make an unordered list inside of a list inside of a div. The reasoning behind this was pretty simple. Beforehand, I was having each individual conversion show up as a p. This was fine both in terms of function and style, but I was a bit stumped as to how to then clear the history. So instead, I opted to put all of the information inside of its own div, and just clear the div. So in the clearHistory function, we just take the historyElement div and remove it. After that, I just needed to make a button in the HTML file to clear everything. :
Top comments (0)