Skip to content

Instantly share code, notes, and snippets.

/index.html

Created July 10, 2015 05:33
Show Gist options
  • Save anonymous/a53a8a46ccad3e33a148 to your computer and use it in GitHub Desktop.
Save anonymous/a53a8a46ccad3e33a148 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @invalid-email-address Anonymous created this gist Jul 10, 2015.
    113 changes: 113 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,113 @@
    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://fb.me/react-0.13.1.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>

    <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(){
    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;
    }
    },
    render: function() {
    return (
    React.createElement("div", {className: "well clearfix"},
    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.state.text.length === 0 && !this.state.photoAdded}, "Tweet "),
    React.createElement("button", {className: "btn btn-default pull-right", onClick: this.togglePhoto},
    this.state.photoAdded ? "Photo Added" : "Add Photo"
    )
    )
    );
    }
    });

    React.render(
    React.createElement(TweetBox, null),
    document.body
    );
    </script>

    <script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
    <html>
    <head>
    <script src="//fb.me/react-0.13.1.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>

    </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(){
    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;
    }
    },
    render: function() {
    return (
    <div className="well clearfix">
    <textarea className="form-control"
    onChange={this.handleChange}>
    </textarea>
    <br/>
    <span>{this.remainingCharacters() }</span>
    <button className="btn btn-primary pull-right"
    disabled={this.state.text.length === 0 && !this.state.photoAdded}>Tweet </button>
    <button className="btn btn-default pull-right" onClick={this.togglePhoto}>
    {this.state.photoAdded ? "Photo Added" : "Add Photo" }
    </button>
    </div>
    );
    }
    });

    React.render(
    <TweetBox />,
    document.body
    );
    </script></body>
    </html>
    42 changes: 42 additions & 0 deletions jsbin.cecaqa.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,42 @@
    var TweetBox = React.createClass({displayName: 'TweetBox',
    getInitialState: function() {
    return {
    text: "",
    photoAdded: false
    };
    },
    handleChange: function(event) {
    this.setState({ text: event.target.value });
    },
    togglePhoto: function(){
    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;
    }
    },
    render: function() {
    return (
    React.createElement("div", {className: "well clearfix"},
    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.state.text.length === 0 && !this.state.photoAdded}, "Tweet "),
    React.createElement("button", {className: "btn btn-default pull-right", onClick: this.togglePhoto},
    this.state.photoAdded ? "Photo Added" : "Add Photo"
    )
    )
    );
    }
    });

    React.render(
    React.createElement(TweetBox, null),
    document.body
    );