Animal Fun Facts

Projects Skill Path Projects
1

I saw that there is not a solution video or solution posted for animal fun facts, and I struggled with a few parts in the project before finally finding the solution, so I thought I would post what I have in case anyone needs help with it. The comments explain the general process going on in each of the parts. Hope this helps someone!

3 Likes
2

Here is the solution mentioned above. I accidentally clicked post without actually putting the solution in yet:

import { animals } from ‘./animals’;
import React from “react”;
import ReactDOM from “react-dom”;

//set default title and background
const title = “”;
const background = ocean

//determines if background will be shown or not
const showBackground = true;

1 Like
3

Part 2 (it only lets me post a certain amount at a time).

//loops through animals array to create an img with attributes for each animal. Adds these img items to animalArr list.
let animalArr = ;
for (let animal in animals){
let animalObj = {animal}
animalArr.push(animalObj);
}

1 Like
4

//event handler for onClick of animal image buttons. Makes fact pop up when clicked.
function displayFact(e){
let facts = animals[e.target.alt].facts;
let rand = Math.floor(Math.random() * facts.length)
let fact = animals[e.target.alt].facts[rand];
document.getElementById(“fact”).innerHTML = fact;
}

//stores the html that will be rendered.
const animalFacts = (

{title == "" ? "Click an animal for a fun fact!" : title}

{/*This determines if the background will show up or not based on if showBackground is set to true or false*/} {showBackground && background}
{animalArr}
)

ReactDOM.render(animalFacts, document.getElementById(“root”));

5

Tera, thanks for posting this but I can’t get any animals to render even copying your code exactly from part 2… I can’t see what would be missing?

6

got is (smh)…syntax error. Thanks for posting this though it helped!

8

Thank you muchly! i think [e.target.alt] is really messing with my mind. Gunna read a bunch of .target documenten now.

10

Hey, Tera! when I type out the syntax of the code you posted, it breaks everything. It looks like I’m not seeing certain characters in your post as well. The following is the code I have put in the app.js:

let animalArr = [];
for (let animal in animals) {
  let animalObj={animal}
  animalArr.push(animalObj);
}

I’m also putting it in to the animalFacts variable as follows:

const animalFacts = (
  <div>
    <h1>
    { title === '' ? 'Click an animal for a fun fact' : title }
    </h1>
    { background }
    <div className="animals">
    {animalArr}
    </div>
  </div>
);

Would you mind taking a look at this and see if my syntax is indeed wrong or if this should work?

Many thanks!

Edit: Figured it out.

For anyone else who struggled with this the following code is the correct way:

let animalArr = [];
for (let animal in animals) {
  let animalObj=<img key={animal} className='animal' alt={animal} src={animals[animal].image} aria-label={animal} role='button' />;
  animalArr.push(animalObj);
};
11

the instructions to this project were absolutely abysmal and completely took away from the actual learning! they need to advise WHERE exactly to create the logic (not show, just direct) for complete novices- it was a trial and error situation.

3 Likes
12

Good point here, although a bit harsh, for me the previous project wonderlust was just like this, you read everything, do all the lessons, and then you can’t even finish the fist point of it as the website they recommended is very poor!