This article was originally posted on my blog on May 27, 2019.
As many of you know, I have been applying for a job in web development for a few weeks and I thought it would be a good idea to share some of the coding challenges I’ve encountered. (Side note, if you know of or have any available web developer positions I would greatly appreciate if you’d share them with me either here in the comments or on Twitter 😀 )
Not only that but I’ll share the ways I went about solving these challenges. Granted, there are many ways to solve these challenges but these are the ways I went about it. If you have different ways that’s awesome and I’d love for you to share them with me!
I will not share any identifiable information about the companies or specifics on the interview process of said company to preserve process integrity.
Alright, let’s get to it then.
This is a challenge I was given recently that I felt good about solving:
Task: Return a basic styled list of posts from an endpoint in reverse chronological order
To protect the company and their information, I will not share the URL from which I returned the information but instead will have a generic link from JSONPlaceholder (a great, free, open source API for developers when you need to get some generic outside data) in the code below.
Here’s the HTML I started with so we have something to display our results in:
The <ul> tag has an id so we can style it later in the process.
Fetching Data From the Endpoint
I use let for the output variable and set it to null because we will change it’s value later in the code. The list variable is declared with const because it’s value will not be changing.
In the above example, we’re declaring an arrow function named getData wrapped in a try…catch block (This is a cleaner/easier to use/read syntax that uses tries some code and catches errors if they happen — you’ll also see the catch portion below). Because we’re getting data asynchronously we also need to make use of async/await to fetch data. This is the method I’m most comfortable with but I know there are many other ways to get data from an endpoint so feel free to share yours 😀
As the very last line in the section, we console.log our data that we get back from the API endpoint just to make sure we’re getting everything we wanted. We have an array full of objects. You’ll also notice that the key published_at holds our dates and they are not in any type of order. Their format is also not a simple four digit number representing the year which would make it easy to filter them into reverse chronological order. We’ll need to take care of that.
Manipulating Our Data
Here we declare the variable dataCopy which points to the dataJSON variable mutated into an array via the spread operator(…). Essentially, we are copying our returned JSON data so we aren’t manipulating the original (bad practice) while making it into an array so that we can iterate over it.
After, we sort the array. Sort is an extremely useful array method that will put our array indices into the order of our choosing based on the function we pass into sort.
Displaying the Fruits of Our Labor
Remember that output variable we set to null at the very top of our program? Well now is it’s time to shine!
So, there’s a few things going on here. First, we’re setting our output variable to a new value by mapping over our dataCopy variable using the map method. This method returns a new array with the results of calling the provided function once for each index. The item parameter represents our objects inside of our array that was returned from the endpoint and thus has access to all of their properties such as title and published_at.
We return two list elements with a <span> inside each one (for styling purposes), as well as a string for the Title and Date Published headings. Inside of those, we have our variables that use template literals to set the title and the date for each post.
Then, we set our list variable’s innerHTML equal to that of our output variable.
Finally, we have the closing bracket and error handling of our try…catch block as well as our function call:
Here is what our full code body looks like now:
And here is our basic CSS styling:
And here is the result of our work with it’s very basic styling:
As you can see, we accomplished what we set out to do and in fact the list is in reverse chronological order. Yay!
I hope you’ve enjoyed this walk through of my thought process and of how I solved this challenge. Granted, there are many ways of completing this so feel free to share yours with me! I’m excited to keep this series going and will post another after I’ve gone through another challenge!
While you’re here why not sign up for my Newsletter – you can do that at the top right of this page. I promise I’ll never spam your inbox and your information will not be shared with anyone/site. I like to occasionally send out interesting resources I find, articles about web development, and a list of my newest posts.
Have an awesome day filled with love, joy, and coding!