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

let title = '';
if (title === '') {
  title = 'Click an animal for a fun fact';
  }

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

const images = [];

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

function displayFact(event) {
  let animal = animals[event.target.alt];
  let factNo = Math.floor(Math.random() * animal.facts.length);
  document.getElementById('fact').innerHTML = animal.facts[factNo];
}

const animalFacts = (
  <div>
  <h1>{title}</h1>
  {background}
  <div className='animals'>{images}</div>
  <p id='fact'></p>
  </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';

	let title = '';
	if (title === '') {
	title = 'Click an animal for a fun fact';
	}

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

	const images = [];

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

	function displayFact(event) {
	let animal = animals[event.target.alt];
	let factNo = Math.floor(Math.random() * animal.facts.length);
	document.getElementById('fact').innerHTML = animal.facts[factNo];
	}

	const animalFacts = (
	<div>
	<h1>{title}</h1>
	{background}
	<div className='animals'>{images}</div>
	<p id='fact'></p>
	</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>