kevincolten/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Welcome</title>
</head>
<body>
  <div id="welcome">

  </div>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react-dom.js"></script>
  <script type="text/babel" src="./script.js"></script>
</body>
</html>

## script.js
'use strict';

class Welcome extends React.Component {
  constructor() {
    super();
    this.state = {
      name: 'there',
      color: 'red'
    };
  }

  changeName = (e) => {
    let color;
    if (e.target.value.length % 3 === 0 && e.target.value.length % 5 === 0) {
      color = 'blue';
    } else if (e.target.value.length % 3 === 0) {
      color = 'green';
    } else if (e.target.value.length % 5 === 0) {
      color = 'red';
    } else {
      color = 'black';
    }

    this.setState({
      name: e.target.value,
      color: color
    });
  }

  render() {
    return (
      <div>
        <h1 style={ {color: this.state.color} }>Hello, {this.state.name}!</h1>
        <input type="text" onChange={this.changeName} />
      </div>
    );
  }
}


ReactDOM.render(<Welcome />, document.getElementById('welcome'));
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Welcome</title>
	</head>
	<body>
	<div id="welcome">

	</div>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react-dom.js"></script>
	<script type="text/babel" src="./script.js"></script>
	</body>
	</html>
	'use strict';

	class Welcome extends React.Component {
	constructor() {
	super();
	this.state = {
	name: 'there',
	color: 'red'
	};
	}

	changeName = (e) => {
	let color;
	if (e.target.value.length % 3 === 0 && e.target.value.length % 5 === 0) {
	color = 'blue';
	} else if (e.target.value.length % 3 === 0) {
	color = 'green';
	} else if (e.target.value.length % 5 === 0) {
	color = 'red';
	} else {
	color = 'black';
	}

	this.setState({
	name: e.target.value,
	color: color
	});
	}

	render() {
	return (
	<div>
	<h1 style={ {color: this.state.color} }>Hello, {this.state.name}!</h1>
	<input type="text" onChange={this.changeName} />
	</div>
	);
	}
	}



	ReactDOM.render(<Welcome />, document.getElementById('welcome'));