Bored? Try my first app!

Introduction

Here we are at the end of phase 1 of the Flatiron School Full-Stack Development bootcamp. It was a rocky start with the holiday break followed by two weeks of daycare closures due to covid. But I've finally made it to the end of phase 1 where the main focus was on HTML, CSS and a lot of Javascript.

Requirements

The basic requirements of the project were as follows:

1. An HTML/CSS/JS frontend that accesses data, asynchronously, from an API of our choosing
2. Must be a single-page app
3. Must contain at least 3 separate event listeners (e.g. content load completion, mouse click, etc)
4. Some user interactivity
5. Follow good coding practices

This is borrrinnngg

Since my 4-year-old has been going around the house saying "This is borrringgg" I thought it was fitting to utilize the API from boredapi.com. This API will return a random activity from its database based on the criteria sent to it via fetch from JavaScript.

The app allows the user to make selections in regards to activity type (e.g. educational, social, recreational, etc.), the number of people to participate in the activity and if the activity needs to be free. A couple of functions packages up these selections and sends it to the API via JavaScripts Fetch "Get" command. If an activity is found with the users search criteria, it is returned to us within a JSON-formatted message.

The app then parses this message and specifically looks at three key-value pairs within the message:

• Error - An error is returned if the API cannot find an activity with the given search criteria. In this case, an alert message is shown instructing the user to change their search criteria.
• Activity - This gives us the activity suggestion returned by the API (e.g. "Organize your basement".... no thanks). The activity string is displayed prominently below the Submit button.
• URL - Most activity suggestions don't include a URL. However, if one is included, the displayed activity string contains the provided URL, allowing the user easy access to the related article.

If the user repeatedly clicks the Submit button, a history of the 5 most recent activity ideas is displayed underneath the current activity idea. A Clear button is provided with the history list to tidy things up...and to get me my third event listener 😉.

DOM Manilpulation

So far, one of my favorite parts about web development, specifically with JavaScript, is DOM manipulation. How cool is it that you can basically create an entire web page dynamically with minimal static HTML? Well, I think it's pretty cool. I made sure to use this approach at least once in this app.

The Clear button is an example of DOM manipulation. When the app first loads, the Clear button doesn't even exist in the HTML yet. However, once the history list starts to populate, I create a brand new button element. The following is an example of the code I used to accomplish this.

Arrow Functions

Another favorite of mine is the arrow function. I love the simplicity and efficiency of an arrow function.

The Arrow Function is simple in that it’s easy to read. The arrow literally shows the argument of the function going into the body of the function.

It’s efficient because it doesn’t waste as much space as a normal function. You can literally fit an entire function, arguments, body and all, on one line of code!

Wrapping up

It’s been a lot fun putting all of my new skills to use and creating something I can be proud of. Although simple in nature and execution, the app is a culmination of the skills I’ve accumulated in just a couple of months. There are 4 phases of the bootcamp left. I can’t wait to see what I can create at the end of the next phase and the phase after that…

Please feel free to check it out here and provide feedback:
https://nicmortelliti.github.io/Bored/

The project can be cloned here:
https://github.com/NicMortelliti/Bored