brendo/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
		<title>Virgin Australia - Flight Status Clock</title>
	</head>
	<body>
		<header>
			<form>
				<h2>Flights landing at </h2>
				<select>
					<option value='BNE'>Brisbane</option>
					<option value='SYD'>Sydney</option>
				</select>

				<button>Show me</button>
			</form>
		</header>

		<canvas id='clock' width='500' height='500'>

		</canvas>

		<script type='text/javascript'>

			(function() {
				var canvas = document.getElementById('clock');

				function degreesToRadians(degrees) {
					return degrees * (Math.PI / 180)
				}

				function hoursToDegrees(hours) {
					return (360 / 12) * hours;
				}

				function minutesToDegrees(minutes) {
					return (360 / 60) * minutes;
				}

				var Clock = {
					canvas: undefined,
					draw: function(ctx, data) {
						console.log('tick');
						var date = new Date(),
							h = date.getHours() % 12,
							m = date.getMinutes();


						ctx.clearRect(-250, -250,100, 500);

						// Clockface
						ctx.beginPath();
						ctx.arc(0, 0, 240, 0, Math.PI * 2);
						ctx.fillStyle ='FFF';
						ctx.fill();
						ctx.lineWidth = 10;
						ctx.strokeStyle = 'black';
						ctx.stroke();
						ctx.closePath();

						// Hour hand
						var hr = degreesToRadians(hoursToDegrees(h));
						ctx.beginPath();
						ctx.rotate(hr);
						ctx.moveTo(0, 0);
						ctx.lineTo(0, -245);
						ctx.lineWidth = 5;
						ctx.stroke();
						ctx.closePath();
						ctx.rotate(-hr);

						// Minute hand
						var mr = degreesToRadians(minutesToDegrees(m));
						ctx.beginPath();
						ctx.rotate(mr);
						ctx.moveTo(0, 0);
						ctx.lineTo(0, -245);
						ctx.lineWidth = 5;
						ctx.stroke();
						ctx.closePath();
						ctx.rotate(-mr);

						console.log(mr);

					},
					init: function(canvas) {
						this.canvas = canvas;
						ctx = this.canvas.getContext('2d');

						ctx.translate(250, 250);

						setInterval(function() {
							Clock.draw(ctx);
						}, 10000);
					}
				};

				Clock.init(canvas);
			})();
		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Virgin Australia - Flight Status Clock</title>
	</head>
	<body>
	<header>
	<form>
	<h2>Flights landing at </h2>
	<select>
	<option value='BNE'>Brisbane</option>
	<option value='SYD'>Sydney</option>
	</select>

	<button>Show me</button>
	</form>
	</header>

	<canvas id='clock' width='500' height='500'>

	</canvas>

	<script type='text/javascript'>

	(function() {
	var canvas = document.getElementById('clock');

	function degreesToRadians(degrees) {
	return degrees * (Math.PI / 180)
	}

	function hoursToDegrees(hours) {
	return (360 / 12) * hours;
	}

	function minutesToDegrees(minutes) {
	return (360 / 60) * minutes;
	}

	var Clock = {
	canvas: undefined,
	draw: function(ctx, data) {
	console.log('tick');
	var date = new Date(),
	h = date.getHours() % 12,
	m = date.getMinutes();


	ctx.clearRect(-250, -250,100, 500);

	// Clockface
	ctx.beginPath();
	ctx.arc(0, 0, 240, 0, Math.PI * 2);
	ctx.fillStyle ='FFF';
	ctx.fill();
	ctx.lineWidth = 10;
	ctx.strokeStyle = 'black';
	ctx.stroke();
	ctx.closePath();

	// Hour hand
	var hr = degreesToRadians(hoursToDegrees(h));
	ctx.beginPath();
	ctx.rotate(hr);
	ctx.moveTo(0, 0);
	ctx.lineTo(0, -245);
	ctx.lineWidth = 5;
	ctx.stroke();
	ctx.closePath();
	ctx.rotate(-hr);

	// Minute hand
	var mr = degreesToRadians(minutesToDegrees(m));
	ctx.beginPath();
	ctx.rotate(mr);
	ctx.moveTo(0, 0);
	ctx.lineTo(0, -245);
	ctx.lineWidth = 5;
	ctx.stroke();
	ctx.closePath();
	ctx.rotate(-mr);

	console.log(mr);

	},
	init: function(canvas) {
	this.canvas = canvas;
	ctx = this.canvas.getContext('2d');

	ctx.translate(250, 250);

	setInterval(function() {
	Clock.draw(ctx);
	}, 10000);
	}
	};

	Clock.init(canvas);
	})();
	</script>
	</body>
	</html>