Project - Animal Fun Facts

norby · October 15, 2020, 1:48pm

Hello,

I’m working on the project Animal Fun Facts I got stuck on the 8 task, I’m not sure about nesting it into an array. This is the task “Underneath {background} , create a <div> . Give it a className attribute and set it equal to 'animals' . Nest the array of images inside of this element.” And code can be found on this link

selectall · October 15, 2020, 2:45pm

Hello, you actually need to go back to Step 7 so you have the array. That step calls for you to create an array called images by iterating through the animals object with a for..in loop.

If you click the hint for that step, it gives an example of the syntax and idea behind it. Notice in the sample they provided, you’re pushing JSX to the array. So that step wants you to create all the <img ..attributes.. /> elements with attributes being the key, className, src, etc. etc. that they mention in that step.

Once you have that array, then you can move to step 8 and change animalFacts by putting the array you made into the div you already added like you would any other variable.

Let me know if you need more details and/or hints

adrwstn · October 16, 2020, 4:41am

I seem to be getting a blank page now, I assume I set up the for-in loop incorrectly ?

const images = [];
for (const images in animals) {
  images.push(
    (<img key={animal} className='animal' alt={animal} scr={animals[animal],image} aria-label={animal} role='button'/>)
  )
  };

notice anything that could be causing a blank page to render?

selectall · October 16, 2020, 5:06am

In your case, based on the snippet you provided, I suspect the whole page is blank because you’re getting a ReferenceError about animal so it stops the rest of the code from running. You could double-check this by looking at the console for the browser. Take a close look at the name of the const you’re creating in your for loop.

More Details

The rest of your code snippet is looking for animal, but your for (const images in animals) is making it use images for each iteration instead. You need to rename that.
Also, even if the rest of your code was set up to use it, images is also the name of the array you’re trying to save the JSX elements to, so it would end up causing issues too.

After you fix that issue, you’ll also need to take a closer look at scr={animals[animal],image}. There are a couple issues here.

More info if you need it

Should be src instead of scr
You need to access the image property of the object with a . not a ,

adrwstn · October 23, 2020, 11:17am

yupp, all of which you mentioned I fixed prior to and forgot to update (thank you)and I have the title and background showing as before; however, still no animal images

const animalFacts = (
  <div>
    <h1>{title}</h1>
    {background}
    <div className='animals'>
      {images}
    </div>
  </div>
);

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

I guess it must be how images is wrapped in animalFacts?

UPDATE: the for-in loop must go after const animalFacts , this makes sense since you can’t call on the array before it’s populated

rulesbyrosita · October 19, 2020, 3:00pm

Hi! My code is working fine.

I am at step 11, but I can’t get showBackground working. Can Someone help me? This is my code from the whole project:

import { animals } from './animals';
import React from 'react';
import ReactDOM from 'react-dom';

const showBackground = false;
const background = <img className='background' alt='ocean' src='/images/ocean.jpg' />;

const title = '';

function displayFact(e) {
const facts = animals[e.target.alt].facts;
const randomFactIndex = Math.floor(Math.random() * facts.length)
const fact = facts[randomFactIndex];
document.getElementById('fact').innerHTML = fact;
}

const images = [];
for (const animal in animals) {
  images.push(<img
    key={animal}
    className='animal'
    alt={animal}
    src={animals[animal].image}
    aria-label={animal}
    role='button' 
    onClick={displayFact} 
    />)
};

const animalFacts = (
  <div>
    <h1>{ title === '' ? 'Click an animal for a fun fact' : title }</h1>
    {(showBackground === true) && background}
    <img 
    className='background'
    alt='ocean'
    src='/images/ocean.jpg' />
    <div className='animals'>{images}</div>
    <p id='fact'></p>
  </div>
);

ReactDOM.render(animalFacts, document.getElementById('root'))

https://www.codecademy.com/paths/web-development/tracks/front-end-applications-with-react/modules/react-101-jsx-u/projects/js-react-animal-fun-facts
Thanks in advance!

dkruythoff · October 19, 2020, 2:54pm

I don’t know the assignment, but I don’t see anything setting showBackground to true…

rulesbyrosita · October 19, 2020, 3:03pm

Thanks!

I edited my post with a link to the assignment.

I set showBackground to false, so the background shouldn’t show up. There is some code missing. And I don’t know what code to write.

wayneyou1 · October 24, 2020, 1:30am

const compose = (

{animalFacts} {showBackground && background}

{images}

);

wayneyou1 · October 24, 2020, 1:31am

gist.github.com

https://gist.github.com/codecademydev/c3f57c4357bdd7045687f6fee45ac861

animals.js

export const animals = {
  dolphin: {
    image: '/images/dolphin.jpg',
    facts: ['Dolphins have been shown to give distinct names to each other!', 'Dolphins are known to display their own culture!', 'Dolphins have two stomachs!']
  },
  lobster: {
    image: '/images/lobster.jpg',
    facts: ['Lobsters taste with their legs!', 'Lobsters chew with their stomachs!', 'Lobsters can live as long as 100 years.']
  },
  starfish: {

This file has been truncated. show original

app.js

import { animals } from './animals';
import React from 'react';
import ReactDOM from 'react-dom';

const title = '';
const showBackground = true;
const background = (
  <img className="background" alt="ocean" src="/images/ocean.jpg" />
);

This file has been truncated. show original

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <div id="root"></div>
    <script src="https://content.codecademy.com/courses/React/react-course-bundle.min.js"></script>
	<script src="/app.compiled.js"></script>

This file has been truncated. show original

There are more than three files. show original

d4nguerrero · November 2, 2020, 11:47pm

rulesbyrosita:

const animalFacts = (
  <div>
    <h1>{ title === '' ? 'Click an animal for a fun fact' : title }</h1>
    {(showBackground === true) && background}
    <img 
    className='background'
    alt='ocean'
    src='/images/ocean.jpg' />
    <div className='animals'>{images}</div>
    <p id='fact'></p>
  </div>
);

It does work however, you added background image twice.


const animalFacts = (
  <div>
    <h1>{ title === '' ? 'Click an animal for a fun fact' : title }</h1>
    {(showBackground === true) && background}
    {/*
    This shouldn't be here:
      <img 
     className='background'
      alt='ocean'
    src='/images/ocean.jpg' />
    */}
    <div className='animals'>{images}</div>
    <p id='fact'></p>
  </div>
);

rulesbyrosita · November 3, 2020, 1:54pm

d4nguerrero:

const animalFacts = (
  <div>
    <h1>{ title === '' ? 'Click an animal for a fun fact' : title }</h1>
    {(showBackground === true) && background}
    {/*
    This shouldn't be here:
      <img 
     className='background'
      alt='ocean'
    src='/images/ocean.jpg' />
    */}
    <div className='animals'>{images}</div>
    <p id='fact'></p>
  </div>
);

Thank you! It worked You are my hero of the day!

ola-cyber · November 4, 2020, 3:00pm

Hello everyone, i am working on the project and im stuck at step 10, my code isnt displaying the fun fact if i click on the the animals. Please can someone walk me through it if i am making any mistakes. Here’s my code.

import { animals } from './animals';
import React from 'react';
import ReactDOM from 'react-dom';

const title = '';

const background = (
  <img 
  className='background'
  alt='ocean'
  src='/images/ocean.jpg' />
);

const images = [];
for (const animal in animals) {
  images.push(<img 
  key={animal} 
  className='animal' 
  alt={animal} 
  src={animals[animal].image} 
  aria-label={animal} 
  role='button' 
  onClick={displayFact} />
  )
};

const displayFact = e => {
  const facts = animals[e.target.alt].facts;
  const randomFactIndex = Math.floor(Math.random() * facts.length)
  const selectedfact = facts[randomFactIndex];
  document.getElementById('fact').innerHTML = selectedfact;
};

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


ReactDOM.render(animalFacts, document.getElementById('root'));

wayneyou1 · November 4, 2020, 3:19pm

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

const title = ‘’;
let images = ;
const showBackground = true;

for(let animal in animals) {
images.push( {animal} );
}

function displayFact(e) {
let randomNum = Math.floor(Math.random() * animals[e.target.alt].facts.length);

document.getElementById(‘fact’).innerHTML = animals[e.target.alt].facts[randomNum];

}

const background = (

);
const animalFacts = (

{title ? title : 'Click an animal for fun fact'}

{showBackground && background}

{images}

);

ReactDOM.render(animalFacts, document.getElementById(‘root’));

wayneyou1 · November 4, 2020, 3:20pm

gist.github.com

https://gist.github.com/codecademydev/5c183edccb5caef6d89f0627c72159ed

animals.js

export const animals = {
  dolphin: {
    image: '/images/dolphin.jpg',
    facts: ['Dolphins have been shown to give distinct names to each other!', 'Dolphins are known to display their own culture!', 'Dolphins have two stomachs!']
  },
  lobster: {
    image: '/images/lobster.jpg',
    facts: ['Lobsters taste with their legs!', 'Lobsters chew with their stomachs!', 'Lobsters can live as long as 100 years.']
  },
  starfish: {

This file has been truncated. show original

app.js

import { animals } from './animals';
import React from 'react';
import ReactDOM from 'react-dom';

const title = '';
let images = [];
const showBackground = true;

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

This file has been truncated. show original

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <div id="root"></div>
    <script src="https://content.codecademy.com/courses/React/react-course-bundle.min.js"></script>
	<script src="/app.compiled.js"></script>

This file has been truncated. show original

haitaogao · November 9, 2020, 5:58am

Hello, I get stuck in step 8, the whole page becomes blank, can not figure out the error, everything goes well in step 6, can anyone help me please?

import { animals } from './animals';
import React from 'react';
import ReactDOM from 'react-dom';

const title = '';
const background = (
  <img 
  className="background"
  alt='ocean' 
  src='/images/ocean.jpg' 
  />
  );

const images = [];
for (const animal in animals) {
  images.push(
    (<img
      key={animal}
      className='animal'
      alt={animal}
      src={animals[animal].image}
      ariaLabel={animal}
      role='button'
    />)
  )
}

const images = [];
for (const animal in animals) {
  images.push(
    <img
      key={animal}
      className='animal'
      alt={animal}
      src={animals[animal].image}
      ariaLabel={animal}
      role='button'
    />
  )
}

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

ReactDOM.render(animalFacts, document.getElementById('root'));

haitaogao · November 9, 2020, 6:12am

seems works again, do not know why the blank page comes out just now , quite weird

haitaogao · November 9, 2020, 7:31am

get stuck again, do not know why the page become blank again, this time no magical happens. could anyone help me figure out what wrong with the coding please? thanks

import { animals } from './animals';
import React from 'react';
import ReactDOM from 'react-dom';

const title = '';
const background = (
  <img 
  className="background"
  alt='ocean' 
  src='/images/ocean.jpg' 
  />
  );

const images = [];
for (const animal in animals) {
  images.push(
    (<img
      key={animal}
      className='animal'
      alt={animal}
      src={animals[animal].image}
      ariaLabel={animal}
      role='button'
      onClick={displayFact}
    />)
  )
}

function displayFact(e) = {
  const selectedAnimal = e.target.alt;
  const animalInfo = animals[selectedAnimal];
  const optionIndex = Math.floor(Math.random() * selectedAnimal.facts.length);
  const funFact = animalInfo.facts[optionIndex]
  document.getElementById('fact').innerHTML = funFact;
};
  
const animalFacts = (
  <div>
    <h1>
      {title === "" ? "Click an animal for a fun fact" : title}
     </h1>
    {background}
    <p id='fact'></p>
    <div className='animals'>
      {images}
    </div>
  </div>
  );



ReactDOM.render(animalFacts, document.getElementById('root'));

megarockstar95901 · December 12, 2020, 5:27am

Your trying to get the length of the wrong object, maybe that will help

const optionIndex = Math.floor(Math.random() * selectedAnimal.facts.length);

Do you really want selecetedAnimals?

rogeliozavala414 · January 30, 2021, 10:09pm

Not sure if you still need help but I see you have three small issues to fix.

First, change the ariaLabel attribute name to => aria-label

Secondly, just like megarockstar95901 mentioned your trying to access the wrong object’s length. selectedAnimal object doesn’t exist you need the access the animals object on line one, which you already have in the second line of your displayFact function, so all you need to do is swap the selectedAnimal variable with the animalInfo variable inside of the math.Floor() method.

Lastly, your displayFact function has an = sign right after the closing parentheses causing the app to crash and not render anything to the window.

These challenges without a console tend to be quite frustrating because you can’t see these little errors causing your app to crash. Hopfully this helped you out in anyway.