Правильно ли решена задача?

Question

[Дмитрий Бутенко]

/*  Используя знания html и css нарисуйте клавиатуру . Изображение должно содержать числа, символьные клавиши, пробел, enter, caps lock, shift, tab, alt. При вводе текста в input в момент нажатия клавиши - затемняйте ее, в момент отпускания - возвращайте к первоначальному состоянию. Аналогично при нажатии enter, space, alt, shift, ctrl. Затемнение реализуйте через добавление класса CSS. Если нажата клавиша caps lock - то присвоить ей затемнение, которое работает до последующего отжатия клавиши. */

function t11(event) {
    let dataValue = document.querySelectorAll('.keyboard-button');
    let arrOfkey = document.querySelectorAll('.keyboard-container');
    
    for(let i = 0; i < dataValue.length; i++) {
        for(let j = 0; j <= arrOfkey.length; j++) {
            if(event.keyCode == dataValue[i].getAttribute('data-value')) {
                arrOfkey[i].classList.add('color-blue');
            }
            
        }
    }

}
function t111(event) {
    let dataValue = document.querySelectorAll('.keyboard-button');
    let arrOfkey = document.querySelectorAll('.keyboard-container');
    
    for(let i = 0; i < dataValue.length; i++) {
        for(let j = 0; j < arrOfkey.length; j++) {
            if(event.keyCode == dataValue[i].getAttribute('data-value')) {
                arrOfkey[i].classList.remove('color-blue');
            }
            
        }
    }
}

// ваше событие здесь!!!

document.querySelector('.i-11').addEventListener('keydown', t11);
document.querySelector('.i-11').addEventListener('keyup', t111);

Comments

[Ярослав Иванов]

А сами не можете результат с заданием сравнить?

[Дмитрий Бутенко]

Ярослав Иванов, решение может быть неверным, не смотря на верный результат. Я только учусь, поэтому, не хватает опыта и знаний, чтобы себя проверить досконально

[Дмитрий]

Дмитрий Бутенко, а html есть, к которому вы этот код применяете?

[Дмитрий]

Дмитрий Бутенко, Сделайте все на codepen.io к примеру и дайте ссылку. Код выглядит несколько странно, но надо видеть html, чтобы сказать как сделать более эффективно

[G F]

Ты скопировал тонну кода только чтобы заменить add на remove. Сократи его в 2 раза, и замени циклы на forEach и уже получше станет.

[Дмитрий Бутенко]

G F, спасибо огромное, для меня очень важен ваш комент

[G F]

Дмитрий Бутенко, да не за что, обращайся

[Дмитрий Бутенко]

G F, а то что два события, это корректно?

[G F]

Да, но опять же 2 раза вызывать querySelector не надо.

const keyboardEl = document.querySelector('.i-11')
keyboardEl.addEventListener('keydown', t11);
keyboardEl.addEventListener('keyup', t111);

https://github.com/ryanmcdermott/clean-code-javascript вот здесь можешь почитать про основы чистого кода.

[Дмитрий Бутенко]

G F, спасибо добрый человек.

[G F]

Ещё вот это смутило
dataValue[i].getAttribute('data-value')
достучаться до дата аттрибутов можно через dataset свойство:
dataValue[i].dataset.value
https://developer.mozilla.org/ru/docs/Web/Guide/HT...

[Дмитрий Бутенко]

G F, спасибо бро