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.compiled.js
(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
var animals = exports.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!']
  }
};

},{}],2:[function(require,module,exports){
'use strict';

var _animals = require('./animals');

},{"./animals":1}]},{},[2]);

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

const title = ''

const background = (
  <img
  className={background}
  alt={ocean}
  src={/images/ocean.jpg}
 />)

const animalFacts = {
  <hi> {title} === '' ? 'Click an animal for a fun fact' : {title}</h1>
  <div>{background}</div>
}

ReactDOM
  .render(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>

## styles.css
div {
	display: flex;
	align-items: center;
	flex-direction: column;
}

.background {
	position: absolute;
	margin-top: 80px;
	width: 95%;
	z-index: 1
}

#fact {
	display: flex;
	justify-content: center;
  position: fixed;
	margin-top: 100px;
	width: 80%;
	font-size: 5vw;
	z-index: 2;
}

.animals {
	display: flex;
	flex-direction: row;
	position: fixed;
	width: 90%;
	margin-top: 240px;
	z-index: 2
}

.animal {
	width: 33.3%;
}

@media only screen and (max-width: 670px) {
	.animals {
		margin-top: 180px;
	}

  h1 {
    font-size: 24px;
  }
}

@media only screen and (max-width: 390px) {
	.animals {
		margin-top: 150px;
	}
}

@media only screen and (max-width: 300px) {
	.animals {
		margin-top: 130px;
	}
}

@media only screen and (max-width: 200px) {
	.animals {
		margin-top: 120px;
	}
}
	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!']
	}
	};
	(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n\|\|r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
	'use strict';

	Object.defineProperty(exports, "__esModule", {
	value: true
	});
	var animals = exports.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!']
	}
	};

	},{}],2:[function(require,module,exports){
	'use strict';

	var _animals = require('./animals');

	},{"./animals":1}]},{},[2]);
	import { animals } from './animals';
	import React from 'react';
	import ReactDOM from 'react-dom';

	const title = ''

	const background = (
	<img
	className={background}
	alt={ocean}
	src={/images/ocean.jpg}
	/>)

	const animalFacts = {
	<hi> {title} === '' ? 'Click an animal for a fun fact' : {title}</h1>
	<div>{background}</div>
	}

	ReactDOM
	.render(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>
	div {
	display: flex;
	align-items: center;
	flex-direction: column;
	}

	.background {
	position: absolute;
	margin-top: 80px;
	width: 95%;
	z-index: 1
	}

	#fact {
	display: flex;
	justify-content: center;
	position: fixed;
	margin-top: 100px;
	width: 80%;
	font-size: 5vw;
	z-index: 2;
	}

	.animals {
	display: flex;
	flex-direction: row;
	position: fixed;
	width: 90%;
	margin-top: 240px;
	z-index: 2
	}

	.animal {
	width: 33.3%;
	}

	@media only screen and (max-width: 670px) {
	.animals {
	margin-top: 180px;
	}

	h1 {
	font-size: 24px;
	}
	}

	@media only screen and (max-width: 390px) {
	.animals {
	margin-top: 150px;
	}
	}

	@media only screen and (max-width: 300px) {
	.animals {
	margin-top: 130px;
	}
	}

	@media only screen and (max-width: 200px) {
	.animals {
	margin-top: 120px;
	}
	}