Skip to content

Instantly share code, notes, and snippets.

@alanbsmith

alanbsmith/index.html

Created February 28, 2017 06:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save alanbsmith/e5c37d499e7ce0a1845641bb51cbd738 to your computer and use it in GitHub Desktop.
Save alanbsmith/e5c37d499e7ce0a1845641bb51cbd738 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/joqiqin
Raw
index.html
<!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>
Raw
jsbin.joqiqin.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;
}
Raw
jsbin.joqiqin.js
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