CODEWITHSUNDEEP
javascripthtmlcsscrossword
Jess
Jess

Reputation: 3

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()">

JS

//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?

Upvotes: -1

Views: 355

Answers (1)

cfech
cfech

Reputation: 16

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..")
       }  
     })

Upvotes: -1

Related Questions