Animal Fun Facts Project - no output on screen, when running program

Get Help React.js
#1

Hi,

I have so far fulfilled the Animal Fun Facts project, but unfortunately not a single text or image is showed on screen. I have being going over and over to try to discover any mistake I have made, but cannot figure it out. After every task I pressed on save. Task 3 is the first assignment whereas a header should appear on screen, nope. I just continued to finish the project with no result on screen.

Could somebody please guide me what I need to do in order to get the project on screen. See please my code below:

import { animals } from ‘./animals’;

ReactDOM.render()

//1

import React from ‘react’;

import ReactDOM from ‘react-dom’;

//2 h1 title not on screen

const title= “”;

const showBackground = false

const images = ;

const animalFacts= (

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

{showBackground && background}

{images}
<p id= 'fact'

);

const background = <img className=‘background’ alt= ‘ocean’ src= ‘/images/ocean.jpg’

/>

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}

/>

)

};

function displayFact(e) {

const fact = [e.target.alt].facts;

const randomNumber = Math.floor(Math.random) * fact.length;

const facts = fact(RandomNum);

document.getElementById(‘fact’).innerHTML = facts;

}

);

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

Thank you so much!:slight_smile:

Kind regards, Yasmine

You must select a tag to post in this category. Please find the tag relating to the section of the course you are on

When you ask a question, don’t forget to include a link to the exercise or project you’re dealing with!

If you want to have the best chances of getting a useful answer quickly, make sure you follow our guidelines about how to ask a good question. That way you’ll be helping everyone – helping people to answer your question and helping others who are stuck to find the question and answer! :slight_smile:

1 Like
#2

have you found the solution ? because I have the same problem. Nothing appears on screen.

#3

for anyone prepared to help. here is the link => js-react-animal-fun-facts

#4

SOLUTION FOUND!:
hello,

Main Solution

the project is to be done on your own computer using Node.js.
So if you want to solve it in the browser you must:
1. follow the instructions here=>add-react-to-a-website
You must edit your code accordingly. Either using native browser support using the traditional React.createElement syntax or the widely used JSX syntax by add a script tag that links to babel.

2. Comment out the custom script tag that codeacademy put in the head tag and change the app.compiled.js to app.js with attribute type="module".

voila! everything solved :sweat_smile:

Minor Solution

this is wrong syntax. For JSX syntax the attribute is specified as attribute=value not attribute:value.

this is for the benefit of anyone looking at the code again. :grinning:

1 Like
Lesrn Reacy JSX Animal Fun Facts - What is wrong wit my code? Every time I save it, nothing loads on the webpage
#5

Ha Gordon,

No bother. GREAT you got the solution and post it! I have to dive in it again. Thank you so much! :wink: By now I finished the career path Front-end Engineer. And yes for sure attribute should have = instead of :
. I don’t know how I got this. Good you notice.

Im now working in Codecademy on " Create a Back-End App with JavaScript ". Did you al get it on your own computer using Node.js?

1 Like
#6

Using the alternative solution I proposed earlier, I was able to complete everything in the browser on the codeacademy platform so I didn’t use Node.js. but it worked perfectly.

You can try it Node.js and tell us the outcome.

you can get access to my code here => my code

Live working site on Github pages

1 Like