JS 102: Making an infographic

I’m taking the Udacity Intermediate JavaScript Nanodegree course. This is my third Udacity course, and one thing I wish I’d done in previous lessons is journaling and documenting my thought process as I work on implementing the concepts I’ve learned!

In this project, I’ll be making an infographic using concepts around object-oriented JavaScript (objects, prototypes, mixins, etc.) using both Udacity-supplied data and user-input data.

Rubric elements to keep in mind:

• Create a click event to remove the form from the page
• Create a click event to add tiles to the page
• Pull in user data from the DOM
• At least 1 class/function for creating all necessary objects
• Three methods (or more) to compare data
• Bonus: validate form data
• Bonus: use JS for tile colors, rather than CSS

The human object will be compared to various dinosaur objects, which contain species, weight, height, diet, origin (“where”), era (“when”), and a random fact. I’d like to compare the humans height, weight, and a random fact, since that sounds like a fun prompt for someone visiting this tool. Species would have to be included by default, too.

In order, I think it makes sense to:

1. Start by creating the Dino Constructor, then create all the related dinosaur objects. (Check to make sure these all work.)
2. Create the human object using IIFEs for the data submitted via the form.
   1. But first, manually create the human object to make sure it works. Remember how to get data from a form in JavaScript.
   2. Then, capture data via the form.
   3. Finally, combine the two! use the form data to create the human objects.
3. Create the methods for comparing the human object data and dinosaur data. (Weight, height, and fact.)
4. Use DOM events to remove the form from the page upon submission and add tiles.

Where I got stuck

First, figuring out what to do with the Dinos object in the related JSON file. My instinct was to do some sort of Python-type import, which I kind of did, except CORS doesn’t make that possible 😭 Solution: saved the data from the JSON file directly into a variable, and then used the parse method to convert the data.

Second, figuring out how to apply the Dino constructor to all the items in dinosData. I was right to do a for each, but I got really frustrated figuring out how to apply the data from each dino key:value in a useful way. Solution: the spread operator, but it took me a while to get there.

Alright, I got stuck in other places but got so frustrated that I forgot to take notes along the way. So this is very much not a comprehensive list!

What I learned

.map()is way better than for! I have a much better understanding of this method now, even though I still struggle with the format and which level of the object I’m working with at times.

Creating a function to add elements to the DOM was probably the quickest way to speed up what I was doing. I definitely started adding everything manually. I know I struggle with abstractions in code, so it takes me a while before I realize what the repeat steps/actions actually are.

I have a better understanding of privacy and scope. Theoretically, I understand the scope of variables within JavaScript, but, in the moment, I tend to focus more on “does this work?” Once I get too far down that rabbit hole, I struggle to step back and see the big picture to revisit scope and how to change it in a way that is more in line with my goals.

The logic and syntax of ternaries make a lot of sense to me, for some unknown reason.

How to improve it

While I’m focusing on completing this course first, I’d like to revisit these projects later, so I can spend more time refining what I did. For this project, in particular, I’d like to:

• Refactor to group all the object data into a separate file
  • Likewise, make use of classes here, instead
• Add form validation
• Create an option to generate a new infographic

Resources that helped me

• Serializing form data with the vanilla JS FormData() object