Animal fun facts -> correct official code please

Web Development Full-Stack
1

Is there a way to get the official correct code for this exercise (is there a CodeCademy employee listening?).

I prefer to not have to waste my time looking through other people’s solutions, trying them out to find they don’t work for me (because my code may be slightly different). I prefer to follow CC’s leads to increase consistency in solutions and to speed up my progress.

Please CodeCademy contact me and supply with the answer (the correct code) to the project so I can check and correct mistakes and move on with my course. The hours I spend looking through customers’ answers is very frustrating, unnecessary and severaly reduces the fun of learning to code

Cheers, Jaap

2 Likes
2

I’ll tag a couple of CC employees, but what is correct official code? There are always many ways to complete a project. I don’t work for Codecademy, so I can’t speak to whether or not you will be provided with what you’re asking for, but if you’d like to post your code, along with a description of what is happening that doesn’t match what you are wanting and/or errors that you are receiving, someone will likely be able to offer assistance. A link to the exercise would helpful as well.

Anyhow, @alyssavigil & @lilybird, any advice for @design5370485087?

2 Likes
3

Thanks Midlindner, with official code I refer to the code CodeCademy uses for the project. This could be the code used in the supporting videos which that had in the other lessons but not this one. I prefer the ‘official code’ because that should be consistent with what CodeCademy teaches you. In the students codes I’ve sometimes come across things I couldn’t find in previous lessons confusing me more.

1 Like
4

Hi @design5370485087. I just reached out to the authors of this course to find out when the solution code will become available. They will be uploading the project walkthrough video sometime this week or next. Once they do that, I can update you here.

2 Likes
5

Thanks, I’d appreciate that.

Cheers,

Jaap

6

Good news! @design5370485087 @midlindner We just added the project walkthrough video for this project. That should answer your questions about ideal code: https://www.codecademy.com/courses/react-101/projects/js-react-animal-fun-facts

2 Likes
7

Hello, I want to say that the solution is not available again, walkthrough disappeared again

8

Do you need help with it? If you have any questions, I can help.

9

I need help with the 9th and 10th task

10

Thank you very much, I just checked again and they uploaded a video walk through so now i can finally see what’s wrong with my code))))

11 
Task 9:

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



Task 10: 

const animalFacts = (<div><h1>{title === '' ? 'Click an animal for a fun fact!': title}</h1>

<p id='fact'></p>

{background}

<div className = 'animals'>{images}</div>

</div>);

I hope that helps!

12

I am happy that you already got the help you needed! :slight_smile:

13

import { animals } from ‘./animals’;

import React from ‘react’;

import { createRoot } from ‘react-dom/client’;

const container = document.getElementById(‘root’);

const root = createRoot(container);

const title = ‘’;

const animalFacts = (

{title === '' ? ‘Click an animal for a fun fact’ : title }

;

);

root.render(animalFacts);

After rendering this nothing shows up in output. Please help I am stuck here

14

Sorry, I just saw this post. Did you figure it out by now?

16

I want to understand this piece of code too

 const index = math.floor(math.random() * animals[animal].facts.length);
  const funFact= animals[animal].facts[index];
17

So basically there are different fun facts stored at facts. So we generate a random number and assign it to index. And then we use that index to get the fact stored at that index of the array. Does that make sense?

18

const container = document.getElementById(‘root’);

This line is incorrect ^.

It should be:

const container = document.getElementById(‘app’);

19

Please help, animals are not displaying, I cant understand what i am doing wrong.


import { animals } from './animals';

import React from 'react';
import { createRoot } from 'react-dom/client';

const container = document.getElementById('app');

const root = createRoot(container);

const title = '';

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

const images = [];

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

  

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

root.render(animalFacts);
20

To preserve code formatting in forum posts, see: [How to] Format code in posts

One noticeable issue is that you have used the colon : for the attributes and values of the img element.
Instead of colon, it should be = e.g.

// Invalid
<img src:"..."/>

// Valid
<img src="..."/>
21

Thank you, now it looks like formatted