COPYCAT.JS
import React from ‘react’;
import {styles} from ‘…/styles’;
import PropTypes from ‘prop-types’;
const images = {
copycat: ‘https://content.codecademy.com/courses/React/react_photo_copycat.png’,
quietcat: ‘https://content.codecademy.com/courses/React/react_photo_quietcat.png’
};
export class CopyCat extends React.Component {
render() {
const {copying, toggleTape, value, handleChange, name} = this.props;
return (
<div style= {styles.divStyles}>
<h1 style= {{ marginBottom: '80px' }}>Copy Cat {name || "Tom" }</h1>
<input
type = "text"
value={value}
onChange={handleChange}
/>
<img
alt='cat'
src={copying ? images.copycat : images.quietcat}
style={styles.imgStyles}
onClick={toggleTape}
/>
<p>{copying && value}</p>
</div>
);
};
}
CopyCat.propTypes = {
copying: PropTypes.bool.isRequired,
toggleTape: PropTypes.func.isRequired,
value: PropTypes.string.isRequired,
handleChange: PropTypes.func.isRequired,
name:PropTypes.string
};
COPYCATCONTAINER.JS
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import {CopyCat} from ‘…/components/CopyCat’;
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,
input: ''
};
this.toggleTape = this.toggleTape.bind(this);
this.handleChange = this.handleChange.bind(this);
}
toggleTape() {
this.setState({copying: !this.state.copying})
}
handleChange(e) {
this.setState({input:e.target.value})
}
render() {
const copying = this.state.copying;
const toggleTape = this.toggleTape;
const value = this.state.input;
const handleChange = this.handlechange;
return (
<CopyCat
copying = {copying}
toggleTape = {toggleTape}
value = {value}
handleChange = {handleChange}
/>
)
};
}
ReactDOM.render(, document.getElementById(‘app’));
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
};