HTML Crossword Puzzles

This intriguing puzzle exclusively allows lowercase letters.

How can I modify it to accept both upper and lowercase letters?

Alternatively, is there a way to prompt the user to disable caps lock?

HTML

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

JS

//Setting up 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();
}

//Generates Array Data
function preparepuzzleArray(){
var items = [[0, 'f', 0],
                    ['r', 'u', 'n'],
                    [0, 'n', 0],
];
return items;
}
//Checking function
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';
                }
            }
        }
    }
}

Is it feasible to automatically shift focus to the next input once the previous one reaches its maxlength value? I would like this feature as well.

Answer №1

When it comes to checking for the caps lock, you can use this code snippet:

     const inputField = document.getElementById('#input');
    
     inputField.addEventListener('keydown', function (e) {
      let isCapsLockOn = e.getModifierState('CapsLock');
       if(isCapsLockOn){
         alert("Please disable caps lock before proceeding")
       }  
     })

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Angular directives to pre-select a default option

I am currently working on a select HTML tag with two options, and I want to set the first option as the default choice. My select element includes Angular directives like ng-change and ng-model. I have attempted to achieve this by adding selected = "select ...

Is it feasible to have pagination and dynamic data in a Google Chart?

I am working on a marketing project where I plan to incorporate a Google Donut Chart with pagination using AJAX. However, I have encountered an issue where the chart does not load when moving to the next page. It only displays data upon initial loading. Be ...

Jasmine and Karma: Unidentifiable variable runs

Is a special plugin or library required to use runs() and waits() with Jasmine? I checked the Jasmine wiki page for async tests at https://github.com/pivotal/jasmine/wiki/Asynchronous-specs, but there's no mention of needing additional libraries. Bas ...

Combining array elements with unique property labels

I have two arrays of objects containing the properties: name, value, and id Array A ArrayA: [{ name: , value: , key: }, ]; There is another array of objects, but with different property names ArrayB: [{ user: “userA” , email: ...

When a directive is passed a string with HTML tags, the tags are not displayed/rendered as expected

When it comes to passing a string with HTML content to my Angular directive, I've encountered an issue where the rendered output treats the HTML as text. While researching possible solutions, most of them seem to rely on using ng-bind-html directive, ...

Tips for making inline elements match the line height

Consider this block element : <div style="background-color: gray; line-height: 30px;"> Some text and a <a style="background-color: yellow;">link<\a> <\div> Why is it that the yellow color does not extend the full hei ...

Is the callback for a request always invoked?

When using the npm module request, I often encounter situations where some requests are not called back, leading to various issues. This has raised a question in my mind - is it expected for the request function to always callback? For instance, if my req ...

methods for closing dialog box without altering UI in angular

I have a list of charts on my workspace page and have implemented a Delete confirmation dialog box for when I want to delete a selected chart. However, I have encountered a strange issue where when the delete dialog box is open and I click the cancel butt ...

Adjust the size of the flex item based on the background image dimensions

Within a flexbox, there are flex items displayed Each flex item should appear as a clickable folder with specific text inside It seems that the only CSS way to achieve this is by using a background image. However, I want to accomplish the following: Cons ...

Mastering the art of navigating through multiple nested objects is achievable by harnessing the power of recursive

I'm utilizing the AngularTree directive in my Angular application to display a tree view of a specific data structure. The data structure can be viewed at https://jsfiddle.net/eugene_goldberg/Lvwxx629/17/. You can find more information about the Angul ...

Adding a style to table data within a table row

I am facing an issue with the following code: <tr> <td class="someclass"> <input /> </td> ... <td> </td> <td> </td> .. </tr> I am looking to override t ...

Is it possible to merge two jQuery functions into a single one?

Here are my two jQuery functions: $(document).on('change','.states',function(){ //on change of select }); $(document).on('click','.date_control',function(){ //on click of input .date_control }); I am lookin ...

angularjs code to dynamically change the selected index of an option in a document

This code snippet demonstrates how to achieve this functionality using pure JavaScript: document.getElementById("mySelect").selectedIndex = "0" <select class="selectpicker" id="mySelect"> <option>English &nbsp;</option> < ...

Provide reasoning for sub bullet points using bullet points

Resolved! To resolve the issue, I modified the margin to 0 (instead of 0 auto) and included a left padding for each individual li element in my ordered list with type "a". Original Inquiry I currently have a list of numbered bullet points with type a ...

Transform your CSS3 rotateY into PHP Imagick::distortImage

I'm trying to rotate an image by rotateY(-54deg) on the front-end, and now I need to achieve the same rotation in PHP using Imagick::distortImage. $image->distortImage(Imagick::DISTORTION_PERSPECTIVE, $controlPoints, true); Is there a straightfor ...

Interact with elements on a dynamically loaded webpage using Selenium WebDriver in Java

I am faced with a challenge of clicking on a specific element on a dynamically loaded page, where the web element is generated as we scroll down the page, similar to the setup on a Jabong webpage. Here is the code I tried on the Jabong webpage: WebDrive ...

Nuxt 3 presents challenges with unpredictable CSS behavior

I've noticed a strange issue with my CSS styling. When I first load or refresh the page, no CSS is applied. However, I found that if I make a change to the style tag - such as adding or removing 'scoped' - the CSS suddenly applies correctly ...

Dynamic views loaded from ui-router can cause compatibility issues with running Javascript

Currently, I am facing an issue while attempting to load a template into a UI-View using UI-Router. Although the JavaScript is loaded, it does not run on the loaded views. The situation unfolds as follows: I have developed a template in HTML containing all ...

Ways to segment into a proper array

I received the following object from an API and I am looking to convert it into an array using either JavaScript or C#. [ "1":"h1:first", "2":".content a > img", "3":"#content div p" ] I attempted converting it to a JSON object and using the spl ...

Creating dynamic dropdown menus within a Rails 3 form using Prototype and incorporating database queries

Recently, I've been on the hunt for a seamless method to create dynamic dropdown menus within a form that can be populated with data from a database based on the selection of a previous dropdown. Unfortunately, my search for a suitable Rails 3/prototy ...