pizzapi/index.html at master · mikegreen/pizzapi · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
<!DOCTYPE html>
<html lang="en">
  <head>
	<title>pizza-cost-per-square-inch-calculator</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="description" content="">
	<meta name="author" content="">
	<link rel="shortcut icon" href="favicon.ico">

	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
	<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
	<script src="js/bootstrap.min.js"></script>

    <!-- Custom styles for this template -->
    <link href="css/narrow-jumbotron.css" rel="stylesheet">


<script type="text/javascript">
	function calcPizza() {

		// get input fields
		var pizzaSize = document.getElementById("pizzaSizeDD").value;
		var pizzaCost = document.getElementById("pizzaCostDD").value;

		// calcuate area of pizza.
		var pizzaRadius = pizzaSize / 2;
		var pizzaArea = Math.PI * Math.pow(pizzaRadius, 2) ;
		// round to 2 decimals. pizza! not precision!
		pizzaArea = pizzaArea.toFixed(1);

		// calculate size per square inch
		pizzaCost = parseFloat(pizzaCost).toFixed(2);
		var pizzaValue = (pizzaCost / pizzaArea).toFixed(2);

		// calculate pizza per person
		var personEats = 25 // 25 square inches per person, based on advanced calculations
		var pizzaWillFeed = (pizzaArea / personEats).toFixed(1);
		var pizzaWillCost = (pizzaCost / pizzaWillFeed).toFixed(2);

		// calculate pizza per fatty
		var fattyEats = 50 // 25 square inches per person, based on advanced calculations
		var pizzaWillFeedFat = (pizzaArea / fattyEats).toFixed(1);
		var pizzaWillCostFat = (pizzaCost / pizzaWillFeedFat).toFixed(2);

		// update results
		document.getElementById("pizzaValue1").innerHTML = pizzaValue;
		document.getElementById("pizzaSize1").innerHTML = pizzaSize;
		document.getElementById("pizzaCost1").innerHTML = pizzaCost;
		document.getElementById("pizzaArea1").innerHTML = pizzaArea;
		document.getElementById("pizzaWillFeed1").innerHTML = pizzaWillFeed;
		document.getElementById("pizzaWillCost1").innerHTML = pizzaWillCost;
		document.getElementById("pizzaWillFeedF").innerHTML = pizzaWillFeedFat;
		document.getElementById("pizzaWillCostF").innerHTML = pizzaWillCostFat;

		// unhide the results div
		document.getElementById("results").style.display = 'block';
		document.getElementById("msg-enter-price").style.display = 'none';
		$('#stickyButton').show();

		} // end calcPizza function


</script>

	<style>#sizeSlider { margin: 10px; }	</style>

	  <script>
	  $(function() {
	    var select = $( "#pizzaSizeDD" );
	    var slider = $( "<div id='sizeSlider'></div>" ).insertAfter( select ).slider({
	      min: 1,
	      max: 13,
	      range: "min",
	      value: select[ 0 ].selectedIndex + 1,
	      change: calcPizza,
	      slide: function( event, ui ) {
		select[ 0 ].selectedIndex = ui.value - 1;
	      }
	    });
	    $( "#pizzaSizeDD" ).change(function() {
	      slider.slider( "value", this.selectedIndex + 1 );
	    });
	  });
	  </script>

<!-- Google analytics start - we want to know where folks are coming from -->
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-97024037-1', 'auto');
  ga('send', 'pageview');
</script>
<!-- Google analytics end -->

    </head>

    <body>

    <div class="container">
      	<div class="header clearfix">
        	<h3 class="text-muted">pizza-cost-per-square-inch-calculator</h3>
      	</div>
<!--       		<button type="button" id="impButton" class="btn btn-sm btn-default" onclick=(calcPizza(),duplicate()) style="">Imperial</button>
      		<button type="button" id="metButton" class="btn btn-sm btn-default" onclick=(calcPizza(),duplicate()) style="">Metric</button> -->
      		<br>

			Pizza cost:
				<input type="number" pattern="\d+(\.\d*)?" id="pizzaCostDD" size=6 maxlength=5 placeholder="Pizza Cost" onkeyup=calcPizza()>
			<br>

			Pizza size:
				<select autofocus  id="pizzaSizeDD" onchange=calcPizza() >
					<option value="8">8"</option>
					<option value="9">9"</option>
					<option value="10">10"</option>
					<option value="11">11"</option>
					<option value="12">12"</option>
					<option value="13">13"</option>
					<option value="14">14"</option>
					<option value="15">15"</option>
					<option value="16">16"</option>
					<option value="17">17"</option>
					<option value="18">18"</option>
					<option value="19">19"</option>
					<option value="20">20"</option>
					<option value="21">21"</option>
					<option value="22">22"</option>
					<option value="23">23"</option>
					<option value="24">24"</option>
					<option value="25">25"</option>
					<option value="26">26"</option>
					<option value="27">27"</option>
					<option value="28">28"</option>
					<option value="29">29"</option>
					<option value="30">30"</option>
					<option value="42">Reddit-size 42"</option>
					<option value="2000">Frank's 2000" pizza</option>
				</select>

			<div id="msg-enter-price" class="alert alert-success">
						<strong>Enter a pizza cost and we'll calcuate it</strong>
			</div> <!-- end, msg-enter-price -->

			<button type="button" id="stickyButton" class="btn btn-sm btn-default" onclick=(calcPizza(),duplicate()) style="display: none">Make sticky for comparison</button>
			<br>
			<hr>
			<div id="results" style="display: none;">
				<h3>Results</h3>
					<div id="results-detail" class="alert alert-success">
						<strong>$<span id="pizzaValue1">pizzaValue1</span></strong> / sq inch for a <span id="pizzaSize1">pizzaSize1</span>" pizza @ $<span id="pizzaCost1">pizzaCost1</span>
						<br>
						That is <span id="pizzaArea1">pizzaArea1</span> sq inches of pizza and should feed <span id="pizzaWillFeed1">pizzaWillFeed1</span> average people for a cost of $<span id="pizzaWillCost1">pizzaWillCost</span> each.
						<br>
						Or...if your typical serving for pizza is eating an entire 8" pie - it will feed <span id="pizzaWillFeedF">pizzaWillFeedF</span> people for a cost of $<span id="pizzaWillCostF">pizzaWillCostF</span> each.
					</div> <!-- results-detail -->

				<hr>
			</div> <!-- // results -->
			<div id="generate-here">
			</div> <!-- generate-here -->

			<script>
			// down here to be under the element it needs to talk to, to ensure it can find it
			var i = 0;
			var original = document.getElementById("results-detail");

			function duplicate() {
			    var clone = original.cloneNode(true); // "deep" clone
			    clone.id = "results-detail" + ++i;
			    $('#generate-here').prepend(clone);
			    $('#' + clone.id).removeClass( "alert alert-success" );
			    $('#' + clone.id).addClass( "alert alert-info" );
			    var toAppend = '<a class="deleter ui-link" href="javascript:void(0);"><span class="glyphicon glyphicon-remove" style="color: red"></span></a>';
			   $('#' + clone.id).append(toAppend);
			   $('.deleter').on('click', function(){
			  		$(this).closest("div").remove();
					})
			}
			</script>

			<script>
			$('.deleter').on('click', function(){
			  $(this).closest("div").remove();
			})
			</script>

			<br>


			<div  class="panel panel-default">
	            <div class="panel-heading">
	              <h3 class="panel-title">An 8" pizza won't feed 2 people!</h3>
	            </div>
	            <div class="panel-body">
		            What math is this?!
				    <br>
				    It is based on some research (read: 2 minutes of Googling) and serving sizes from some big chains.<br>
					Which yielded... a serving of pizza is around 400-500 calories, or roughly a 5x5" square of pizza.
					<br><br>
				</div>
		    </div>


			<div  class="panel panel-default">
	            <div class="panel-heading">
	              <h3 class="panel-title">Why this calculator?</h3>
	            </div>
	            <div class="panel-body">
		            The math of why bigger pizzas are such a good deal is simple:
				    <br>
				    A pizza is a circle, and the area of a circle increases with the square of the radius.
					<br>
					A 16-inch pizza is actually <i>four times</i> as big as an 8-inch pizza.
					<br>
					<br>
					From:
					<a href="http://www.npr.org/blogs/money/2014/02/26/282132576/74-476-reasons-you-should-always-get-the-bigger-pizza" target="_blank">You Should Always Get The Bigger Pizza</a>
					<br><a href="http://www.npr.org/blogs/money/2014/02/26/282547399/one-reason-to-get-whatever-size-pizza-you-want" target="_blank">...or not...</a>
					<br>
					<br>
					If you find this useful, and want to remember to use it at your next pizza ordering adventure - you can add it to your home screen on your device<br>
				</div>
		    </div>


	</div> <!-- end container -->

	<hr>

	<p style="font-family:arial;color:green;font-size:10px;">
		mike green, 2014, <a href="mailto:nekbet@gmail.com">nekbet@gmail.com</a>
	</p>


  </body>
</html>