Skip to content

Instantly share code, notes, and snippets.

@patsanch

patsanch/index.html

Created April 21, 2017 01:49
Show Gist options
  • Save patsanch/c9f2ec4505bf642b84cf14898a9af269 to your computer and use it in GitHub Desktop.
Save patsanch/c9f2ec4505bf642b84cf14898a9af269 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/jabugov
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://fb.me/react-0.14.7.min.js"></script>
<script src="http://fb.me/react-dom-0.14.7.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="container"></div>
<script id="jsbin-javascript">
var TweetBox = React.createClass({displayName: 'TweetBox',
getInitialState: function() {
return {
text: "",
photoAdded: false
};
},
handleChange: function(event) {
this.setState({ text: event.target.value });
},
togglePhoto: function(event) {
this.setState({ photoAdded: !this.state.photoAdded });
},
remainingCharacters: function() {
if (this.state.photoAdded) {
return 140 - 23 - this.state.text.length;
} else {
return 140 - this.state.text.length;
}
},
overflowAlert: function() {
if (this.remainingCharacters() < 0) {
var beforeOverflowText = this.state.text.substring(140 - 10, 140);
var overflowText = this.state.text.substring(140);
return (
React.createElement("div", {className: "alert alert-warning"},
React.createElement("strong", null, "Oops! Too Long:"),
" ...", beforeOverflowText,
React.createElement("strong", {className: "bg-danger"}, overflowText)
)
);
}
},
render: function() {
return (
React.createElement("div", {className: "well clearfix"},
this.overflowAlert(),
React.createElement("textarea", {className: "form-control",
onChange: this.handleChange}
),
React.createElement("br", null),
React.createElement("span", null, this.remainingCharacters() ),
React.createElement("button", {className: "btn btn-primary pull-right",
disabled: this.remainingCharacters() === 140}, "Tweet"),
React.createElement("button", {className: "btn btn-default pull-right",
onClick: this.togglePhoto},
this.state.photoAdded ? "✓ Photo Added" : "Add Photo"
)
)
);
}
});
ReactDOM.render(
React.createElement(TweetBox, null),
document.getElementById("container")
);
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//fb.me/react-0.14.7.min.js"><\/script>
<script src="//fb.me/react-dom-0.14.7.min.js"><\/script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="container"></div>
</body>
</html></script>
<script id="jsbin-source-javascript" type="text/javascript">var TweetBox = React.createClass({
getInitialState: function() {
return {
text: "",
photoAdded: false
};
},
handleChange: function(event) {
this.setState({ text: event.target.value });
},
togglePhoto: function(event) {
this.setState({ photoAdded: !this.state.photoAdded });
},
remainingCharacters: function() {
if (this.state.photoAdded) {
return 140 - 23 - this.state.text.length;
} else {
return 140 - this.state.text.length;
}
},
overflowAlert: function() {
if (this.remainingCharacters() < 0) {
var beforeOverflowText = this.state.text.substring(140 - 10, 140);
var overflowText = this.state.text.substring(140);
return (
<div className="alert alert-warning">
<strong>Oops! Too Long:</strong>
&nbsp;...{beforeOverflowText}
<strong className="bg-danger">{overflowText}</strong>
</div>
);
}
},
render: function() {
return (
<div className="well clearfix">
{ this.overflowAlert() }
<textarea className="form-control"
onChange={this.handleChange}>
</textarea>
<br/>
<span>{ this.remainingCharacters() }</span>
<button className="btn btn-primary pull-right"
disabled={this.remainingCharacters() === 140}>Tweet</button>
<button className="btn btn-default pull-right"
onClick={this.togglePhoto}>
{this.state.photoAdded ? "✓ Photo Added" : "Add Photo" }
</button>
</div>
);
}
});
ReactDOM.render(
<TweetBox />,
document.getElementById("container")
);</script></body>
</html>
Raw
jsbin.jabugov.js
var TweetBox = React.createClass({displayName: 'TweetBox',
getInitialState: function() {
return {
text: "",
photoAdded: false
};
},
handleChange: function(event) {
this.setState({ text: event.target.value });
},
togglePhoto: function(event) {
this.setState({ photoAdded: !this.state.photoAdded });
},
remainingCharacters: function() {
if (this.state.photoAdded) {
return 140 - 23 - this.state.text.length;
} else {
return 140 - this.state.text.length;
}
},
overflowAlert: function() {
if (this.remainingCharacters() < 0) {
var beforeOverflowText = this.state.text.substring(140 - 10, 140);
var overflowText = this.state.text.substring(140);
return (
React.createElement("div", {className: "alert alert-warning"},
React.createElement("strong", null, "Oops! Too Long:"),
" ...", beforeOverflowText,
React.createElement("strong", {className: "bg-danger"}, overflowText)
)
);
}
},
render: function() {
return (
React.createElement("div", {className: "well clearfix"},
this.overflowAlert(),
React.createElement("textarea", {className: "form-control",
onChange: this.handleChange}
),
React.createElement("br", null),
React.createElement("span", null, this.remainingCharacters() ),
React.createElement("button", {className: "btn btn-primary pull-right",
disabled: this.remainingCharacters() === 140}, "Tweet"),
React.createElement("button", {className: "btn btn-default pull-right",
onClick: this.togglePhoto},
this.state.photoAdded ? "✓ Photo Added" : "Add Photo"
)
)
);
}
});
ReactDOM.render(
React.createElement(TweetBox, null),
document.getElementById("container")
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment