Skip to content

Instantly share code, notes, and snippets.

/index.html

Created February 9, 2016 08:19
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save anonymous/79a60fac140a76533c7b to your computer and use it in GitHub Desktop.
Save anonymous/79a60fac140a76533c7b to your computer and use it in GitHub Desktop.
Download ZIP
React Example Logbook of Exercices // source http://jsbin.com/mehive
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Logbook of Exercices">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://cdn.firebase.com/js/client/2.4.0/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/reactfire/0.5.1/reactfire.min.js"></script>
<script src="http://fb.me/react-with-addons-0.14.3.js"></script>
<script src="http://fb.me/react-dom-0.14.3.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<title>React Example</title>
<style id="jsbin-css">
html, body {
margin:0;
padding:0;
}
.btn-primary {
margin-bottom:15px;
width:100%;
}
.center {
text-align:center;
margin:0;
padding:0;
}
</style>
</head>
<body>
<div id="root"></div>
<script id="jsbin-javascript">
/****************
COMPONENTS LIST
*****************
#App component
#Title component
#ItemsAdd component
#ItemsDisplay component
****************/
"use strict";
var FirebaseURL = new Firebase("https://logapp.firebaseio.com/");
// #App component
var App = React.createClass({
displayName: "App",
render: function render() {
return React.createElement(
"div",
{ className: "row col-xs-12 center" },
React.createElement(Title, null),
React.createElement(ItemsAdd, null),
React.createElement(ItemsDisplay, null)
);
}
});
// #Title component
var Title = React.createClass({
displayName: "Title",
render: function render() {
return React.createElement(
"h1",
{ className: "col-xs-12" },
"Logbook of Exersices"
);
}
});
// #ItemsAdd component
var ItemsAdd = React.createClass({
displayName: "ItemsAdd",
getInitialState: function getInitialState() {
return {
muscles: ["Back", "Chest", "Legs", "Arms", "Shoulders", "Other"],
reps: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13+"],
back: ["Deadlift", "Rod"],
chest: ["Benchpress", "Chest2"],
legs: ["Squats", "Legs2"]
};
},
handleSubmit: function handleSubmit(e) {
e.preventDefault();
this.firebaseRef = FirebaseURL;
this.firebaseRef.push({
added: Date.now(),
muscle: "test1",
reps: "5",
comment: "This was added to firebase!"
});
},
render: function render() {
var renderMuscles = this.state.muscles.sort().map(function (muscle) {
return React.createElement(
"label",
{ className: "btn btn-default", key: muscle },
React.createElement("input", { type: "radio", id: muscle, name: muscle, value: muscle }),
muscle
);
});
var renderReps = this.state.reps.map(function (rep) {
return React.createElement(
"label",
{ className: "btn btn-default", key: rep },
React.createElement("input", { type: "radio", id: rep, name: rep, value: rep }),
rep
);
});
return React.createElement(
"div",
{ className: "col-xs-12" },
React.createElement(
"form",
{ role: "form", onSubmit: this.handleSubmit },
React.createElement(
"div",
{ className: "form-group" },
React.createElement(
"div",
{ className: "btn-group", "data-toggle": "buttons" },
renderMuscles
)
),
React.createElement(
"div",
{ className: "form-group" },
React.createElement(
"div",
{ className: "btn-group", "data-toggle": "buttons" },
renderReps
)
),
React.createElement(
"div",
{ className: "form-group" },
React.createElement("input", { type: "text", className: "form-control", id: "comment", placeholder: "Enter comment", required: true })
),
React.createElement("button", { type: "submit", className: "btn btn-primary glyphicon glyphicon-plus-sign" })
)
);
}
});
// #ItemsDisplay component
var ItemsDisplay = React.createClass({
displayName: "ItemsDisplay",
mixins: [ReactFireMixin],
removeItem: function removeItem(key) {
this.firebaseRef = FirebaseURL.child(key);
this.firebaseRef.remove();
},
componentWillMount: function componentWillMount() {
this.bindAsArray(FirebaseURL, "items");
},
render: function render() {
var _this = this;
var myItems = this.state.items.sort().map(function (item) {
return React.createElement(
"div",
{ onClick: _this.removeItem.bind(_this, item[".key"]), className: "panel panel-info", key: item[".key"] },
React.createElement(
"div",
{ className: "panel-heading" },
item[".key"]
),
React.createElement(
"div",
{ className: "panel-body" },
item.muscle,
" - ",
item.reps,
" - ",
item.comment,
" - ",
item.uid
)
);
});
return React.createElement(
"div",
{ className: "col-xs-12" },
myItems
);
}
});
// App render
ReactDOM.render(React.createElement(App, null), document.getElementById('root'));
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta name="description" content="Logbook of Exercices">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://cdn.firebase.com/js/client/2.4.0/firebase.js"><\/script>
<script src="https://cdn.firebase.com/libs/reactfire/0.5.1/reactfire.min.js"><\/script>
<script src="//fb.me/react-with-addons-0.14.3.js"><\/script>
<script src="//fb.me/react-dom-0.14.3.js"><\/script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<title>React Example</title>
</head>
<body>
<div id="root"></div>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">html, body {
margin:0;
padding:0;
}
.btn-primary {
margin-bottom:15px;
width:100%;
}
.center {
text-align:center;
margin:0;
padding:0;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">/****************
COMPONENTS LIST
*****************
#App component
#Title component
#ItemsAdd component
#ItemsDisplay component
****************/
var FirebaseURL = new Firebase("https://logapp.firebaseio.com/");
// #App component
var App = React.createClass({
render: function() {
return (
<div className="row col-xs-12 center">
<Title />
<ItemsAdd />
<ItemsDisplay />
</div>
)
}
});
// #Title component
var Title = React.createClass({
render: function() {
return (
<h1 className="col-xs-12">Logbook of Exersices</h1>
)
}
});
// #ItemsAdd component
var ItemsAdd = React.createClass({
getInitialState: function() {
return {
muscles: ["Back", "Chest", "Legs", "Arms", "Shoulders", "Other"],
reps: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13+"],
back: ["Deadlift", "Rod"],
chest: ["Benchpress", "Chest2"],
legs: ["Squats", "Legs2"]
}
},
handleSubmit: function(e) {
e.preventDefault();
this.firebaseRef = FirebaseURL;
this.firebaseRef.push({
added: Date.now(),
muscle: "test1",
reps: "5",
comment: "This was added to firebase!"
});
},
render: function() {
var renderMuscles = this.state.muscles.sort().map(muscle =>
<label className="btn btn-default" key={muscle}>
<input type="radio" id={muscle} name={muscle} value={muscle} />{muscle}
</label>
);
var renderReps = this.state.reps.map(rep =>
<label className="btn btn-default" key={rep}>
<input type="radio" id={rep} name={rep} value={rep} />{rep}
</label>
);
return (
<div className="col-xs-12">
<form role="form" onSubmit={this.handleSubmit}>
<div className="form-group">
<div className="btn-group" data-toggle="buttons">
{renderMuscles}
</div>
</div>
<div className="form-group">
<div className="btn-group" data-toggle="buttons">
{renderReps}
</div>
</div>
<div className="form-group">
<input type="text" className="form-control" id="comment" placeholder="Enter comment" required/>
</div>
<button type="submit" className="btn btn-primary glyphicon glyphicon-plus-sign"></button>
</form>
</div>
)
}
});
// #ItemsDisplay component
var ItemsDisplay = React.createClass({
mixins: [ReactFireMixin],
removeItem: function(key){
this.firebaseRef = FirebaseURL.child(key);
this.firebaseRef.remove();
},
componentWillMount: function() {
this.bindAsArray(FirebaseURL, "items");
},
render: function() {
var myItems = this.state.items.sort().map(item =>
<div onClick={this.removeItem.bind(this, item[".key"])} className="panel panel-info" key={item[".key"]}>
<div className="panel-heading">{item[".key"]}</div>
<div className="panel-body">{item.muscle} - {item.reps} - {item.comment} - {item.uid}</div>
</div>
);
return (
<div className="col-xs-12">{myItems}</div>
)
}
});
// App render
ReactDOM.render(
<App />,
document.getElementById('root')
);</script></body>
</html>
Raw
jsbin.mehive.css
html, body {
margin:0;
padding:0;
}
.btn-primary {
margin-bottom:15px;
width:100%;
}
.center {
text-align:center;
margin:0;
padding:0;
}
Raw
jsbin.mehive.js
/****************
COMPONENTS LIST
*****************
#App component
#Title component
#ItemsAdd component
#ItemsDisplay component
****************/
"use strict";
var FirebaseURL = new Firebase("https://logapp.firebaseio.com/");
// #App component
var App = React.createClass({
displayName: "App",
render: function render() {
return React.createElement(
"div",
{ className: "row col-xs-12 center" },
React.createElement(Title, null),
React.createElement(ItemsAdd, null),
React.createElement(ItemsDisplay, null)
);
}
});
// #Title component
var Title = React.createClass({
displayName: "Title",
render: function render() {
return React.createElement(
"h1",
{ className: "col-xs-12" },
"Logbook of Exersices"
);
}
});
// #ItemsAdd component
var ItemsAdd = React.createClass({
displayName: "ItemsAdd",
getInitialState: function getInitialState() {
return {
muscles: ["Back", "Chest", "Legs", "Arms", "Shoulders", "Other"],
reps: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13+"],
back: ["Deadlift", "Rod"],
chest: ["Benchpress", "Chest2"],
legs: ["Squats", "Legs2"]
};
},
handleSubmit: function handleSubmit(e) {
e.preventDefault();
this.firebaseRef = FirebaseURL;
this.firebaseRef.push({
added: Date.now(),
muscle: "test1",
reps: "5",
comment: "This was added to firebase!"
});
},
render: function render() {
var renderMuscles = this.state.muscles.sort().map(function (muscle) {
return React.createElement(
"label",
{ className: "btn btn-default", key: muscle },
React.createElement("input", { type: "radio", id: muscle, name: muscle, value: muscle }),
muscle
);
});
var renderReps = this.state.reps.map(function (rep) {
return React.createElement(
"label",
{ className: "btn btn-default", key: rep },
React.createElement("input", { type: "radio", id: rep, name: rep, value: rep }),
rep
);
});
return React.createElement(
"div",
{ className: "col-xs-12" },
React.createElement(
"form",
{ role: "form", onSubmit: this.handleSubmit },
React.createElement(
"div",
{ className: "form-group" },
React.createElement(
"div",
{ className: "btn-group", "data-toggle": "buttons" },
renderMuscles
)
),
React.createElement(
"div",
{ className: "form-group" },
React.createElement(
"div",
{ className: "btn-group", "data-toggle": "buttons" },
renderReps
)
),
React.createElement(
"div",
{ className: "form-group" },
React.createElement("input", { type: "text", className: "form-control", id: "comment", placeholder: "Enter comment", required: true })
),
React.createElement("button", { type: "submit", className: "btn btn-primary glyphicon glyphicon-plus-sign" })
)
);
}
});
// #ItemsDisplay component
var ItemsDisplay = React.createClass({
displayName: "ItemsDisplay",
mixins: [ReactFireMixin],
removeItem: function removeItem(key) {
this.firebaseRef = FirebaseURL.child(key);
this.firebaseRef.remove();
},
componentWillMount: function componentWillMount() {
this.bindAsArray(FirebaseURL, "items");
},
render: function render() {
var _this = this;
var myItems = this.state.items.sort().map(function (item) {
return React.createElement(
"div",
{ onClick: _this.removeItem.bind(_this, item[".key"]), className: "panel panel-info", key: item[".key"] },
React.createElement(
"div",
{ className: "panel-heading" },
item[".key"]
),
React.createElement(
"div",
{ className: "panel-body" },
item.muscle,
" - ",
item.reps,
" - ",
item.comment,
" - ",
item.uid
)
);
});
return React.createElement(
"div",
{ className: "col-xs-12" },
myItems
);
}
});
// App render
ReactDOM.render(React.createElement(App, null), document.getElementById('root'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment