codecademydev/animals.js Secret

## 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: {
    image: '/images/starfish.jpg',
    facts: ['Starfish can have up to 40 arms!', 'Starfish have no brain and no blood!', 'Starfish can regenerate their own arms!']
  }
};

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

function displayFact(e){
  console.log(e.target);
  console.log(animals[e.target.alt].facts);
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;
//console.log(document.getElementById("fact").innerHTML);
}

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

const images = [];
for(const animal in animals){
    images.push(<img
    src={animals[animal].image}
    className='animal'
    key={animal}
    alt={animal}
    aria-label={animal}
    role='button'
    onClick={displayFact}
     />)
}
const animalFacts = (
  <div>
  <h1>{title || 'Click an animal for a fun fact'}</h1>
  {showBackground && background}
  <div className='animals'>
  {images}

  <p id='fact'>

  </p>

  </div>

  </div>
);


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

## 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>
  </body>
</html>
	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: {
	image: '/images/starfish.jpg',
	facts: ['Starfish can have up to 40 arms!', 'Starfish have no brain and no blood!', 'Starfish can regenerate their own arms!']
	}
	};
	import { animals } from './animals';
	import React from 'react';
	import ReactDOM from 'react-dom';

	function displayFact(e){
	console.log(e.target);
	console.log(animals[e.target.alt].facts);
	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;
	//console.log(document.getElementById("fact").innerHTML);
	}

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

	const images = [];
	for(const animal in animals){
	images.push(<img
	src={animals[animal].image}
	className='animal'
	key={animal}
	alt={animal}
	aria-label={animal}
	role='button'
	onClick={displayFact}
	/>)
	}
	const animalFacts = (
	<div>
	<h1>{title \|\| 'Click an animal for a fun fact'}</h1>
	{showBackground && background}
	<div className='animals'>
	{images}

	<p id='fact'>

	</p>

	</div>

	</div>
	);


	ReactDOM.render(animalFacts, document.getElementById('root'));
	<!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>
	</body>
	</html>