Animal Fun Facts Blank Screen

When even running a basic test for this project I can see only a blank screen and the following message when trying to inspect to determine the problem ‘Failed to load resource: net::ERR_BLOCKED_BY_CLIENT’.

Hello, and welcome to the forums!

When I turn on my ad-blocking browser extension, I see that message in the console too, but it doesn’t impact the project. You can turn off any extensions that might be interfering with the site for peace of mind, though messages like that can usually be ignored.

Most likely there is a problem in the code that is causing the blank screen. You can post the code here if you’d like another set of eyes on it.

Be sure to use this option if you paste it in the forum:
image

Alternatively, you can produce a sharable link by clicking the Share Code button in the learning environment
image

Hi,

It appears to have been a random technical issue as I pasted my code back in after a break and everything displayed correctly. However, the issue wasn’t helped by the exercise having really vague instructions and unhelpful/partially displayed hints, meaning its difficult to tell whether the code is the issue or something else, which is unusual as all other projects have been clear. I’ve managed to get to the final stage now, but the final instruction is incredibly unclear considering its something that hasn’t been covered properly prior to this.

Code below:

import { animals } from ‘./animals’;

import React from ‘react’;

import ReactDOM from ‘react-dom’;

const title = ‘’;

const background = Ocean

let images = ;

for(const animal in animals){

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

}

const displayFact = e =>{

let rand = Math.floor(Math.random()*e.facts.length);

let fact= e.target.all.facts[rand];

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

}

const animalFacts = (

<h1>{title === '' ? 'Click an Animal For a Fun Fact' : title}</h1>

{background}

<div className = 'animals'>

{images}

);

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

Please use one of the formatting options I mentioned for your code. Otherwise it’s very difficult to read when the forum reformats it