External Links : Design(Figma) Prototype(codepen)

1. Prototype features

• The macbook keyboard has 64 keys : 54 alphanumeric (typing) keys, 6 control keys and 4 navigation keys.

• All keyboard keys have 3 or more states : default, hover, pressed, off, on.

  

• The actual physical keyboard and virtual are synced up, if you press key on the physical keyboard, the Visual keyboard will reflect that key press.

• Shift keys, caps lock key work as a toggle. Caps lock on/off status is indicated via a small indicator. Shift keys remain pressed until clicked again or if it detects any key press on actual keyboard.

• A blinking caret indicator to show the text input location.

2. My Learning

• CSS Grid was good for layout on this project as the keys need to be adjusted in a rectangular frame. First 5-row grids were made using grid-template-rows : repeat (5, 1fr); and then each row make use of 15 columns to adjust 14 keys (row1) grid-template-columns: repeat(13, 1fr) 2fr; 14 keys (row 2), 13 keys (row 3), 12 keys (row 4) and 11 keys (row5).

  

• CSS limitation: There is no method(s) to disable :hover pseudo-class. When shift key is pressed, I wanted the pressed-shift key not to have the hover effect (applied on other keys). The workaround was to create a copied alternate key alt-key with no hover class. It worked 🙂

• Javascript limitation: Initially, on loading the page, without clicking any key on the actual keyboard, you cannot fetch the caps lock key status from the system (to check if caps lock is on/off when keyboard loads). I had to initialize the value of let capsLockKey = false;

• For ID values for keyboard div keys in CSS, keeping the name standard to what the event.value | event.code(the standard name) would have been good. e.g. event.code = “tab”, here the tab is a standard name that can be matched directly.

• The order of how you put the classes is important if you are comparing using classList. It has to be exact match. document.getElementById('leftshiftkey').classList == "default key-alt key-alt-active"; would only work if the classes on id=‘leftshiftkey’ class = “default key-alt key-alt-active”.

• queryselector takes multiple id in an array and then access via the index number. Concise code then the getElementById method. var x = document.querySelectorAll(['#Q','#W','#E',...,'#U');

• Arrow functions ()=>{}; were helpful in most places. Good way to compute some code that returns the value when needed.

• keyup and keydown method of addEventListener was important as they tell if the key on the keyboard is pressed in or pressed out. document.addEventListener("keyup",(e) => {conditions...};

• setTimeout function was helpful in giving the key press-out delay, making the key-out interaction more natural.

3. Feedback

Wanted some external feedback from others, of how can I improve wrt anything on this prototype.