codecademydev/CopyCat.js Secret

## CopyCat.js
import React from 'react';
import styles from '../styles.js';


const images = {
  copycat: 'https://content.codecademy.com/courses/React/react_photo_copycat.png',
  quietcat: 'https://content.codecademy.com/courses/React/react_photo_quietcat.png'
};


class CopyCat extends React.Component {

  render() {
    return (
      <div style={styles.divStyles}>
        <h1>Copy Cat</h1>

        <img style={styles.imgStyles} alt='cat'
          src={this.props.copying ? images.copycat : images.quietcat}
          onClick={this.props.toggleTape}
        />
      </div>
    );
  };
}

export default CopyCat;

## CopyCatContainer.js
import React from 'react';
import ReactDOM from 'react-dom';
import CopyCat from '../components/CopyCat.js'

/* const images = {
  copycat: 'https://content.codecademy.com/courses/React/react_photo_copycat.png',
  quietcat: 'https://content.codecademy.com/courses/React/react_photo_quietcat.png'
}; */


class CopyCatContainer extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      copying: true
    };

    this.toggleTape = this.toggleTape.bind(this);
  }

  toggleTape() {
    this.setState({ copying: !this.state.copying })
  }

  render() {
    return (
      //<div><h1>App</h1></div>

      <CopyCat
      copying={this.state.copying}
      toggleTape={this.toggleTape}
       />
    );
  };
}


ReactDOM.render(<CopyCatContainer />, document.getElementById('app'));

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="/styles.css">
	<title>CopyCat</title>
</head>

<body>
  <main id="app"></main>
	<script src="https://content.codecademy.com/courses/React/react-course-bundle.min.js"></script>
  <script src="/containers/CopyCatContainer.compiled.js"></script>
</body>

</html>

## styles.js
const fontFamily = 'Comic Sans MS, Lucida Handwriting, cursive';
const fontSize = '5vh';
const backgroundColor = '#282c34';
const minHeight = '100vh';
const minWidth = 400;
const display = 'flex';
const flexDirection = 'column';
const alignItems = 'center';
const justifyContent = 'center';
const color = 'white';
const marginTop = '20px';
const width = '50%';

const divStyles = {
  fontFamily: fontFamily,
  fontSize: fontSize,
  color: color,
  backgroundColor: backgroundColor,
  minHeight: minHeight,
  minWidth: minWidth,
  display: display,
  flexDirection: flexDirection,
  alignItems: alignItems,
  justifyContent: justifyContent,
};

const imgStyles = {
  marginTop: marginTop,
  width: width
};

export const styles = {
  divStyles: divStyles,
  imgStyles: imgStyles
};
	import React from 'react';
	import styles from '../styles.js';


	const images = {
	copycat: 'https://content.codecademy.com/courses/React/react_photo_copycat.png',
	quietcat: 'https://content.codecademy.com/courses/React/react_photo_quietcat.png'
	};


	class CopyCat extends React.Component {

	render() {
	return (
	<div style={styles.divStyles}>
	<h1>Copy Cat</h1>

	<img style={styles.imgStyles} alt='cat'
	src={this.props.copying ? images.copycat : images.quietcat}
	onClick={this.props.toggleTape}
	/>
	</div>
	);
	};
	}

	export default CopyCat;
	import React from 'react';
	import ReactDOM from 'react-dom';
	import CopyCat from '../components/CopyCat.js'

	/* const images = {
	copycat: 'https://content.codecademy.com/courses/React/react_photo_copycat.png',
	quietcat: 'https://content.codecademy.com/courses/React/react_photo_quietcat.png'
	}; */


	class CopyCatContainer extends React.Component {
	constructor(props) {
	super(props);

	this.state = {
	copying: true
	};

	this.toggleTape = this.toggleTape.bind(this);
	}

	toggleTape() {
	this.setState({ copying: !this.state.copying })
	}

	render() {
	return (
	//<div><h1>App</h1></div>

	<CopyCat
	copying={this.state.copying}
	toggleTape={this.toggleTape}
	/>
	);
	};
	}


	ReactDOM.render(<CopyCatContainer />, document.getElementById('app'));
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="/styles.css">
	<title>CopyCat</title>
	</head>

	<body>
	<main id="app"></main>
	<script src="https://content.codecademy.com/courses/React/react-course-bundle.min.js"></script>
	<script src="/containers/CopyCatContainer.compiled.js"></script>
	</body>

	</html>
	const fontFamily = 'Comic Sans MS, Lucida Handwriting, cursive';
	const fontSize = '5vh';
	const backgroundColor = '#282c34';
	const minHeight = '100vh';
	const minWidth = 400;
	const display = 'flex';
	const flexDirection = 'column';
	const alignItems = 'center';
	const justifyContent = 'center';
	const color = 'white';
	const marginTop = '20px';
	const width = '50%';

	const divStyles = {
	fontFamily: fontFamily,
	fontSize: fontSize,
	color: color,
	backgroundColor: backgroundColor,
	minHeight: minHeight,
	minWidth: minWidth,
	display: display,
	flexDirection: flexDirection,
	alignItems: alignItems,
	justifyContent: justifyContent,
	};

	const imgStyles = {
	marginTop: marginTop,
	width: width
	};

	export const styles = {
	divStyles: divStyles,
	imgStyles: imgStyles
	};