Revisiting a Nearly Successful Code Challenge

We all have them, code challenges that for some reason or another, slip through our fingers. Sometimes it’s lack of skill, sometimes it’s just rust and sometimes you have extraneous personal things happening that distract you. We try our hardest in the time given to come up with a solution but we fumble right at the 1 yard line.

Just yesterday I had a live Skype coding session and minutes ago I learned that I didn’t make it onto the next round. Instead of moping around the house like I usually do, I got the code back out and decided to give it another go. I wanted to look at it with fresh eyes again.

The goal was simple. Create a webpage with a header and two columns of text that are equal height but not equal width. Inside the columns would be different lengths of text. One would contain multiple paragraphs and the other would contain a single line. Then after that I would have to make a fetch request to get the paragraphs of text for the one column.

Knowing this in advance, I could’ve breezed right through it. However, seeing it for the first time on the spot with 30 minutes or less to complete the challenge? That didn’t yield the best result for me. Today, looking at it again just a few minutes ago, I was able to implement a solution to finish the whole thing up in less that 15 minutes.

Here’s what the initial page looks like:

In this image I have placeholder text on the left that will be replaced by our fetch request down the line. In case you’re interested, let’s take a look at my HTML code and my CSS to get this all like it is:

Here we see my HTML. To give you a basic run through of the guts of this code, we have import the CSS file at the top. Then in the body, I have the <div> that constructs the header with an <h1> inside that creates the placeholder header text. Below that I have the left side text box which is comprised of a <div> in a <div> with a <p> tag for the text. This is the text that will end up being replaced. I’ve also given my <p> tag an id so it’s easily grabbed by my later JavaScript code. And below that I have the right side column which is formatted pretty much the same as the one above it minus the id on the <p> tag. And at the very bottom I’m importing the JS file in a script tag.

Here is the CSS for that page. I gave the header a height and a background color of grey. Then I gave some padding to the text and center it on the header as well as adjust the font size.

Next we move onto the text boxes with an overall element that styles both of the boxes giving it padding, a background color, an outline and finally a height. Then I tweak each of the boxes individually moving one to the left and the other to the right. Adjusting the widths of each box and the margins is next. Finally, for a little flavor, I made the smaller line of text blue.

Finally, we had to move onto the fetch request to get the desired text for the left. I whipped up a quick JavaScript file that looks a little like this:

Alright, diving into this code, I have the necessary event listener at the top that contains all the rest of my JS code. Then I have a simple “hello” console log just so I could make sure that it was wired up correctly. Below that are my URL and document element variables that will come into play in my functions. At the top of the page I invoke my fetchIpsum function that is written directly beneath it. Basically, I’m making a fetch call to the dataURL variable and then turning the response into text. Then I pass it through the setText function. The setText function is first console logging my text so I can make sure that I’m getting what I intend to get. Then it’s using the ipsum variable to set the innerText of our <p> tag from back on the HTML file to the text that we just got from our fetch request.

Once that’s all done, the text on the page now looks like this:

Overall, this was a great review and definitely something that I’ll remember for future challenges. Like the HTML/CSS post I wrote last week, all of this stuff is like riding a bike. You might be wobbly if you’re out of practice, but it doesn’t take long to get up and running at full speed again.