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 :D )
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.
The Challenge
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
Alright, let's dig into the JavaScript portion of this challenge. First, I like to set my output and display variables:
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 Promises under the hood - 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 :D
Once we've declared our data variable, the next thing is to set a variable to turn the returned data to a JSON object so we can get it in a usable form. We do that with the .json() method. We're awaiting the data as well because if we were to omit the await keyword, JavaScript would try to turn the data variable into JSON but the data would not be there yet because it's coming from an asynchronous API.
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.
Typically, we might want to sort the data based on value (largest to smallest) so we subtract the parameter a from parameter b. But because we need to display our results in reverse chronological order I decided to produce a new date (accomplished with the new operator and the JavaScript built in method Date that creates a new platform independent formatted instance of a date. Now, because a and b represent our objects sitting inside our array indices, we can access the key/value pairs held within said objects. So, we subtract b.published_at from a.published_at and this should give us our dates in reverse chronological order.
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:
Final Code
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!
This post was originally posted on my blog. While you're there why not sign up for my monthly Newsletter – 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.
Also, I cross post most of my articles on Medium so you can find my work there as well!
Have an awesome day filled with love, joy, and coding!
Top comments (0)