sonca-ca

$('li').click(function(){
    $('li.color').removeClass('color');
    $(this).addClass('color');
});

Изначально у вас сообщение про раскладку, когда проблема с капсом вы меняете сообщение, а вот когда новая проблема с раскладкой после капса, текст не меняется и выводится что было

if (isCyrillic(keyName)) { //вывод сообщения о не правильной раскладке
   //нужно добавить
    var modalWindowCaps = document.getElementById("alertWindowText");
    modalWindowCaps.innerHTML = ("Раскладка!");
    ...
}  else if (capsLockEnabled && keyName != null) {
    var modalWindowCaps = document.getElementById("alertWindowText");
    modalWindowCaps.innerHTML = ("Включен CapsLock!");
    ...
}

Не понятно как именно вы хотите чтобы работал код, но сейчас он работает согласно тому, что вы написали.

Вы написали функцию и вызываете ее один раз. В тот момент, когда вы она выполняется, в переменной keyName действительно еще ничего нет.
Для того, чтобы ваша функция выполняла проверку после нажатия на клавишу, необходимо добавть ее вызов в функцию, которая исполняется по нажатию на клавишу.

var keyName;
var counterLetters = 0;
document.addEventListener("keypress", (event) => {
    keyName = event.key;
    checkUsersKey("something");
});
function checkUsersKey (levelText) {
    if(levelText[counterLetters] == keyName){
        alert("true");
    }
}

У вас в коде прописана привязка к тому, какой период выбран. Когда вы меняете через календарь дату в одном из полей, вторая дата автоматически пересчитывается согласно выбранному периоду.
Когда вы ставите в первое поле дату допустим 27 апр 2018 то конечная дата пересчитается вашим кодом

this.dateEnd = moment(value).add(1, this.selectedPeriod).toDate()

за сегодня прибавится 1 день к начальной дате, это и будет значение конечной 28 апр 2018
за неделю прибавится 1 неделя - конечная дата 4 мая 2018
за месяц - 1 месяц - конечная дата 27 мая 2018

В таком случае не очень понятно в чем проблема