Rastreamento de Teclas Modificadoras em JavaScript

Usando o objeto Event, podemos descobrir se as teclas Ctrl, Alt e Shift estavam pressionadas no momento do evento. Isso é feito com as propriedades ctrlKey, altKey e shiftKey - elas têm um valor true ou false dependendo se a tecla estava pressionada no momento do evento ou não.

Vamos ver um exemplo. Suponha que temos o seguinte botão:

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

Ao clicar no botão, exibiremos uma mensagem indicando se uma das teclas Ctrl, Alt e Shift estava pressionada:

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

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

Задание 1

Dado um elemento. Faça com que ao clicar nele, ele fique vermelho, mas apenas se a tecla Alt estiver pressionada no momento do clique.

Задание 2

Suponha que você tenha uma lista ul com tags li:

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

Faça com que, ao clicar em qualquer li, o número 1 seja adicionado ao final de seu texto, se a tecla Ctrl estiver pressionada, e o número 2, se a tecla Shift estiver pressionada.