<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>Pizza Slice Calculator</title>
	<link rel='stylesheet' type='text/css' href='style.css'/>
	</script>
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="about">
<h3>About</h3>
    <ul>
      <li>Tired of always getting the small slices of a pizza?</li>
      <li>Ever wanted to share a pizza equally?</li>
      <li>Take back your right to equally cut slices with the <u>equal pizza slice calculator</u>!</li>
	  <li>Just select the size of your pizza and the number of slices you'd like to have.</li>
	  <li>The equal pizza slice calculator will give you a neat preview of your pizza, its slices and even the correct angle to cut your slices.</li>
	  <li>YAY right?! You BET!</li>
    </ul>

</div>
<div id="calculator">	
	<table>
		<tr>
            <td>		
				<strong>Choose your pizza size! </strong>
				<br>
				<input type="radio" name="pizzaSize" value="s" onchange="loadPizzaImg(this);">Small(12")
				<br>
				<input type="radio" name="pizzaSize" value="m" onchange="loadPizzaImg(this);">Medium(14")
				<br>
				<input type="radio" name="pizzaSize" value="l" onchange="loadPizzaImg(this);">Large(16")
				<br>
				<input type="radio" name="pizzaSize" value="xl" onchange="loadPizzaImg(this);">Extra Large(18")
				<br><br>
				<strong>How many slices?</strong>
				<br>
				<input type="text" id="slices">
				<br>
				<button id="drawPizza" onclick="drawPizzaSlices();">Calculate</button>	
				<button id="reset" onclick="reset();">Reset</button>	
			</td>
			<td>
				<canvas id="canvas" width="400" height="400">
                This text is displayed if your browser does not support HTML5 Canvas.
				</canvas>    
				<script type='text/javascript' src='script.js'>
				</script>
				<div style="display: none;">
				<img id="pizza" src="http://s27.postimg.org/hc7lwg36b/pizza.png">
				<img id="pizzaPan" src="http://s11.postimg.org/3lqzi61eb/pizza_Pan.png">
			<div>
			</td>
		</tr>
	</table>
	</div>
<div id="notice">
<h3>Notice</h3>
	<p>
	Please measure your slices properly before cutting; use a <a href="http://www.mathsisfun.com/geometry/full-rotation.html" target="blank">protractor</a>!
	<u>Equal pizza slice calculator</u> is not responsible for any unequally cut slices.
	</p>
</div>
<div id="footer">
<div id="sources" onclick="expandCollapse();"> Sources </div>
<br>
http://lyndonarmitage.com/making-an-analog-clock-using-the-html5-canvas-tag/
<br>
http://www.mathsisfun.com/geometry/radians.html
<br>
http://www.mathsisfun.com/geometry/circle-sector-segment.html
<br>
http://www.mathsisfun.com/geometry/full-rotation.html
<br>
http://www.w3schools.com/tags/ref_canvas.asp
<br>
https://developer.mozilla.org/en-US/docs/HTML/Canvas
<br>
http://www.html5canvastutorials.com/tutorials/html5-canvas-images/

</div>
</div>

</body>
</html>
<!--/*Copyright © 2013 Dimitrios Kanavaros*/ -->
canvas {
    border: 1px dotted black;
}

body
{
    background-image:url('http://s30.postimg.org/lytg9r19t/pizza_Oven.jpg');
	background-repeat:no-repeat;
	background-color:#000000;
	font-family: Verdana, sans-serif;
}

div {
	border-radius: 5px;
}

ul{
    list-style:none;
    margin:0 0 1em 15px;
    padding: 0;
}
ul li:before{
    line-height:1.3em;
    margin: .25em 0;
    padding: 0 0 0 0px;
	content: "\0BB \020";
}


#header {
	z-index: 1;
	position: relative;
	margin-top: -20px;
	height: 100px;
	margin-bottom: 10px;
	margin-left: 10px;
	background-image:url('http://s15.postimg.org/5x6n73y87/logo.png');
	background-repeat:no-repeat;
}

#about{
	position: relative;
	float: left;
	width: auto;
	height: auto;
	margin-bottom: 5px;
	margin-left: 10px;
	padding-left: 10px;
	color:#FFFFFF;
}

#calculator{
	position: relative;
	clear:both;
	width: 620px;
	height: 410px;
	margin-bottom: 5px;
	margin-left: 10px;
	padding-left: 10px;
	background-color: #FFFFFF;
}

#notice {
	position: relative;
	float: left;
	width: auto;
	height: auto;
	margin-bottom: 5px;
	margin-left: 10px;
	padding-left: 10px;
	color:#FFFFFF;
}

#footer {
	position: relative;
	height: 20px;
	background-color: #668284;
	width: 98.3%;
	float: left;
	font-family: Verdana, sans-serif;
	margin-left: 10px;
	font-size: 14px;
	text-align: center;
	color: #ffffff;
	overflow:hidden;
}

#copy {
	position: relative;
	height: 20px;
	background-color: #668284;
	width: 98.3%;
	float: left;
	font-family: Verdana, sans-serif;
	margin-left: 10px;
	font-size: 14px;
	text-align: center;
	color: #ffffff;
	overflow:hidden;
}

#sources{
cursor:pointer;
}

a:link {color:#FFEE00;;}    /* unvisited link */
a:visited {color:#FFEE00;} /* visited link */
a:hover {color:#FFFFFF;}   /* mouse over link */
a:active {color:#FFFFFF;}  /* selected link */


/*Copyright © 2013 Dimitrios Kanavaros*/
var canvas = document.getElementById('canvas');
//declare the type of canvas, the context can be 2D or 3D
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;


function expandCollapse(){
var footer = document.getElementById("footer");
	if (footer.clientHeight == 20){
		footer.style.height = 'auto';
	}
	else{
	footer.style.height = '20px';
	}
}

window.onload=function(){  
drawPan();
};

function loadPizzaImg(pizzaSize){
var retunedSize;
var imgPizza=document.getElementById("pizza");

if (isNaN(pizzaSize)){
retunedSize = pizzaSize.value;
}
else{
retunedSize = pizzaSize;
}

switch(retunedSize){
	case "s":
	case 12:
		clearCanvas();
		drawPan();
		context.drawImage(imgPizza,80, 80,240,240);	
		focusOnInput();
		break;
	case "m":
	case 14:
		clearCanvas();
		drawPan();
		context.drawImage(imgPizza, 60, 60,280,280);
		focusOnInput();
		break;
	case "l":
	case 16:
		clearCanvas();
		drawPan();
		context.drawImage(imgPizza, 40, 40,320,320);
		focusOnInput();
		break;
	case "xl":
	case 18:
		clearCanvas();
		drawPan();
		context.drawImage(imgPizza, 20, 20,360,360);
		focusOnInput();
		break;
	default:
		break;			
}
}

function clearCanvas()
{
    context.clearRect(0, 0, canvas.width, canvas.height);
}

function drawPan()
{
	var imgPizzaPan=document.getElementById("pizzaPan");
    context.drawImage(imgPizzaPan, 0, 0,400,400);
}

function focusOnInput()
{
    document.getElementById("slices").focus();	
}
	
function reset(){
var radios = document.getElementsByTagName('input');
var value;

for (var i = 0; i < radios.length; i++) {
    if (radios[i].type === 'radio') {
		radios[i].checked = false;
	}
}
	
	 document.getElementById("slices").value = "";	
 
}
	
function drawPizzaSlices(){
//Initialize Variables
var selectedSize = getPizzaSize();
var slices = document.getElementById("slices");
var radius = selectedSize * 10;
// we use theta(i.e. theta = angle * Math.PI) in the code, what it does convert angles to radian units //See http://www.mathsisfun.com/geometry/radians.html
var numberOfSlices = slices.value.trim();
//There are 360 degrees in a circle(i.e. a pizza). 
//For example a circle with 4 slices we calculate the number of degrees per slice as follows 360degrees/4slices = 90 degrees/per slice.
var degreePerSlice = (360/numberOfSlices);

validateSliceValue(numberOfSlices);
loadPizzaImg(selectedSize);
drawCircumference(centerX,centerY,radius);
drawSlices(radius,degreePerSlice);

function validateSliceValue(numSlice){
var isNotNum = isNaN(numSlice)
	if (isNotNum){
		alert("Slices are numbers only");
	}
}

function getPizzaSize(){
var radios = document.getElementsByTagName('input');
var value;
for (var i = 0; i < radios.length; i++) {
    if (radios[i].type === 'radio' && radios[i].checked) {
		switch(radios[i].value){
			case "s":
				return 12;
				break;
			case "m":
				return 14;
				break;
			case "l":
				return 16;
				break;
			case "xl":
				return 18;
				break;
			default:
				break;
		}	
    }
}
}

function drawCircumference(x,y,r){	
	context.save();
	context.beginPath();
	//.arc(x, y, radius, startAngle, endAngle)
	context.arc(x,y,radius,0,2 * Math.PI);
	context.stroke();

	//if the pizza will be split into 2 slices or more add the starting cut
	if (numberOfSlices >= 2 ){
		context.save();//Saves the state of the current context
		context.beginPath();
		context.translate(centerX, centerY); //Remaps the (0,0) position on the canvas
		context.rotate(-90 * Math.PI/180);// 1st cut position
		context.moveTo(0, 0);
		context.lineTo(0, radius);
		context.strokeStyle="#FFFFFF";
		context.stroke();
		context.restore();
	}
}

function drawSlices(radius, angle){
	if (numberOfSlices >= 2 ){
		context.save();//Saves the state of the current context
		context.beginPath();
		//display angle per slice on top left of canvas
		context.font="12px Arial";
		context.fillText(angle.toFixed(2)+ "°/pizza slice",5,15);
		//draw the slices
		context.translate(centerX, centerY); //Remaps the (0,0) position on the canvas
		context.rotate(-90 * Math.PI/180);// 1st cut position
		do{//loops to add the remaining cuts to create the slices
			context.rotate(-angle * Math.PI/180); //Rotates the current drawing
			context.moveTo(0, 0);
			context.lineTo(0, radius);
			numberOfSlices --;
		}while (numberOfSlices >= 2) ; 
		context.strokeStyle="#FFFFFF";
		context.stroke();

	context.restore();
	}
}
}
//Copyright © 2013 Dimitrios Kanavaros

Created from scratch
261 forks
34151 views

Browse more Codebits