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:
- Start by creating the Dino Constructor, then create all the related dinosaur objects. (Check to make sure these all work.)
- Create the human object using IIFEs for the data submitted via the form.
- Then, capture data via the form.
combine the two!use the form data to create the human objects.
- Create the methods for comparing the human object data and dinosaur data. (Weight, height, and fact.)
- 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.
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