First Typing Lesson

//public/js/main.js
class Typing{
  constructor(){
    $(".keyboard-base .key").on({
      keypress: function(event){
        if(event.which != 32)
          var key = String.fromCharCode(event.which).toUpperCase();
        else if(event.which == 32)
          var key = "Space";
        
        typing.checkKey(key)
      } 
    });

    this.letters = [['A','កូន​ដៃ','ា'],['S','នាង​ដៃ','ស'],['D','ចង្អុលកណ្តាល','ដ'],['F','ចង្អុលដៃ','ថ'],['G','ចង្អុលដៃ','ង'],
    ['H','ចង្អុល​ដៃ​ស្តាំ','ហ'],['J','ចង្អុល​ដៃ​ស្តាំ','ដាក់ជើង'],['K','ចង្អុលកណ្តាល','ក'],['L','នាងដៃ','ល'],[';','កូនដៃ','ើ'],
    ["'",'កូនដៃ','់'],['Space','មេដៃស្តាំ','ដកឃ្លា​មើល​មិន​ឃើញ']];
    this.counter = 0;
    this.nextKey = this.letters[0][0];
    this.setBackground(this.nextKey);
  }

  setBackground(nextKey){
    var keys = $(".keyboard-base").children();
    for(var index in keys){
      if(keys[index].innerHTML == nextKey){
        keys[index].focus();
        $(keys[index]).css({'background':'teal'});
      }

      if(this.pressedKey && (keys[index].innerHTML == this.pressedKey)){
        $(keys[index]).css({'background':'rgb(243, 243, 243)'});
      }
    }

    $('#finger').html(this.letters[this.counter][1]);
    $('#letter').html(this.letters[this.counter][2]);
  }

  checkKey(key){
    if(key == this.nextKey){
      if(this.counter < (this.letters).length - 1)
        this.counter += 1;
      else if(this.counter == (this.letters).length - 1)
        this.counter = 0;

      this.pressedKey = this.nextKey;
      this.nextKey = this.letters[this.counter][0];
      this.setBackground(this.nextKey);
    }
  }
}//end of class

/*public/css/main.css*/
a{
  text-decoration: none;
  color: rgb(6, 100, 138)
}
a:hover{
  color: rgb(35, 118, 226);
}
a img:hover{
  opacity: .7;
}
.region{
  max-width: 1100px;
  margin: 0 auto;
}
body{
  margin: 0;
  padding: 0;
  font: 14px/1.5 Arial, OdorMeanChey;
}
#blog-header{
  background: teal;
  
}
.blog-title{
  padding: 5px 0;
  display: grid;
  grid-template-columns: 55px 350px auto 100px;
  align-items: center;
}
.blog-title .logo{
  margin-right: 10px;
}
.blog-title img{
  width: 100%;
}
.blog-title a{
  font: 30px/1.5 Moul, Anton;
  color: white;
}
.blog-title a:first-child{
  margin-left: 0;
}
.blog-title a:hover, 
.blog-title .login a:hover,
.blog-title #menu a:hover{
  color: lavender;
}
.blog-title .login{
  text-align: right;
}
.blog-title .login a{
  font: 15px/1.5 OdorMeanChey;
  color: white;
}
.blog-title #menu ul{
  padding: 0;
  margin: 0;
}
.blog-title #menu li{
  list-style-type: none;
  display: inline-block;
  padding: 0 10px;
}
.blog-title #menu li a{
  font: 15px/1.5 OdorMeanChey;
  color: white;
  list-style: none;
}
#content #panel{
  min-height: 170px;
  background: rgb(197, 197, 197);
  margin: 10px 8px 5px;
  box-sizing: border-box;
  border-radius: 4px;
  padding: 20px;
}
body * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif, OdorMeanChey;
}
.keyboard-base {
  margin: 0 auto;
  max-width: 1085px;
  padding: 20px;
  background-color: rgb(197, 197, 197);
  border-radius: 4px;
  display: grid;
  grid-template-columns: repeat(30, 30px);
  grid-template-rows: repeat(5, 60px);
  grid-gap: 5px;
}
.key {
  background-color: rgb(243, 243, 243);
  border: 2px solid black;
  border-radius: 5px;
  grid-column: span 2;
  font-size: 20px;
  text-align: center;
  padding-top: 17px;
}
.key:hover {
border: 1px solid #eeeeee;

}
.delete {
  grid-column: span 4;
}
.tab {
  grid-column: span 3;
}
.backslash {
  grid-column: span 3;
}
.capslock {
  grid-column: span 4;
}
.return {
  grid-column: span 4;
}
.leftshift {
  grid-column: span 5;
}
.rightshift {
  grid-column: span 5;
}
.leftctrl {
  grid-column: span 3;
}
.command {
  grid-column: span 3;
  font-size: 14px;
}
.space {
  grid-column: span 13;
}
#content #panel{
  text-align: center;
  display: grid;
  grid-template-columns: 100%;
  align-items: center;
}
#content #finger{
  font: 14px/1.5 OdorMeanChey;
}
#content #letter{
  font: 30px/1.5 OdorMeanChey;
}
footer{
  background: rgb(165, 165, 165);
}
.footer{
  text-align: center;
  padding: 40px;
  margin-top: 30px;
  font-weight: bold;
}

GitHub: https://khmerweb-typing.herokuapp.com
Heroku: https://khmerweb-typing.herokuapp.com/