added timer

clock/alarm.js

@@ -27,6 +27,37 @@ Alarm.prototype.create = function() {
 	this.startTick();
 }
 
+//Method to draw the number
+Clock.prototype.drawText = function(hour, minute, second) {
+	for (var i = 0; i < 12; i++) {
+		this.context.save();
+		this.context.translate(this.config.container.width/2, this.config.container.height/2);
+		this.context.rotate(Math.PI * (2.0 * (i/12) - 0.5));
+		this.context.translate(this.config.face.radius - 24, 0);
+		this.context.rotate((Math.PI * (2.0 * (i/12) - 0.5) * -1));
+
+		var alpha = this.config.unit.major.alpha;
+
+		if (i === 0)
+			var textValue = 12;
+		else
+			var textValue = i;
+
+		this.context.globalAlpha = alpha;
+
+		this.context.fillStyle = this.config.unit.major.color;
+		this.context.shadowOffsetX = 1;
+		this.context.shadowOffsetY = 1;
+		this.context.shadowColor = "rgba(0, 0, 0, 0.8)";
+		this.context.font = "500 13px 'Open Sans'";
+		this.context.textBaseline = 'middle';
+		this.context.textAlign = "center";
+
+		this.context.fillText(textValue, 0, 0);
+		this.context.restore();
+	}
+}
+
 //Method to fire each second and redraw the clock
 Alarm.prototype.tick = function() {
  	this.drawClock(this.hour, this.minute, 0);

clock/clock.js

@@ -1,14 +1,14 @@
 Clock = function(id, offset) {
 
 	this.config = {
-		container: {height: 170, width: 170},
-		face: {color: '#424240', alpha: 1, radius: 70},
-		hourHand: {color: '#4d90fe', alpha: 1, length: 35, width: 3},
-		minuteHand: {color: '#4d90fe', alpha: 1, length: 45, width: 3},
+		container: {height: 330, width: 330},
+		face: {color: '#424240', alpha: 1, radius: 120},
+		hourHand: {color: '#4d90fe', alpha: 1, length: 70, width: 4},
+		minuteHand: {color: '#4d90fe', alpha: 1, length: 90, width: 4},
 		unit: {
-			major: {color: '#f5f5f5', alpha: 0.4, length: 7, width: 4},
-			mid: {color: '#f5f5f5', alpha: 0.4, length: 5, width: 2},
-			minor: {color: '#f5f5f5', alpha: 0.4, length: 5, width: 1}
+			major: {color: '#f5f5f5', alpha: 0.4, length: 8, width: 6},
+			mid: {color: '#f5f5f5', alpha: 0.4, length: 8, width: 4},
+			minor: {color: '#f5f5f5', alpha: 0.4, length: 8, width: 2}
 		}
 	};
 	this.tickId;
@@ -142,26 +142,19 @@ Clock.prototype.drawText = function(hour, minute, second) {
 		this.context.save();
 		this.context.translate(this.config.container.width/2, this.config.container.height/2);
 		this.context.rotate(Math.PI * (2.0 * (i/12) - 0.5));
-		this.context.translate(this.config.face.radius - 16, 0);
+		this.context.translate(this.config.face.radius - 24, 0);
 		this.context.rotate((Math.PI * (2.0 * (i/12) - 0.5) * -1));
 
 		var alpha = this.config.unit.major.alpha;
 
-		if (i == 0) j = 11;
+		if (i === 0) j = 11;
 		else j = i - 1;
+		var textValue = '';
 		if ((hour % 12) === i) {
-			alpha += ((60 - minute)/60) * (1-this.config.unit.major.alpha);
+			alpha += (1-this.config.unit.major.alpha);
+			if (i === 0) textValue = 12;
+			else textValue = i;
 		}
-		if ((hour % 12) === j) {
-			alpha += (minute/60) * (1-this.config.unit.major.alpha);
-		}
-
-		// if (i <= minute / 5.0 && minute / 5.0 < i + 1) {
-		// 	alpha += ((5 - minute % 5) / 5) * (1-this.config.unit.major.alpha);
-		// }
-		// if (i >= minute / 5.0 && minute / 5.0 > j) {
-		//  	alpha += ((minute % 5) / 5) * (1-this.config.unit.major.alpha);
-		// }
 
 		this.context.globalAlpha = alpha;
 
@@ -169,19 +162,10 @@ Clock.prototype.drawText = function(hour, minute, second) {
 		this.context.shadowOffsetX = 1;
 		this.context.shadowOffsetY = 1;
 		this.context.shadowColor = "rgba(0, 0, 0, 0.8)";
-		this.context.font = "600 10px 'Open Sans'";
+		this.context.font = "500 13px 'Open Sans'";
 		this.context.textBaseline = 'middle';
 		this.context.textAlign = "center";
 
-		var textValue;
-
-		if (i === 0) {
-			textValue = 12;
-		}
-		else {
-			textValue = i;
-		}
-
 		this.context.fillText(textValue, 0, 0);
 		this.context.restore();
 	}

clock/index.html

@@ -30,12 +30,12 @@
 			</div>
 			<div class="alarm hidden">
 				<div class="new hidden">
+					<canvas class="clock"></canvas>
 					<div class="new-input">
 						<input type="text" id="new-alarm-name" />
-						<input type="text" id="new-alarm-hour" />:
+						<input type="text" id="new-alarm-hour" />
 						<input type="text" id="new-alarm-minute" />
 						<input type="text" id="new-alarm-noon" /><br>
-						<div class="error-message hidden"></div>
 						<div class="button add">Add</div>
 						<div class="button cancel">Cancel</div>
 					</div>
@@ -44,9 +44,13 @@
 			<div class="timer hidden">
 				<div class="timer-clock">
 					<canvas class="clock"></canvas>
-					<div class="button start">START</div>
+					<input type="text" id="timer-minute" />
+					<input type="text" id="timer-second" />
+					<br>
+					<div class="button start disabled">START</div>
 					<div class="button stop hidden">STOP</div>
-					<div class="button reset">RESET</div>
+					<div class="button reset hidden">RESET</div>
+					<div class="button set">SET</div>
 				</div>
 			</div>
 			<div class="stopwatch hidden">

clock/manifest.json

@@ -2,10 +2,11 @@
 	"name": "World Clock",
 	"version": "0.0.1",
 	"manifest_version": 2,
+	"minimum_chrome_version": "23",
 	"description": "A world clock application.",
 	"icons": {
-		"16": "assets/clock-16.png",
-		"128": "assets/clock-128.png"
+		"16": "assets/icon.png",
+		"128": "assets/icon.png"
 	},
 	"app": {
     "background": {

clock/script.js

@@ -102,6 +102,50 @@ $(document).ready(function() {
 		$('.alarm .new').addClass('hidden');
 	});
 
+	$('.timer .button.start').click(function() {
+		if (!$(this).hasClass('disabled')) {
+			timer.startTiming();
+			$('.timer .button.start').addClass('hidden');
+			$('.timer .button.stop').removeClass('disabled');
+			$('.timer .button.stop').removeClass('hidden');
+		}
+	});
+
+	$('.timer .button.stop').click(function() {
+		timer.stopTiming();
+		$('.timer .button.start').removeClass('hidden');
+		$('.timer .button.stop').addClass('hidden');
+	});
+
+	$('.timer .button.set').click(function() {
+		var minute = parseInt($('#timer-minute').val());
+		var second = parseInt($('#timer-second').val());
+		if (isNaN(minute)) {
+			minute = 0;
+			$('#timer-minute').val('00');
+		} if (isNaN(second)) {
+			second = 0;
+			$('#timer-second').val('00');
+		}
+		$('.timer .button.start').removeClass('disabled');
+		timer.setWatch(minute, second);
+		$('.timer #timer-minute').addClass('disabled');
+		$('.timer #timer-second').addClass('disabled');
+		$('.timer .button.set').addClass('hidden');
+		$('.timer .button.reset').removeClass('hidden');
+	});
+
+	$('.timer .button.reset').click(function() {
+		$('.timer .button.start').removeClass('hidden');
+		$('.timer .button.stop').addClass('hidden');
+		$('.timer .button.start').addClass('disabled');
+		timer.resetWatch();
+		$('.timer #timer-minute').removeClass('disabled');
+		$('.timer #timer-second').removeClass('disabled');
+		$('.timer .button.set').removeClass('hidden');
+		$('.timer .button.reset').addClass('hidden');
+	});
+
 	$('.stopwatch .button.start').click(function() {
 		stopwatch.startTiming();
 		$('.stopwatch .button.start').addClass('hidden');
@@ -193,6 +237,8 @@ function setupClocks() {
 }
 
 function setupAlarms() {
+	var alarm = new Alarm('new', 'new', 0, 0, 0);
+	alarm.create();
 	for (var id in alarms) {
 		addAlarm(id);
 	}
@@ -298,6 +344,11 @@ function addAlarmClock() {
 	var name = $('#new-alarm-name').val();
 	var hour = parseInt($('#new-alarm-hour').val());
 	var minute = parseInt($('#new-alarm-minute').val());
+	if (isNaN(hour)) {
+		hour = 12;
+	} if (isNaN(minute)) {
+		minute = 0;
+	}
 	var noon = $('#new-alarm-noon').val();
 	if (noon.toLowerCase() == 'pm' && hour != 12) hour += 12;
 	else if (noon.toLowerCase() == 'am' && hour == 12) hour -= 12;

clock/style.css

@@ -1,5 +1,5 @@
 body {
-  background: #fff;
+  background: #f5f5f5;
   color: #222;
   font-family: "Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
   font-size: 13px;
@@ -104,19 +104,13 @@ input[type=text].form-error{
 #container .timer,
 #container .stopwatch {
 	top: 50%;
-	margin-top: -125px;
-	min-height: 250px;
+	margin-top: -175px;
+	min-height: 350px;
 	position: absolute;
 	text-align: center;
 	width: 100%;
 }
 
-#container .timer,
-#container .stopwatch {
-	height: 300px;
-	margin-top: -150px;
-}
-
 #container .world .city-clock,
 #container .world .new,
 #container .alarm .alarm-clock,
@@ -130,11 +124,12 @@ input[type=text].form-error{
 
 .world .city-clock .clock,
 .word .new .clock,
-.alarm .alarm-clock .clock {
+.alarm .alarm-clock .clock,
+.alarm .new .clock {
 	display: block;
-	height: 170px;
+	height: 240px;
 	position: relative;
-	width: 170px;
+	width: 240px;
 }
 
 .timer .clock,
@@ -148,17 +143,18 @@ input[type=text].form-error{
 }
 
 .world .new .new-input {
-	text-align: left;
+	text-align: center;
 	margin-left: 15px;
 	position: absolute;
-	top: 160px;
+	top: 50%;
+	margin-top: 120px;
 }
 
 .alarm .new .new-input {
 	text-align: left;
 	margin-left: 15px;
 	position: relative;
-	height: 250px;
+	height: 220px;
 	vertical-align: middle;
 }
 
@@ -172,26 +168,19 @@ input[type=text].form-error{
 	display: none;
 }
 
-.world .city-clock .city {
-	display: block;
-	font-weight: bold;
-}
-
-.world .city-clock .time,
-.world .city-clock .day {
-	display: inline-block;
-	font-size: 11px;
-	padding: 1px;
-}
-
+.world .city-clock .city,
 .alarm .alarm-clock .name {
 	display: block;
 	font-weight: bold;
+	font-size: 18px;
+	margin-bottom: 5px;
 }
 
+.world .city-clock .time,
+.world .city-clock .day,
 .alarm .alarm-clock .time {
 	display: inline-block;
-	font-size: 11px;
+	font-size: 14px;
 	padding: 1px;
 }
 
@@ -203,10 +192,12 @@ input[type=text].form-error{
 .alarm .new #new-alarm-minute,
 .alarm .new #new-alarm-noon {
 	display: inline-block;
-	margin-right: 5px;
-	width: 30px;
-	height: 21px;
-	line-height: 19px;
+	margin-right: 0px;
+	margin-left: 0px;
+	width: 41px;
+	height: 29px;
+	line-height: 27px;
+	padding-right: 13px;
 }
 
 .delete {
@@ -233,8 +224,7 @@ input[type=text].form-error{
 }
 
 .timer-clock .button,
-.stopwatch-clock .button,
-.menu-item.button {
+.stopwatch-clock .button {
 	font-weight: normal;
 	letter-spacing: 1px;
 	margin-top: 30px;
@@ -244,6 +234,12 @@ input[type=text].form-error{
 	margin-right: 20px;
 }
 
+.timer-clock .button.reset,
+.timer-clock .button.set,
+.stopwatch-clock .button.reset {
+	margin-right: 0px;
+}
+
 .timer-clock .button:hover,
 .stopwatch-clock .button:hover,
 .menu-item.button:hover {
@@ -258,6 +254,27 @@ input[type=text].form-error{
 	border: 1px solid rgba(0, 0, 0, 0.3);
 }
 
+.timer .button.disabled {
+	opacity: 0.5;
+}
+
+.timer-clock #timer-minute,
+.timer-clock #timer-second {
+	display: inline-block;
+	height: 26px;
+	line-height: 24px;
+	margin-right: 0px;
+	margin-top: 20px;
+	margin-bottom: -10px;
+	width: 35px;
+	opacity: 1;
+}
+
+.timer-clock #timer-minute.disabled,
+.timer-clock #timer-second.disabled {
+	opacity: 0;
+}
+
 #menu {
 	position: absolute;
 	text-align: center;
@@ -293,13 +310,20 @@ input[type=text].form-error{
 	background-size: 24px 24px;
 }
 
-#menu .menu-item.button {
+.menu-item.button {
 	position: static;
+	font-weight: 600;
+	font-size: 11px;
+	letter-spacing: 1px;
 	margin: 0px;
 	margin-left: -48px;
-	min-width: 30px;
-	line-height: 20px;
-	height: 22px;
+	background: #424240;
+	color: #f5f5f5;
+	width: 16px;
+	height: 20px;
+	padding-left: 2px;
+	padding-right: 2px;
+	line-height: 18px;
 }
 
 .menu-item.world:hover {

clock/timer.js

@@ -10,6 +10,10 @@ Timer = function() {
 			minor: {color: '#f5f5f5', alpha: 0.4, length: 8, width: 1}
 		},
 	};
+	this.countdown = new Date(0);
+	this.timing = false;
+	this.minutes = 0;
+	this.seconds = 0;
 
 }
 
@@ -182,18 +186,30 @@ Timer.prototype.stopTiming = function() {
 
 Timer.prototype.resetWatch = function() {
 	this.timing = false;
-	this.time_passed = new Date(0)
-	this.drawClock(0, 0, 0, 0);
+	this.countdown = new Date(0, this.minute, this.second)
+	this.drawClock(0, this.minute, this.second, 0);
+}
+
+Timer.prototype.setWatch = function(minute, second) {
+	this.minute = minute;
+	this.second = second;
+	this.countdown = new Date(0, 0, 0, 0, this.minute, this.second);
+	this.drawClock(0, this.minute, this.second, 0);
 }
 
 //Method to fire ten times each second and redraw the clock
 Timer.prototype.tick = function() {
 	if (this.timing) {
-		this.time_passed.setTime(this.time_passed.getTime() + 100);
-		var minute = this.time_passed.getMinutes();
-		var second = this.time_passed.getSeconds();
-		var millisecond = this.time_passed.getMilliseconds();
+		var minute = this.countdown.getMinutes();
+		var second = this.countdown.getSeconds();
+		var millisecond = this.countdown.getMilliseconds();
 		this.drawClock(0, minute, second, millisecond);
+		if (minute == 0 && second == 0) {
+			this.timing = false;
+			$('.timer .button.stop').addClass('disabled');
+		} else {
+			this.countdown.setTime(this.countdown.getTime() - 100);
+		}
 	}
 }