[SOLVED] Crosswords puzzle in html

Crosswords puzzle in html

This little puzzle only accept lowercases.

How do I make it accept both upper and lowercase letters, please?

Or at least make an alert for the user to deactivate the caps lock?

HTML

  <body onload="initializeScreen()">
    <table id="puzzle">
    
    </table>
    
    <input class="butt"  type="submit" value="Check" onclick="checkClicked()">

//Loads the Crossword
function initializeScreen(){
    var puzzleTable = document.getElementById("puzzle");
    puzzleArrayData = preparepuzzleArray();
    for ( var i = 0; i < puzzleArrayData.length ; i++ ) {
        var row = puzzleTable.insertRow(-1);
        var rowData = puzzleArrayData[i];
        for(var j = 0 ; j < rowData.length ; j++){
            var cell = row.insertCell(-1);
            if(rowData[j] != 0){
                var txtID = String('txt' + '_' + i + '_' + j);
                cell.innerHTML = '<input type="text" class="inputBox" maxlength="1" style="text-transform: uppercase" ' + 'id="' + txtID + '" onfocus="textInputFocus(' + "'" + txtID + "'"+ ')">';
            }
        }
    }
    addHint();
}

//Returns Array
function preparepuzzleArray(){
var items = [[0, 'f', 0],
                    ['r', 'u', 'n'],
                    [0, 'n', 0],
];
return items;
}
//Check button
function checkClicked(){
    for ( var i = 0; i < puzzleArrayData.length ; i++ ) {
        var rowData = puzzleArrayData[i];
        for(var j = 0 ; j < rowData.length ; j++){
            if(rowData[j] != 0){
                var selectedInputTextElement = document.getElementById('txt' + '_' + i + '_' + j);
                if(selectedInputTextElement.value != puzzleArrayData[i][j]){
                    selectedInputTextElement.style.backgroundColor = 'pink';
                    
                }else{
                    selectedInputTextElement.style.backgroundColor = 'lightgreen';
                }
            }
        }
    }
}

I also want to make the focus to go automatically to the next input once the previous input has reached its maxlength value? Is that possible?

Solution

In terms of testing for the caps lock you could say

     const puzzle = document.getElementById('#puzzle');
    
     puzzle.addEventListener('keyup', function (event) {
      let caps = event.getModifierState('CapsLock');
       if(caps){
         alert("Please turn off caps lock etc..")
       }  
     })