Skip to content

Instantly share code, notes, and snippets.

@piersroberts

piersroberts/Pizza Calculator

Created January 4, 2015 00:13
Show Gist options
  • Save piersroberts/689ba313b8818fbc3522 to your computer and use it in GitHub Desktop.
Save piersroberts/689ba313b8818fbc3522 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Pizza Calculator
<html>
<head>
<title>Pizza Calculator</title>
<meta name="viewport" content="width=device-width">
<script src="http://fb.me/react-0.12.2.js"></script>
</head>
<body>
<h1>Pizza Calculator</h1>
<div id="pizzaCalculator"></div>
<script>
var NumberOfPeople = React.createClass({
displayName:'NumberOfPeople',
updateTotals:function(event){
this.setState({value: event.target.value});
this.props.changeHandler('numberOfPeople',event.target.value);
},
getInitialState: function() {
return {value: this.props.numberOfPeople};
},
render: function() {
return React.DOM.div(
{},
React.DOM.label({
htmlFor:'numberOfPeople'
},'Number of people'),
React.DOM.input({
id:'numberOfPeople',
className:'number-of-people',
value:this.state.value,
onChange:this.updateTotals
}));
}
});
var NumberOfPizzas = React.createClass({
displayName:'NumberOfPizzas',
updateTotals:function(event){
this.setState({value: event.target.value});
this.props.changeHandler('numberOfPizzas',event.target.value);
},
getInitialState: function() {
return {value: this.props.numberOfPizzas};
},
render: function() {
return React.DOM.div(
{},
React.DOM.label({
htmlFor:'numberOfPizzas'
},'Number of pizzas'),
React.DOM.input({
id:'numberOfPizzas',
className:'number-of-pizzas',
value:this.state.value,
onChange:this.updateTotals
}));
}
});
var NumberOfSlices = React.createClass({
displayName:'NumberOfSlices',
updateTotals:function(event){
this.setState({value: event.target.value});
this.props.changeHandler('numberOfSlices',event.target.value);
},
getInitialState: function() {
return {value: this.props.numberOfSlices};
},
render: function() {
return React.DOM.div(
{},
React.DOM.label({
htmlFor:'numberOfSlices'
},'Number of slices'),
React.DOM.input({
id:'numberOfSlices',
className:'numberOfSlices',
value:this.state.value,
onChange:this.updateTotals
}));
}
});
var SizeOfPizzas = React.createClass({
displayName:'SizeOfPizzas',
updateTotals:function(event){
this.setState({value: event.target.value});
this.props.changeHandler('sizeOfPizzas',event.target.value);
},
getInitialState: function() {
return {value: this.props.sizeOfPizzas};
},
render: function() {
return React.DOM.div(
{},
React.DOM.label({
htmlFor:'sizeOfPizzas'
},'Diameter of pizza'),
React.DOM.input({
id:'sizeOfPizzas',
className:'size-of-pizzas',
value:this.state.value,
onChange:this.updateTotals
}));
}
});
var TotalCost = React.createClass({
displayName:'TotalCost',
updateTotals:function(event){
this.setState({value: event.target.value});
this.props.changeHandler('totalCost',event.target.value);
},
getInitialState: function() {
return {value: this.props.totalCost};
},
render: function() {
return React.DOM.div(
{},
React.DOM.label({
htmlFor:'totalCost'
},'Total cost'),
React.DOM.input({
id:'totalCost',
className:'total-cost',
value:this.state.value,
onChange:this.updateTotals
}));
}
});
var CostPerPizza = React.createClass({
render: function() {
return React.DOM.div({},'Cost per pizza '+(this.props.totalCost/this.props.numberOfPizzas).toFixed(2))
}
});
var CostPerSlice = React.createClass({ render: function() {
return React.DOM.div({},'Cost per slice '+(this.props.totalCost/this.props.numberOfPizzas/this.props.numberOfSlices).toFixed(2))
}
});
var CostPerPerson = React.createClass({ render: function() {
return React.DOM.div({},'Cost per person '+(this.props.totalCost/this.props.numberOfPeople).toFixed(2))
}
});
var TotalArea = React.createClass({ render: function() {
var totalArea = this.props.numberOfPizzas * Math.PI * Math.pow(this.props.sizeOfPizzas/2,2);
return React.DOM.div({},'Total area '+ totalArea.toFixed(2))
}
});
var AreaPerPerson = React.createClass({ render: function() {
var totalArea = this.props.numberOfPizzas * Math.PI * Math.pow(this.props.sizeOfPizzas/2,2);
return React.DOM.div({},'Area per person '+(totalArea/this.props.numberOfPeople).toFixed(2))
}
});
var SlicesPerPerson = React.createClass({ render: function() {
return React.DOM.div({},'Slices per person '+((this.props.numberOfPizzas*this.props.numberOfSlices)/this.props.numberOfPeople).toFixed(2))
}
});
var CostPerArea = React.createClass({
render:function(){
var totalArea = this.props.numberOfPizzas * Math.PI * Math.pow(this.props.sizeOfPizzas/2,2);
return React.DOM.div({},'Cost per area '+(this.props.totalCost/totalArea).toFixed(2))
}
}
);
var PizzaForm = React.createClass({
displayName:'PizzaForm',
updateCalculations: function(stateName,value){
var state = this.state;
this.state[stateName] = value;
this.setState(state)
},
getInitialState: function() {
return {
numberOfPeople:1,
numberOfPizzas:1,
sizeOfPizzas:12,
totalCost:15,
numberOfSlices:8,
totalArea:1
};
},
render : function(){
return React.DOM.form(
null,
React.createElement(NumberOfPizzas,{numberOfPizzas:this.state.numberOfPizzas,changeHandler:this.updateCalculations}),
React.createElement(SizeOfPizzas,{sizeOfPizzas:this.state.sizeOfPizzas,changeHandler:this.updateCalculations}),
React.createElement(TotalCost,{totalCost:this.state.totalCost,changeHandler:this.updateCalculations}),
React.createElement(CostPerPizza,{numberOfPizzas:this.state.numberOfPizzas,totalCost:this.state.totalCost}),
React.createElement(CostPerSlice,{numberOfSlices:this.state.numberOfSlices,numberOfPizzas:this.state.numberOfPizzas,totalCost:this.state.totalCost}),
React.createElement(CostPerPerson,{numberOfPeople:this.state.numberOfPeople,totalCost:this.state.totalCost}),
React.createElement(TotalArea,{numberOfPizzas:this.state.numberOfPizzas,sizeOfPizzas:this.state.sizeOfPizzas}),
React.createElement(AreaPerPerson,{numberOfPizzas:this.state.numberOfPizzas,sizeOfPizzas:this.state.sizeOfPizzas,numberOfPeople:this.state.numberOfPeople}),
React.createElement(SlicesPerPerson,{numberOfPizzas:this.state.numberOfPizzas,numberOfSlices:this.state.numberOfSlices,numberOfPeople:this.state.numberOfPeople}),
React.createElement(CostPerArea,{numberOfPizzas:this.state.numberOfPizzas,sizeOfPizzas:this.state.sizeOfPizzas,totalCost:this.state.totalCost}),
React.createElement(NumberOfPeople,{numberOfPeople:this.state.numberOfPeople,changeHandler:this.updateCalculations}),
React.createElement(NumberOfSlices,{numberOfSlices:this.state.numberOfSlices,changeHandler:this.updateCalculations})
);
}
})
React.render(React.createElement(PizzaForm),document.getElementById('pizzaCalculator'));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment