Skip to content

Instantly share code, notes, and snippets.

@kenwheeler

kenwheeler/esnextbin.md

Created February 12, 2016 14:30
Show Gist options
  • Save kenwheeler/499008ad9040d52fa21b to your computer and use it in GitHub Desktop.
Save kenwheeler/499008ad9040d52fa21b to your computer and use it in GitHub Desktop.
Download ZIP
esnextbin sketch
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ESNextbin Sketch</title>
<!-- put additional styles and scripts here -->
<style>
label, p {
display: block;
margin: 20px;
}
input {
display: block;
}
</style>
</head>
<body>
<div id="root"></div>
</body>
</html>
Raw
index.js
// write ES2015 code and import modules from npm
// and then press "Execute" to run your program
import React from "react";
import ReactDOM from "react-dom";
// Calories Per Pound Of Fat (kCals)
const POUND = 3500;
const deficit = (a, b, c) => {
let d = parseInt(a) - parseInt(b);
return d + parseInt(c);
};
const poundLoss = (deficit, weeks) => {
return ((deficit * 7) / POUND) * parseInt(weeks);
}
class Unfat extends React.Component {
constructor(props) {
super(props);
this.state = {
TDEE: 2256,
DAILY_CALORIES: 1200,
EXERCISE_CALORIES: 0,
WEEKS: 8
}
}
render() {
const DEFICIT = deficit(
this.state.TDEE,
this.state.DAILY_CALORIES,
this.state.EXERCISE_CALORIES
);
return (
<div>
<form>
<label>
Total Daily Energy Expenditure (kCals)
<input
type="number"
onChange={(e) => this.setState({TDEE: e.target.value})}
value={this.state.TDEE}/>
</label>
<label>
Daily Caloric Intake (kCals)
<input
type="number"
onChange={(e) => this.setState({DAILY_CALORIES: e.target.value})}
value={this.state.DAILY_CALORIES}/>
</label>
<label>
Daily Calories Burned Via Exercise (kCals)
<input
type="number"
onChange={(e) => this.setState({EXERCISE_CALORIES: e.target.value})}
value={this.state.EXERCISE_CALORIES}/>
</label>
<label>
Total Weeks
<input
type="number"
onChange={(e) => this.setState({WEEKS: e.target.value})}
value={this.state.WEEKS}/>
</label>
</form>
<p>Daily Caloric Deficit: {DEFICIT}</p>
<p>{this.state.WEEKS} Week Weight Loss: {poundLoss(DEFICIT, this.state.WEEKS)}lbs</p>
</div>
)
}
}
ReactDOM.render(<Unfat/>, document.getElementById("root"));
Raw
package.json
{
"name": "esnextbin-sketch",
"version": "0.0.0",
"dependencies": {
"react": "0.14.7",
"react-dom": "0.14.7",
"babel-runtime": "6.3.19"
}
}
Raw
transpiled.js
"use strict";
var _getPrototypeOf = require("babel-runtime/core-js/object/get-prototype-of");
var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _createClass2 = require("babel-runtime/helpers/createClass");
var _createClass3 = _interopRequireDefault(_createClass2);
var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require("babel-runtime/helpers/inherits");
var _inherits3 = _interopRequireDefault(_inherits2);
var _react = require("react");
var _react2 = _interopRequireDefault(_react);
var _reactDom = require("react-dom");
var _reactDom2 = _interopRequireDefault(_reactDom);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
// Calories Per Pound Of Fat (kCals)
// write ES2015 code and import modules from npm
// and then press "Execute" to run your program
var POUND = 3500;
var deficit = function deficit(a, b, c) {
var d = parseInt(a) - parseInt(b);
return d + parseInt(c);
};
var poundLoss = function poundLoss(deficit, weeks) {
return deficit * 7 / POUND * parseInt(weeks);
};
var Unfat = (function (_React$Component) {
(0, _inherits3.default)(Unfat, _React$Component);
function Unfat(props) {
(0, _classCallCheck3.default)(this, Unfat);
var _this = (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(Unfat).call(this, props));
_this.state = {
TDEE: 2256,
DAILY_CALORIES: 1200,
EXERCISE_CALORIES: 0,
WEEKS: 8
};
return _this;
}
(0, _createClass3.default)(Unfat, [{
key: "render",
value: function render() {
var _this2 = this;
var DEFICIT = deficit(this.state.TDEE, this.state.DAILY_CALORIES, this.state.EXERCISE_CALORIES);
return _react2.default.createElement(
"div",
null,
_react2.default.createElement(
"form",
null,
_react2.default.createElement(
"label",
null,
"Total Daily Energy Expenditure (kCals)",
_react2.default.createElement("input", {
type: "number",
onChange: function onChange(e) {
return _this2.setState({ TDEE: e.target.value });
},
value: this.state.TDEE })
),
_react2.default.createElement(
"label",
null,
"Daily Caloric Intake (kCals)",
_react2.default.createElement("input", {
type: "number",
onChange: function onChange(e) {
return _this2.setState({ DAILY_CALORIES: e.target.value });
},
value: this.state.DAILY_CALORIES })
),
_react2.default.createElement(
"label",
null,
"Daily Calories Burned Via Exercise (kCals)",
_react2.default.createElement("input", {
type: "number",
onChange: function onChange(e) {
return _this2.setState({ EXERCISE_CALORIES: e.target.value });
},
value: this.state.EXERCISE_CALORIES })
),
_react2.default.createElement(
"label",
null,
"Total Weeks",
_react2.default.createElement("input", {
type: "number",
onChange: function onChange(e) {
return _this2.setState({ WEEKS: e.target.value });
},
value: this.state.WEEKS })
)
),
_react2.default.createElement(
"p",
null,
"Daily Caloric Deficit: ",
DEFICIT
),
_react2.default.createElement(
"p",
null,
this.state.WEEKS,
" Week Weight Loss: ",
poundLoss(DEFICIT, this.state.WEEKS),
"lbs"
)
);
}
}]);
return Unfat;
})(_react2.default.Component);
_reactDom2.default.render(_react2.default.createElement(Unfat, null), document.getElementById("root"));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment