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.js';
import React from 'react';
import ReactDOM from 'react-dom';

const title = "";

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

function displayFact(e) {
  const selectedAnimal = e.target.alt;
  const animalInfo = animals[selectedAnimal];
  const optionIndex = Math.floor(Math.random()*animalInfo.facts.length);

  const funFact = animalInfo.facts[optionIndex];
  document.getElementById('fact').innerHTML = funFact;
}

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}
    />
  )
}

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')
);

## 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.js';
	import React from 'react';
	import ReactDOM from 'react-dom';

	const title = "";

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

	function displayFact(e) {
	const selectedAnimal = e.target.alt;
	const animalInfo = animals[selectedAnimal];
	const optionIndex = Math.floor(Math.random()*animalInfo.facts.length);

	const funFact = animalInfo.facts[optionIndex];
	document.getElementById('fact').innerHTML = funFact;
	}

	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}
	/>
	)
	}

	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')
	);
	<!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>