Sledovanie modifikačných kláves v JavaScripte

Pomocou objektu Event môžeme zistiť, či boli v čase udalosti stlačené klávesy Ctrl, Alt a Shift. To sa robí pomocou vlastností ctrlKey, altKey a shiftKey - majú hodnotu true alebo false podľa toho, či bola táto klávesa v čase udalosti stlačená alebo nie.

Pozrime sa na príklad. Majme nasledujúce tlačidlo:

html<button id="elem">text</button>

Pri kliknutí na tlačidlo budeme vypisovať správu o tom, či bola stlačená niektorá z kláves Ctrl, Alt a Shift:

javascriptlet elem = document.querySelector('#elem');

elem.addEventListener('click', function(event) {
  if (event.ctrlKey) {
    console.log('stlačený Ctrl');
  }
  
  if (event.altKey) {
    console.log('stlačený Alt');
  }
  
  if (event.shiftKey) {
    console.log('stlačený Shift');
  }
});

Задание 1

Daný je element. Zabezpečte, aby sa po kliknutí naňho zafarbil na červeno, ale iba ak je v čase kliknutia stlačená klávesa Alt.

Задание 2

Majte zoznam ul s prvkami li:

html<ul id="elem">
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>

Zabezpečte, aby sa po kliknutí na ľubovoľný li na koniec jeho textu pridalo číslo 1, ak je stlačená klávesa Ctrl, a číslo 2, ak je stlačená klávesa Shift.