Skip to content

Instantly share code, notes, and snippets.

@codecademydev

codecademydev/CopyCat.js Secret

Created Apr 11, 2021
Embed
What would you like to do?
Codecademy export
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 = this.props.copying;
const toggleTape = this.props.toggleTape;
const name = this.props.name;
return (
<div style={styles.divStyles}>
<h1 style={{marginBottom: 40}}>Copy Cat {name || "Tom"}</h1>
<input
type='text'
value={this.props.value}
onChange={this.props.handleChange}/>
<img style={styles.imgStyles}
alt='cat'
src={copying ? images.copycat : images.quietcat}
onClick={toggleTape}
/>
<p>{copying && this.props.value}</p>
</div>
);
};
}
CopyCat.propTypes = {
copying: PropTypes.bool.isRequired,
toggleTape: PropTypes.func.isRequired,
value: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
name: PropTypes.string
}
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);
}
handleChange(e) {
this.setState({input: e.target.value});
}
toggleTape() {
this.setState({copying: !this.state.copying});
}
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} onChange={handleChange}/>
);
};
}
ReactDOM.render(<CopyCatContainer />, document.getElementById('app'));
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,
imgStyles
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment