Created
February 28, 2017 06:47
-
-
Save alanbsmith/7f6daf12ca540b4a8a813e081aa3bf5a to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/joqiqin
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<title>JS Bin</title> | |
<style id="jsbin-css"> | |
body { | |
background-color: #E0E6ED; | |
color: #1F2D3D; | |
font-family: Helvetica neue, sans-serif; | |
font-weight: 200; | |
margin: 40px 10px; | |
} | |
.form { | |
background-color: #FFF; | |
border-radius: 3px; | |
padding: 15px 10px; | |
} | |
.form-title { | |
font-size: 24px; | |
font-weight: 200; | |
} | |
.form-label { | |
color: #8492A6; | |
display: block; | |
font-size: 12px; | |
margin: 10px 0 2px; | |
text-transform: uppercase; | |
} | |
.form-input { | |
background: none; | |
border: none; | |
border-bottom: solid 1px #8492A6; | |
box-sizing: border-box; | |
display: block; | |
font-size: 14px; | |
outline: none; | |
padding: 5px 0; | |
width: 100%; | |
} | |
.form-error { | |
color: #FF4949; | |
font-size: 10px; | |
margin-top: 5px; | |
text-align: right; | |
text-transform: uppercase; | |
} | |
.form-button { | |
background-color: #1FB6FF; | |
border: none; | |
border-radius: 3px; | |
color: #fff; | |
display: block; | |
font-size: 14px; | |
font-weight: 100; | |
margin: 10px 0 0; | |
padding: 10px 10px; | |
text-transform: uppercase; | |
transition: background-color 0.3s ease; | |
width: 100%; | |
} | |
.form-button.disabled { | |
background-color: #E0E6ED; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="root"></div> | |
<script src="https://fb.me/react-15.1.0.js"></script> | |
<script src="https://fb.me/react-dom-15.1.0.js"></script> | |
<script id="jsbin-javascript"> | |
class BasicLoginForm extends React.Component { | |
constructor(props) { | |
super(props); | |
this.state = { | |
email: '', | |
password: '', | |
}; | |
} | |
handleSubmit(e) { | |
e.preventDefault(); | |
// stubbed form submission | |
console.log('email', this.state.email); | |
console.log('password', this.state.password); | |
} | |
formIsValid() { | |
return this.state.email.length && this.state.password.length; | |
} | |
render() { | |
return ( | |
React.createElement("form", {className: "form", onSubmit: e => this.handleSubmit(e)}, | |
React.createElement("h1", {className: "form-title"}, "Login"), | |
React.createElement("label", {className: "form-label"}, "Email"), | |
React.createElement("input", { | |
className: "form-input", | |
name: "email", | |
onChange: e => this.setState({ email: e.target.value }), | |
type: "text", | |
value: this.state.email} | |
), | |
React.createElement("label", {className: "form-label"}, "Password"), | |
React.createElement("input", { | |
className: "form-input", | |
name: "password", | |
onChange: e => this.setState({ password: e.target.value }), | |
type: "password", | |
value: this.state.password} | |
), | |
React.createElement("button", { | |
className: `form-button ${this.formIsValid() ? '' : 'disabled'}`, | |
disabled: !this.formIsValid(), | |
type: "submit" | |
}, | |
"Submit" | |
) | |
) | |
); | |
} | |
} | |
ReactDOM.render(React.createElement(BasicLoginForm, null), document.getElementById('root')); | |
</script> | |
<script id="jsbin-source-css" type="text/css">body { | |
background-color: #E0E6ED; | |
color: #1F2D3D; | |
font-family: Helvetica neue, sans-serif; | |
font-weight: 200; | |
margin: 40px 10px; | |
} | |
.form { | |
background-color: #FFF; | |
border-radius: 3px; | |
padding: 15px 10px; | |
} | |
.form-title { | |
font-size: 24px; | |
font-weight: 200; | |
} | |
.form-label { | |
color: #8492A6; | |
display: block; | |
font-size: 12px; | |
margin: 10px 0 2px; | |
text-transform: uppercase; | |
} | |
.form-input { | |
background: none; | |
border: none; | |
border-bottom: solid 1px #8492A6; | |
box-sizing: border-box; | |
display: block; | |
font-size: 14px; | |
outline: none; | |
padding: 5px 0; | |
width: 100%; | |
} | |
.form-error { | |
color: #FF4949; | |
font-size: 10px; | |
margin-top: 5px; | |
text-align: right; | |
text-transform: uppercase; | |
} | |
.form-button { | |
background-color: #1FB6FF; | |
border: none; | |
border-radius: 3px; | |
color: #fff; | |
display: block; | |
font-size: 14px; | |
font-weight: 100; | |
margin: 10px 0 0; | |
padding: 10px 10px; | |
text-transform: uppercase; | |
transition: background-color 0.3s ease; | |
width: 100%; | |
} | |
.form-button.disabled { | |
background-color: #E0E6ED; | |
} | |
</script> | |
<script id="jsbin-source-javascript" type="text/javascript">class BasicLoginForm extends React.Component { | |
constructor(props) { | |
super(props); | |
this.state = { | |
email: '', | |
password: '', | |
}; | |
} | |
handleSubmit(e) { | |
e.preventDefault(); | |
// stubbed form submission | |
console.log('email', this.state.email); | |
console.log('password', this.state.password); | |
} | |
formIsValid() { | |
return this.state.email.length && this.state.password.length; | |
} | |
render() { | |
return ( | |
<form className="form" onSubmit={e => this.handleSubmit(e)}> | |
<h1 className="form-title">Login</h1> | |
<label className="form-label">Email</label> | |
<input | |
className="form-input" | |
name="email" | |
onChange={e => this.setState({ email: e.target.value })} | |
type="text" | |
value={this.state.email} | |
/> | |
<label className="form-label">Password</label> | |
<input | |
className="form-input" | |
name="password" | |
onChange={e => this.setState({ password: e.target.value })} | |
type="password" | |
value={this.state.password} | |
/> | |
<button | |
className={`form-button ${this.formIsValid() ? '' : 'disabled'}`} | |
disabled={!this.formIsValid()} | |
type="submit" | |
> | |
Submit | |
</button> | |
</form> | |
); | |
} | |
} | |
ReactDOM.render(<BasicLoginForm />, document.getElementById('root'));</script></body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
background-color: #E0E6ED; | |
color: #1F2D3D; | |
font-family: Helvetica neue, sans-serif; | |
font-weight: 200; | |
margin: 40px 10px; | |
} | |
.form { | |
background-color: #FFF; | |
border-radius: 3px; | |
padding: 15px 10px; | |
} | |
.form-title { | |
font-size: 24px; | |
font-weight: 200; | |
} | |
.form-label { | |
color: #8492A6; | |
display: block; | |
font-size: 12px; | |
margin: 10px 0 2px; | |
text-transform: uppercase; | |
} | |
.form-input { | |
background: none; | |
border: none; | |
border-bottom: solid 1px #8492A6; | |
box-sizing: border-box; | |
display: block; | |
font-size: 14px; | |
outline: none; | |
padding: 5px 0; | |
width: 100%; | |
} | |
.form-error { | |
color: #FF4949; | |
font-size: 10px; | |
margin-top: 5px; | |
text-align: right; | |
text-transform: uppercase; | |
} | |
.form-button { | |
background-color: #1FB6FF; | |
border: none; | |
border-radius: 3px; | |
color: #fff; | |
display: block; | |
font-size: 14px; | |
font-weight: 100; | |
margin: 10px 0 0; | |
padding: 10px 10px; | |
text-transform: uppercase; | |
transition: background-color 0.3s ease; | |
width: 100%; | |
} | |
.form-button.disabled { | |
background-color: #E0E6ED; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
class BasicLoginForm extends React.Component { | |
constructor(props) { | |
super(props); | |
this.state = { | |
email: '', | |
password: '', | |
}; | |
} | |
handleSubmit(e) { | |
e.preventDefault(); | |
// stubbed form submission | |
console.log('email', this.state.email); | |
console.log('password', this.state.password); | |
} | |
formIsValid() { | |
return this.state.email.length && this.state.password.length; | |
} | |
render() { | |
return ( | |
React.createElement("form", {className: "form", onSubmit: e => this.handleSubmit(e)}, | |
React.createElement("h1", {className: "form-title"}, "Login"), | |
React.createElement("label", {className: "form-label"}, "Email"), | |
React.createElement("input", { | |
className: "form-input", | |
name: "email", | |
onChange: e => this.setState({ email: e.target.value }), | |
type: "text", | |
value: this.state.email} | |
), | |
React.createElement("label", {className: "form-label"}, "Password"), | |
React.createElement("input", { | |
className: "form-input", | |
name: "password", | |
onChange: e => this.setState({ password: e.target.value }), | |
type: "password", | |
value: this.state.password} | |
), | |
React.createElement("button", { | |
className: `form-button ${this.formIsValid() ? '' : 'disabled'}`, | |
disabled: !this.formIsValid(), | |
type: "submit" | |
}, | |
"Submit" | |
) | |
) | |
); | |
} | |
} | |
ReactDOM.render(React.createElement(BasicLoginForm, null), document.getElementById('root')); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment