A project to practice using asynchronous JavaScript
The assignment was to use a fetch call and a few event listeners to make a basic web app. I decided to use the color API in order to fetch some info about a color that was selected while using the app.
The idea here is to use a basic HTML input type of color and get back some details about the color selected like its value in various formats (CMYK, HEX, RGB) and also some complimentary colors that might work with your selected color on whatever project you are working on.
There is also a copy button next to the complimentary colors that can be used to copy the value to the clip board and possibly to your code.
This was fun to build and tested my newbie coding skills to the max. The fetch went pretty smooth, I got the DOM updated fairly easily. The big headaches for me proved to be bootstrap and the event listeners on the copy button.
I had never used bootstrap before but began to get the hang of it fairly quickly. At a first glance it makes the HTML seem a little busy but I understand it does so much to clean up your CSS. As a matter of fact I did not need dedicated CSS page to build this simple little tool; in hindsight bootstrap is pretty cool to work with (at times....)
Getting the event listeners for the copy button was super tricky. I discovered that a loop could add the event listener to each button that I was creating when I was rendering them in the DOM. Then the problem hit and
I realized what a double edged sword this whole asynchronous JavaScript really was
So to make a long story short I needed to WAIT for my fetch call to complete and render the page BEFORE my query selector could grab the copyBTN class that the inner HTML was creating. Writing it now after the fact, it seems like such an obvious and simple solution, good ole Async Await to the rescue on this one.
I think the biggest take away from this little starter project is time management and realizing it is okay to tweak things along the way. As I am writing this the fact that innerHTML is being used to render part of the page means that more work is needed. While this feels like unfinished business in a way it also sets up my next little victory on my long journey to Web Development greatness.
Top comments (0)