Using jQuery to require user to press every letter and number on keyboard

Question

I need to use jQuery to create a game that requires the user to press every letter and number on the keyboard.

I started by creating an array with 26 letters and 10 numbers and displayed them on the screen. This should be done using a jQuery to append to the DOM once, not doing a separate append for each letter. When a user presses a key, I need to check if its been pressed or not. If it has been pressed, grey out the letter or number. If the key was pressed before, let the user know. Once all the characters have been pressed, I need to let the user know they won the game, the message should be shown using jQuery.

This is all the code I have so far to display the letters on the DOM, I don't really know where to go from here:

var array = [];
var func = function(num1,num2){

    for(var i = num1; i <= num2; i++){
        array.push(String.fromCharCode(i));
    }

  for(var i = 0; i < array.length; i++){
  array[i].className= array[i];
  }
    return(array);
}

func(65,90)
func(48,57)
String.fromCharCode(65,66,67,68)

var para = document.createElement("p");
para.innerHTML=array
document.body.appendChild(para);

Answer 1

Here is one way to achieve what you want:

Assuming an html file with:

<div id="board"></div>
<div id="log"></div>

The corresponding javascript code:

var array = [];
var func = function(num1,num2){
    for(var i = num1; i <= num2; i++){
        array.push(i);
    }
}

func(65,90)
func(48,57)
array = [].concat(array, [65,66,67,68])
console.clear()
console.log(array)

var buttons = []
array.forEach(function(item) {
  // create a button with the charcode, and an id
  var btn = $('<button>').html(String.fromCharCode(item)).prop('id', item)
  buttons.push(btn)
})
// appending all elements at once to the board as per your specification
$('#board').append(buttons)

var pressed = []
// listenning on window 'keypress' event
$(document).on('keypress', function(ev) {
  console.log(ev)
  if(ev.hasOwnProperty('charCode') || ev.hasOwnProperty('keyCode')) {
    // get the charcode pressed
    var code = ev.charCode || ev.keyCode;
    // quit  if code has already been pressed
    if(pressed.indexOf(code) > -1) return;
    pressed.push(code); // adding the code to the pressed array
    // changing button color
    $('#' + code).css({'color': 'red', 'background-color': 'grey'});
    $('#' + code).prop('disabled', 'disabled');
    $("#log").html(array.length - pressed.length + ' remaining')
  }
})

With a nice fiddle !

Edit : Shorter version

See Updated fiddle

Css file:

.disabled {
  color: red;
  background-color: gray
}

Html file:

<div id="board"></div>

Js file:

var array = []
var func = function(num1,num2){
    for(var i = num1; i <= num2; i++){
        // create a button with the charcode, and an id
        var btn = $('<button>').html(String.fromCharCode(i)).prop('id', i)
  array.push(btn)
    }
}
func(65,90)
func(48,57)

// appending button to the board
$('#board').append(array)

var pressed = []
// listenning on window 'keypress' event
$(document).on('keypress', function(ev) {
    // get the charcode pressed
    var code = ev.charCode || ev.keyCode || 0;
    if(pressed.indexOf(code) > -1) return
    // quit  if code has already been pressed
    pressed.push(code); // adding the code to the pressed array
    // changing button color via css class
    $('#' + code).addClass('disabled')
})

Answer 2

Another answer, a little closer to the original code, and also meets the original requirement of adding all the letters at once.

needs a css tag:

.gray {color:gray;}

And here's the javascript:

var array = [];
var func = function(num1,num2){

    for(var i = num1; i <= num2; i++){
         var ch = String.fromCharCode(i);
        array.push('<span id="char-'+ch.toLowerCase()+'">'+ch+'</span>');
    }

  for(var i = 0; i < array.length; i++){
  array[i].className= array[i];
  }
    return(array);
}

func(65,90)
func(48,57)
String.fromCharCode(65,66,67,68)

var para = document.createElement("p");
para.innerHTML=array
document.body.appendChild(para);

$(document).keypress(function(e){
    if(/[a-z0-9]/i.test(e.key)) {
        $('#char-'+e.key.toLowerCase()).addClass('gray');
    }
});

and a fiddle

Just a quick note on a couple of things: you need a tag around each letter, otherwise you can't gray it out. Other than that, it's just a matter of attaching the keypress listener, and then finding and graying out the chars.