Russian Keyboard approximation (HTML, JavaScript) - replacing user input keystrokes

The project is to approximate a Russian keyboard layout by replacing the characters the user types in using the keyboard.

No, I’m not Russian …
I just saw a website that did virtual keyboards that gave me the idea, and I wanted a practical project to try.
I figured I could do it with my level of JavaScipt skills so far.
Looking up all the Unicode encodings (then then typing them into the code) was a pain in the ___ .
And getting Caps Lock to work took a lot of extra code.

Here it is, as Codecademy workspace: https://www.codecademy.com/workspaces/61881b253079fda7e89750cd

I’ll put a more polished version of the project on GitHub eventually.

If you have any comments or suggestions, please reply.

3 Likes

Hey, cool feature!
Do you plan to expand it towards making the keyboard clickable in addition to the possibility of typing?
Right now I would have to search for the latin letter on my keyboard which isn’t arranged the same way as the one in the picture and the cyrillic letter in the picture which would take some time.
Then you could even extend it by a feature to rearrange the keyboard according to the way the keyboard is arranged in the user’s country…
Sorry sounds like a bit of work :smiley:

Thanks for the suggestions.

I wasn’t planning to do do any more with this project …
I guess I could do a map for the image to make the stuff in the image clickable,
or just have a table in the HTML that I’d put html buttons into.

But I don’t know of any way to get the arrangement of a user’s keyboard.

You could use an interactive SVG and rearrange that depending on the on the user’s choice for the keyboard layout.
What keyboard is the one you used in the image?

I’ve been working on making a clickable keyboard in the project. (I tried to copy the picture and I used a lot of buttons arranged in an HTML table.) It’s not finished … but the keyboard mostly works. (The CSS was more work than expected.)

Eventually, I’ll try to make the stuff written on the keys editable and have functions that gather what users wrote on the keys and use that to process the keystrokes too.

I haven’t learned anything about using an SVG image to do this yet … eventually, maybe.

1 Like

@janbazant1107978602 this is super awesome!! Thanks for sharing

Here’s a parallel, scaled-down version of the project that I have on codepen.io
link to project as a “pen” in codepen here

I’ve been trying to use the module stuff …

Originally, I had the following at the top of the HTML file:

<script src="diacritics0.js"></script>
<script  src="script.js" defer></script>

and I had something like this in script.js

const imported = {
 grave: grave,
 diaeresis: diaeresis,
 tilde: tilde
}
 // # use destructuring instead ? 

I changed that to:

the HTML file having

<script type="module" src="script.js" defer></script>

at the bottom of diacritics0.js

export { grave, diaeresis, tilde };

const all = { grave, diaeresis, tilde };
export { all as default };

and in script.js I have

import imported from "./diacritics0.js";  //# importing the default as imported

note that I tried

export all;

instead of

export { grave, diaeresis, tilde };

and it didn’t work.

EDIT: I found my error. It was just a simple syntax thing.
and doing “export all” seems to be improper syntax.

I’ve been working on a similar project (to replace the user’s keystrokes).
In this new one I replaced the keystroke and the previously typed character
in order to do a letter with a tilde or umlaut or accent mark .

I put it in the same Codecademy workspace (in a folder), and created a link on the project’s html page (top right on the main page).

It’s incomplete so far.
There’s a few more features I want to add, and some bugs to fix,
but the majority of it seems to work so far … but I haven’t done much testing yet.

Same thing, in the Codecademy workspace:
https://www.codecademy.com/workspaces/619eded1d2756881fd20aa58