KeyBoard.js

const body = document.body;

$("#keyboard-upper-container").css("display", "none");

$(document).keydown(function(e){
    switch(e.which){
        case 81: 
            $("#113").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 87: 
            $("#119").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 69: 
            $("#101").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 84: 
            $("#116").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 89: 
            $("#121").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 85: 
            $("#117").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 73: 
            $("#105").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 79: 
            $("#111").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 80: 
            $("#112").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 219: 
            $("#91").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 221: 
            $("#93").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 221: 
            $("#125").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 220: 
            $("#92").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 220: 
            $("#124").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 65: 
            $("#97").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 83: 
            $("#115").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 68: 
            $("#100").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 70: 
            $("#102").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 71: 
            $("#103").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 72: 
            $("#104").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 74: 
            $("#106").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 75: 
            $("#107").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 76: 
            $("#108").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 186: 
            $("#59").css("background-color", "aqua");
            
        break;
    }
   
    switch(e.which){
        case 186: 
            $("#58").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 222: 
            $("#39").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 90: 
            $("#122").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 88: 
            $("#120").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 67: 
            $("#99").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 86: 
            $("#118").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 66: 
            $("#98").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 78: 
            $("#110").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 77: 
            $("#109").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 188: 
            $("#44").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 190: 
            $("#46").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 191: 
            $("#47").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 81: 
            $("#113").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 82: 
            $("#114").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 81: 
            $("#81").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 87: 
            $("#87").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 69: 
            $("#69").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 82: 
            $("#82").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 84: 
            $("#84").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 89: 
            $("#89").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 85: 
            $("#85").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 73: 
            $("#73").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 79: 
            $("#79").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 80: 
            $("#80").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 219: 
            $("#123").css("background-color", "aqua");
            
        break;
    }

    switch(e.which){
        case 65: 
            $("#65").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 83: 
            $("#83").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 68: 
            $("#68").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 70: 
            $("#70").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 71: 
            $("#71").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 72: 
            $("#72").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 74: 
            $("#74").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 75: 
            $("#75").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 76: 
            $("#76").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 222: 
            $("#34").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 90: 
            $("#90").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 88: 
            $("#88").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 67: 
            $("#67").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 86: 
            $("#86").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 66: 
            $("#66").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 78: 
            $("#78").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 77: 
            $("#77").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 188: 
            $("#60").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 190: 
            $("#62").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 191: 
            $("#63").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 192: 
            $("#96").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 49: 
            $("#49").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 50: 
            $("#50").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 51: 
            $("#51").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 52: 
            $("#52").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 53: 
            $("#53").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 54: 
            $("#54").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 55: 
            $("#55").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 56: 
            $("#56").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 57: 
            $("#57").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 48: 
            $("#48").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 189: 
            $("#45").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 187: 
            $("#61").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 192: 
            $("#126").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 49: 
            $("#33").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 50: 
            $("#64").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 51: 
            $("#35").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 52: 
            $("#36").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 53: 
            $("#37").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 54: 
            $("#94").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 55: 
            $("#38").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 56: 
            $("#42").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 57: 
            $("#40").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 48: 
            $("#41").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 189: 
            $("#95").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 187: 
            $("#43").css("background-color", "aqua");
            
        break;
    }
    switch(e.which){
        case 32: 
            $("#32").css("background-color", "aqua");
            
        break;
    }
   
})




$(document).keyup(function(e){
    switch(e.which){
        case 81: 
            $("#113").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 87: 
            $("#119").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 69: 
            $("#101").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 84: 
            $("#116").css("background-color", "#f5f5f5");
            
        break;
    }
    // added lowercase r
    switch(e.which){
        case 82: 
            $("#114").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 89: 
            $("#121").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 85: 
            $("#117").css("background-color", "#f5f5f5");
            
        break;
    }
    // Issue with back slash
    switch(e.which){
        case 220: 
            $("#92").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 220: 
            $("#124").css("background-color", "#f5f5f5");
            
        break;
    }

    switch(e.which){
        case 73: 
            $("#105").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 79: 
            $("#111").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 80: 
            $("#112").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 219: 
            $("#91").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 221: 
            $("#93").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 221: 
            $("#125").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 191: 
            $("#47").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 65: 
            $("#97").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 83: 
            $("#115").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 68: 
            $("#100").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 70: 
            $("#102").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 71: 
            $("#103").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 72: 
            $("#104").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 74: 
            $("#106").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 75: 
            $("#107").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 76: 
            $("#108").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 186: 
            $("#59").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 186: 
            $("#58").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 222: 
            $("#39").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 90: 
            $("#122").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 88: 
            $("#120").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 67: 
            $("#99").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 86:
            $("#118").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 66: 
            $("#98").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 78: 
            $("#110").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 77: 
            $("#109").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 188: 
            $("#44").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 190: 
            $("#46").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 191: 
            $("#47").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 81: 
            $("#113").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 81: 
            $("#81").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 87: 
            $("#87").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 69: 
            $("#69").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 82: 
            $("#82").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 84: 
            $("#84").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 89: 
            $("#89").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 85: 
            $("#85").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 73: 
            $("#73").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 79: 
            $("#79").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 80: 
            $("#80").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 219: 
            $("#123").css("background-color", "#f5f5f5");
            
        break;
    }
    
    switch(e.which){
        case 65: 
            $("#65").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 83: 
            $("#83").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 68: 
            $("#68").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 70: 
            $("#70").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 71: 
            $("#71").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 72: 
            $("#72").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 74: 
            $("#74").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 75: 
            $("#75").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 76: 
            $("#76").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 222: 
            $("#34").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 90: 
            $("#90").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 88: 
            $("#88").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 67: 
            $("#67").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 86: 
            $("#86").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 66: 
            $("#66").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 78: 
            $("#78").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 77: 
            $("#77").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 188: 
            $("#60").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 190: 
            $("#62").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 191: 
            $("#63").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 192: 
            $("#96").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 49: 
            $("#49").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 50: 
            $("#50").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 51: 
            $("#51").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 52: 
            $("#52").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 53: 
            $("#53").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 54: 
            $("#54").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 55: 
            $("#55").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 56: 
            $("#56").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 57: 
            $("#57").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 48: 
            $("#48").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 189: 
            $("#45").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 187: 
            $("#61").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 192: 
            $("#126").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 49: 
            $("#33").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 50: 
            $("#64").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 51: 
            $("#35").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 52: 
            $("#36").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 53: 
            $("#37").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 54: 
            $("#94").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 55: 
            $("#38").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 56: 
            $("#42").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 57: 
            $("#40").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 48: 
            $("#41").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 189: 
            $("#95").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 187: 
            $("#43").css("background-color", "#f5f5f5");
            
        break;
    }
    switch(e.which){
        case 32: 
            $("#32").css("background-color", "#f5f5f5");
            
        break;
    }
   
})


// This is how you get it to turn back
$(document).keyup(function(e){
    switch(e.which){
        case 81: 
            $("#113").css("background-color", "#f5f5f5");

        break;
    }
})

$(document).keydown(function(e){
    if(e.which === 16){
       
            $("#keyboard-upper-container").css("display", "");
            $("#keyboard-lower-container").css("display", "none");
        
    }
})

$(document).keyup(function(e){
    if(e.which === 16){
       
        $("#keyboard-upper-container").css("display", "none");
        $("#keyboard-lower-container").css("display", "");
        
    }
})