Skip to content

Instantly share code, notes, and snippets.

@Shaunakde

Shaunakde/index.html

Created May 21, 2015 17:28
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 Shaunakde/560ecdadc566c71c2224 to your computer and use it in GitHub Desktop.
Save Shaunakde/560ecdadc566c71c2224 to your computer and use it in GitHub Desktop.
Download ZIP
App to enter stylized text using ReactJS // source http://jsbin.com/zetoco
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://fb.me/react-0.12.0.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style id="jsbin-css">
section#outputGroup
{
background-color: #CCC;
height:500px;
width:500px;
}
section#outputGroup p
{
background: #CCC url("http://red-team-design.com/wp-content/uploads/2011/01/radial-gradient.png");
height:500px;
width:500px;
padding:50px;
font: 30pt Georgia, serif;
text-align: center;
}
section#textGroup
{
width:500px;
}
</style>
</head>
<body>
<div id="app">
<div>
<script id="jsbin-javascript">
var TextGroup = React.createClass({displayName: 'TextGroup',
inputGot: function() {
var q=this.refs.txtBox.getDOMNode().value;
this.props.onUserInput(q)
},
render:function(){
return( React.createElement("section", {id: "textGroup"},
React.createElement("div", {className: "input-group input-group-lg"},
React.createElement("span", {className: "input-group-addon", id: "sizing-addon1"}, React.createElement("span", {className: "glyphicon glyphicon-star", 'aria-hidden': "true"})),
React.createElement("input", {type: "text", value: this.props.quoteText, className: "form-control", placeholder: "Say Something!", 'aria-describedby': "sizing-addon1", ref: "txtBox", onChange: this.inputGot})
)
) );
}
});
var CanvasGroup = React.createClass({displayName: 'CanvasGroup',
render:function (){
return( React.createElement("section", {id: "outputGroup"},
React.createElement("p", {className: "Canvas"}, this.props.quoteText)
));
}
});
var AppGroup = React.createClass({displayName: 'AppGroup',
updateQ:function(quote) {
this.setState({
quoteText : quote
});
},
getInitialState:function(){
return (
{
quoteText: ''
}
);
},
render:function(){
return( React.createElement("p", null, React.createElement(TextGroup, {quoteText: this.state.quoteText, onUserInput: this.updateQ}), React.createElement(CanvasGroup, {quoteText: this.state.quoteText})) );
}
});
React.render(React.createElement(AppGroup, null), document.getElementById("app"));
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//fb.me/react-0.12.0.js"><\/script>
<script src="https://fb.me/JSXTransformer-0.13.3.js"><\/script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"><\/script>
<\!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<\!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<\!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"><\/script>
</head>
<body>
<div id="app">
<div>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">
section#outputGroup
{
background-color: #CCC;
height:500px;
width:500px;
}
section#outputGroup p
{
background: #CCC url("http://red-team-design.com/wp-content/uploads/2011/01/radial-gradient.png");
height:500px;
width:500px;
padding:50px;
font: 30pt Georgia, serif;
text-align: center;
}
section#textGroup
{
width:500px;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">var TextGroup = React.createClass({
inputGot: function() {
var q=this.refs.txtBox.getDOMNode().value;
this.props.onUserInput(q)
},
render:function(){
return( <section id="textGroup">
<div className="input-group input-group-lg">
<span className="input-group-addon" id="sizing-addon1"><span className="glyphicon glyphicon-star" aria-hidden="true"></span></span>
<input type="text" value={this.props.quoteText} className="form-control" placeholder="Say Something!" aria-describedby="sizing-addon1" ref="txtBox" onChange={this.inputGot}/>
</div>
</section> );
}
});
var CanvasGroup = React.createClass({
render:function (){
return( <section id="outputGroup">
<p className="Canvas">{this.props.quoteText}</p>
</section>);
}
});
var AppGroup = React.createClass({
updateQ:function(quote) {
this.setState({
quoteText : quote
});
},
getInitialState:function(){
return (
{
quoteText: ''
}
);
},
render:function(){
return( <p><TextGroup quoteText={this.state.quoteText} onUserInput={this.updateQ} /><CanvasGroup quoteText={this.state.quoteText}/></p> );
}
});
React.render(<AppGroup/>, document.getElementById("app"));
</script></body>
</html>
Raw
jsbin.zetoco.css
section#outputGroup
{
background-color: #CCC;
height:500px;
width:500px;
}
section#outputGroup p
{
background: #CCC url("http://red-team-design.com/wp-content/uploads/2011/01/radial-gradient.png");
height:500px;
width:500px;
padding:50px;
font: 30pt Georgia, serif;
text-align: center;
}
section#textGroup
{
width:500px;
}
Raw
jsbin.zetoco.js
var TextGroup = React.createClass({displayName: 'TextGroup',
inputGot: function() {
var q=this.refs.txtBox.getDOMNode().value;
this.props.onUserInput(q)
},
render:function(){
return( React.createElement("section", {id: "textGroup"},
React.createElement("div", {className: "input-group input-group-lg"},
React.createElement("span", {className: "input-group-addon", id: "sizing-addon1"}, React.createElement("span", {className: "glyphicon glyphicon-star", 'aria-hidden': "true"})),
React.createElement("input", {type: "text", value: this.props.quoteText, className: "form-control", placeholder: "Say Something!", 'aria-describedby': "sizing-addon1", ref: "txtBox", onChange: this.inputGot})
)
) );
}
});
var CanvasGroup = React.createClass({displayName: 'CanvasGroup',
render:function (){
return( React.createElement("section", {id: "outputGroup"},
React.createElement("p", {className: "Canvas"}, this.props.quoteText)
));
}
});
var AppGroup = React.createClass({displayName: 'AppGroup',
updateQ:function(quote) {
this.setState({
quoteText : quote
});
},
getInitialState:function(){
return (
{
quoteText: ''
}
);
},
render:function(){
return( React.createElement("p", null, React.createElement(TextGroup, {quoteText: this.state.quoteText, onUserInput: this.updateQ}), React.createElement(CanvasGroup, {quoteText: this.state.quoteText})) );
}
});
React.render(React.createElement(AppGroup, null), document.getElementById("app"));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment