button toggler
toggles buttons with 10 second timeout
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;
}
}