button toggler

toggles buttons with 10 second timeout

by Cody Dhein

HTML

<table name="key display">
			<tr>
				<td class="key" id="7">7<span id="counter7"></span></td>
				<td class="key"id="8">8<span id="counter8"></span></td>
				<td class="key"id="9">9<span id="counter9"></span></td>
			</tr>
			<tr>
				<td class="key"id="4">4<span id="counter4"></span></td>
				<td class="key"id="5">5<span id="counter5"></span></td>
				<td class="key"id="6">6<span id="counter6"></span></td>
			</tr>	
			<tr>
				<td class="key"id="1">1<span id="counter1"></span></td>
				<td class="key"id="2">2<span id="counter2"></span></td>
				<td class="key"id="3">3<span id="counter3"></span></td>
			</tr>				
			<tr>
				<td class="key"id="0">0<span id="counter1"></span></td>
			</tr>
		</table>

CSS

.key{
	
	width: 50px;
	height: 50px;
	border: 1px solid black;
	padding: 5px;
	text-align: center;
}	

span{
	margin:0;
	display: block;
}

JavaScript

var key0 = {keyName : "0", toggled : 0};
var key1 = {keyName : "1", toggled : 0};
var key2 = {keyName : "2", toggled : 0};
var key3 = {keyName : "3", toggled : 0};
var key4 = {keyName : "4", toggled : 0};
var key5 = {keyName : "5", toggled : 0};
var key6 = {keyName : "6", toggled : 0};
var key7 = {keyName : "7", toggled : 0};
var key8 = {keyName : "8", toggled : 0};
var key9 = {keyName : "9", toggled : 0};

var keys = [key0, key1, key2, key3, key4, key5, key6, key7, key8, key9];
	
	document.body.addEventListener('keypress', function(event){
		var key = parseInt(String.fromCharCode(event.charCode));	
		if(isNaN(key))
			console.log("non-number");
		else{
			keyTrigger(key);			
			var countDisplay = $("#counter"+key);
			var count = 11;
			var intervalId = setInterval(function(){
				count--;				
				console.log(count);
				countDisplay.text(count);

				if(count === 0){
					window.clearInterval(intervalId);
					keyTrigger(key);				
					countDisplay.text("");					
				}
			}, 1000);
		}
		
	});
	



function keyTrigger(key){
	var toTrigger = keys[key];
	console.log(toTrigger.toggled);
	if(toTrigger.toggled){
		$("#" + toTrigger.keyName).css("background-color", "white");
		keys[key].toggled = 0;
	}else{
		$("#" + toTrigger.keyName).css("background-color", "red");		
		keys[key].toggled = 1;		
	}
}