Skip to content

Instantly share code, notes, and snippets.

/index.html

Created April 27, 2016 21:49
Show Gist options
  • Save anonymous/8e795a3a8bd2e84d27a2edf0713c022a to your computer and use it in GitHub Desktop.
Save anonymous/8e795a3a8bd2e84d27a2edf0713c022a to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/volihe
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/normalize.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/vendor/modernizr.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/vendor/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
<script src="https://fb.me/react-with-addons-0.14.7.min.js"></script>
<script src="https://fb.me/react-dom-0.14.7.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
button {
width: 100%;
}
</style>
</head>
<body>
<div id="root"></div>
<script id="jsbin-javascript">
var TimerDisplay = React.createClass({displayName: 'TimerDisplay',
render: function () {
return (
React.createElement("div", {id: "timer"},
React.createElement("h1", null, this.props.time)
)
)
}
});
var Track = React.createClass({displayName: 'Track',
render: function () {
return (
React.createElement("div", null,
React.createElement("button", {onClick: this.props.track}, "Track")
)
)
}
});
var Reset = React.createClass({displayName: 'Reset',
render: function () {
return (
React.createElement("div", null,
React.createElement("button", {onClick: this.props.reset}, "Reset")
)
)
}
});
var List = React.createClass({displayName: 'List',
render: function () {
var list = this.props.list,
myList = [];
for (var i = 0; i < list.length; i++) {
myList.push(React.createElement("li", {className: "bullet-item"}, list[i]))
}
return (
React.createElement("ul", {className: "pricing-table"},
myList
)
)
}
});
var Main = React.createClass({displayName: 'Main',
getInitialState: function () {
return {
interval: setInterval(this.myTimer, 1000),
time: new Date().toLocaleTimeString(),
list: []
}
},
myTimer: function() {
var d = new Date();
this.setState({time:d.toLocaleTimeString()});
},
trackTime: function () {
var timeStamp = this.state.time,
list = this.state.list.concat(timeStamp);
this.setState({list: list});
},
reset: function() {
this.setState({list:[]});
},
render: function() {
var time = this.state.time,
list = this.state.list,
reset = this.reset,
track = this.trackTime;
return (
React.createElement("div", {className: "row"},
React.createElement("div", {className: "small-12 text-center"},
React.createElement(TimerDisplay, {time: time})
),
React.createElement("div", {className: "small-6 columns"},
React.createElement(Track, {track: track})
),
React.createElement("div", {className: "small-6 columns"},
React.createElement(Reset, {reset: reset})
),
React.createElement("div", {className: "small-12 column"},
React.createElement(List, {list: list})
)
)
)
}
});
React.render(React.createElement(Main, null), document.getElementById("root"));
</script>
<script id="jsbin-source-css" type="text/css">button {
width: 100%;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">var TimerDisplay = React.createClass({
render: function () {
return (
<div id="timer">
<h1>{this.props.time}</h1>
</div>
)
}
});
var Track = React.createClass({
render: function () {
return (
<div>
<button onClick={this.props.track}>Track</button>
</div>
)
}
});
var Reset = React.createClass({
render: function () {
return (
<div>
<button onClick={this.props.reset}>Reset</button>
</div>
)
}
});
var List = React.createClass({
render: function () {
var list = this.props.list,
myList = [];
for (var i = 0; i < list.length; i++) {
myList.push(<li className="bullet-item">{list[i]}</li>)
}
return (
<ul className="pricing-table">
{myList}
</ul>
)
}
});
var Main = React.createClass({
getInitialState: function () {
return {
interval: setInterval(this.myTimer, 1000),
time: new Date().toLocaleTimeString(),
list: []
}
},
myTimer: function() {
var d = new Date();
this.setState({time:d.toLocaleTimeString()});
},
trackTime: function () {
var timeStamp = this.state.time,
list = this.state.list.concat(timeStamp);
this.setState({list: list});
},
reset: function() {
this.setState({list:[]});
},
render: function() {
var time = this.state.time,
list = this.state.list,
reset = this.reset,
track = this.trackTime;
return (
<div className="row">
<div className="small-12 text-center">
<TimerDisplay time={time} />
</div>
<div className="small-6 columns">
<Track track={track} />
</div>
<div className="small-6 columns">
<Reset reset={reset}/>
</div>
<div className="small-12 column">
<List list={list} />
</div>
</div>
)
}
});
React.render(<Main />, document.getElementById("root"));</script></body>
</html>
Raw
jsbin.volihe.css
button {
width: 100%;
}
Raw
jsbin.volihe.js
var TimerDisplay = React.createClass({displayName: 'TimerDisplay',
render: function () {
return (
React.createElement("div", {id: "timer"},
React.createElement("h1", null, this.props.time)
)
)
}
});
var Track = React.createClass({displayName: 'Track',
render: function () {
return (
React.createElement("div", null,
React.createElement("button", {onClick: this.props.track}, "Track")
)
)
}
});
var Reset = React.createClass({displayName: 'Reset',
render: function () {
return (
React.createElement("div", null,
React.createElement("button", {onClick: this.props.reset}, "Reset")
)
)
}
});
var List = React.createClass({displayName: 'List',
render: function () {
var list = this.props.list,
myList = [];
for (var i = 0; i < list.length; i++) {
myList.push(React.createElement("li", {className: "bullet-item"}, list[i]))
}
return (
React.createElement("ul", {className: "pricing-table"},
myList
)
)
}
});
var Main = React.createClass({displayName: 'Main',
getInitialState: function () {
return {
interval: setInterval(this.myTimer, 1000),
time: new Date().toLocaleTimeString(),
list: []
}
},
myTimer: function() {
var d = new Date();
this.setState({time:d.toLocaleTimeString()});
},
trackTime: function () {
var timeStamp = this.state.time,
list = this.state.list.concat(timeStamp);
this.setState({list: list});
},
reset: function() {
this.setState({list:[]});
},
render: function() {
var time = this.state.time,
list = this.state.list,
reset = this.reset,
track = this.trackTime;
return (
React.createElement("div", {className: "row"},
React.createElement("div", {className: "small-12 text-center"},
React.createElement(TimerDisplay, {time: time})
),
React.createElement("div", {className: "small-6 columns"},
React.createElement(Track, {track: track})
),
React.createElement("div", {className: "small-6 columns"},
React.createElement(Reset, {reset: reset})
),
React.createElement("div", {className: "small-12 column"},
React.createElement(List, {list: list})
)
)
)
}
});
React.render(React.createElement(Main, null), document.getElementById("root"));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment