Last active
July 19, 2016 07:06
-
-
Save nurrony/07cc4f35a1dd22346c5939b66c44f251 to your computer and use it in GitHub Desktop.
React vs JQuery
This file contains hidden or 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> | |
| <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> | |
| <style> | |
| #jquery-component .alert { | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h3>React Textbox</h3> | |
| <div id="root"></div> | |
| <br> | |
| <h3>Jquery Textbox</h3> | |
| <div id="jquery-component"> | |
| <div class="alert alert-warning"></div> | |
| <div class="well clearfix"> | |
| <textarea id="textarea" class="form-control"></textarea> | |
| <br> | |
| <div id="char-count"></div> | |
| </div> | |
| </div> | |
| <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> | |
| <script src="https://fb.me/react-15.1.0.js"></script> | |
| <script src="https://fb.me/react-dom-15.1.0.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or 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
| ;(function($) { | |
| var maxChar = 120; | |
| var $charElem = $('#char-count') | |
| var $textbox = $('#textarea') | |
| var $alert = $('#jquery-component').find('.alert') | |
| function toogleAlert(text, max, remaining) { | |
| if (remaining < 0) { | |
| var beforeOverflowText = text.substring(max - 10, max); | |
| var overflowText = text.substring(max); | |
| var html = '<strong>Oops! Too Long:</strong>\ | |
| ...' + beforeOverflowText + | |
| '<strong className="bg-danger">' + overflowText + '</strong>' | |
| $alert.html(html).show() | |
| } else { | |
| $alert.html('').hide() | |
| } | |
| } | |
| //show max number | |
| $charElem.text(maxChar); | |
| $textbox.keydown(function(event) { | |
| var value = event.target.value | |
| var length = value.length | |
| var remaining = maxChar - length | |
| //Update character count | |
| $charElem.text(remaining) | |
| toogleAlert(value, maxChar, remaining) | |
| }) | |
| })(window.jQuery, undefined) |
This file contains hidden or 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 TextBox = React.createClass({ | |
| getDefaultProps : function() { | |
| return { | |
| maxChar: 160 | |
| }; | |
| }, | |
| // set initial state | |
| getInitialState: function() { | |
| return { | |
| text: "" | |
| }; | |
| }, | |
| // handle state changes | |
| handleChange: function(event) { | |
| this.setState({ text: event.target.value }); | |
| }, | |
| // show overflow alert with text hint | |
| overflowAlert: function(max) { | |
| if (this.remainingCharacters(max) < 0) { | |
| var beforeOverflowText = this.state.text.substring(max - 10, max); | |
| var overflowText = this.state.text.substring(max); | |
| return ( | |
| <div className="alert alert-warning"> | |
| <strong>Oops! Too Long:</strong> | |
| ...{beforeOverflowText} | |
| <strong className="bg-danger">{overflowText}</strong> | |
| </div> | |
| ); | |
| } else { | |
| return ""; | |
| } | |
| }, | |
| // count remaining characters | |
| remainingCharacters: function(max) { | |
| return max - this.state.text.length; | |
| }, | |
| // render the component | |
| render: function() { | |
| var maxChar = this.props.maxChar | |
| return ( | |
| <div className="well clearfix"> | |
| { this.overflowAlert(maxChar) } | |
| <textarea className="form-control" | |
| onChange={this.handleChange}></textarea> | |
| <br/> | |
| <span>{ this.remainingCharacters(maxChar) }</span> | |
| </div> | |
| ); | |
| } | |
| }); | |
| // Mount component into DOM | |
| ReactDOM.render( | |
| <TextBox />, | |
| document.getElementById("root") | |
| ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment