Created
May 21, 2015 17:28
-
-
Save Shaunakde/560ecdadc566c71c2224 to your computer and use it in GitHub Desktop.
App to enter stylized text using ReactJS // source http://jsbin.com/zetoco
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> | |
<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> |
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
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; | |
} |
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
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