Schreiben eines Tippspiels mit einer animierten Tastatur ⇐ CSS

[Anonymous]

Ich bin ein neuer Webentwickler hier. Ich hatte gehofft, etwas Code zu teilen und zu sehen, ob es eine Reihe von Funktionen gibt, die besser zu meinem Problem passen.
Mein Ziel ist es, ein Tippspiel mit CSS-Animationen zu erstellen. Ich habe festgestellt, dass ich für meine CSS-Animationen und -Transformationen viele Tasten recht einfach zuordnen kann, aber bestimmte Tasten wie die Eingabetaste, die Leertaste oder sogar Punkte als Kommas bereiten mir einige Probleme.
Gibt es Funktionen, die eine gute Zuordnung zu jedem Gerät ermöglichen, sodass ich nicht für jede Taste und jedes Gerät eindeutige IDs erstellen muss?
Jeder Rat ist sehr willkommen.
Hier ist mein Code:

Code: Select all

// LOAD WINDOW
window.onload = () => {

const typeArea = document.getElementById("type-area");

// KEYDOWN LISTENER EVENT
typeArea.addEventListener("keydown",(e) =>{
if(!e.repeat) {
console.log(`${e.key} pressed!`)
// COMPARE CHARACTER TO QUOTETEXT
let typed = $(e.key).val();
// DO TRANSFORMS ON THE KEYBOARD AREA
try {
$(`#${e.key}`).css('color','var(--special-color)');
$(`#${e.key}`).css('transition','0.2s');
$(`#${e.key}`).css('border-top','5px solid var(--special-color)');
$(`#${e.key}`).css('border-right','5px solid var(--special-color)');
$(`#${e.key}`).css('border-bottom','5px solid var(--special-color)');
$(`#${e.key}`).css('border-left','5px solid var(--special-color)');
$(`#${e.key}`).css('transform','scaleY(0.8)');
} catch (e) {
if (e.key === "Space") {
$("#space").css('color','red');
} else {
console.log("Key unbound");
}
}
} else {
console.log(`${e.key} repeated!`)
try {
$(`#${e.key}`).css('transition','10s');
$(`#${e.key}`).css('border-top','10px solid red');
$(`#${e.key}`).css('border-right','10px solid red');
$(`#${e.key}`).css('border-bottom','10px solid red');
$(`#${e.key}`).css('border-left','10px solid red');
// $(`#${e.key}`).css('font-weight','bold');
$(`#${e.key}`).css('color','red');
} catch (e) {
console.log("Key unbound");
}
}
}) // END OF KEYDOWN FUNCTION
} // END OF ONLOAD FUNCTION