Feedback on Improving CSS-Only Crossword - with JavaScript

Ok. On this one, I tried It and when I put the cursor in cell 1 to solve 1 across, shroud, when I put the cursor in cell 1 and typed S and instead of putting the s in cell 1 cursor jumped to cell 2 and then the h went in cell 4 and so on. It’s like the input was in every other cell. Does that make sense???

Please help me to experience your problem by supplying a webpage link to the code that you were using.

https://codepen.io/pmw57/pen/ZEbmjbB(as above)
I just clicked on that link and then tried to enter a letter and cursor would slip a cell.

I can’t duplicate the issue in my Chrome or Firefox. Oh, but I see the problem in Edge. Thank you for reporting that. Looks like tomorrow’s post is going to be an update :slight_smile:

2 Likes

Ok, thanks.

Sorry I’m just getting back with you, but when I checked, I type the s in the first cell, the cursor moves to the second cell and also types a s in that cell, instead of just moving to next cell to allow you to type a letter.

Please let me know the the name of your web browser, the version, and which device you are using it on (desktop/laptop/tablet/android/iphone/etc)

Microsoft Edge 44.18362.449.0
Microsoft Edge HTML 18.18362
I am working on desktop Windows 10
hope to put app on kindle

Thanks, Edge is up to version 81 now instead of 44. I’ll try to find out if I can get an older version of that.

In the meantime, I have made and update so that it doesn’t just clear the letter, but also enters it and prevents the default action from occurring which should prevent the double entry.

Can you please test on the update, which has evt.preventDefault() at the start of the keyPressHandler function.

I tried step 5 again with the update and it works fine, advancing to next input square. Tried step 6 and it highlights whole row not word, but I read your post for tomorrow that will fix that.

Yes, the code from part 6 of 8 does result in the whole row or col being highlighted. The post is nearly too long to fit already as it is. Part 7 is going to be even longer, and deals with reducing the whole row/col to just the single word.

Ok. I tried this one, clicked on 1 across and it highlights, as well as the clue, say you don’t know the answer and you want to click on another across word, why is the 1across word still highlighted. Isn’t it suppose to unhighlight when you move to another word? The same is true when space again for the down word.

Thank you. Some older code from before when I made improvement managed to find its way in, and I failed to check the final result when hurriedly posting it before evacuating the house.

You should find that all is fixed up now.

Ok. I tried this, the word highlights, but click on cell 1 and cell entry goes to cell 2 also the khaki highlight is not showing. Backspace and delete work fine.

Somehow some of the improvements didn’t get saved. Try it again now.
https://codepen.io/pmw57/pen/OJyQyPo

It looks as though your final version is also missing

<span>Spacebar to switch from across to down entry</span>

@Paul_Wilkins

1 Like

Using spacebar to switch the input direction
The last thing that we want to do today is to update the active cells when the spacebar is pressed.

(post #8)

1 Like

Thanks, I’ve updated that and have learned my mistake of forking constantly from the original. I was doing that for what I though was safety, but a better way is to instead fork from the end of my previous work.

2 Likes

I copied the html from the codepen and the css and it didn’t make the crossword grid correctly; also tried copying the html and the css and the additional code you supplied and was not formatted correctly. I tried clicking on the compiled css also. Can you update the codepen so that the crossword grid will display correctly?
Thanks