Exercício 2 - Event Listener

exercicio-2-event-listener.markdown

Exercício 2 - Event Listener

A Pen by renato on CodePen.

License.

index.html

<div class=flexy>
  <div class="como-usar"><span class="fonte">Instruções (leia tudo)</span><br>Novamente dois quadrados, com nomes de Caixa 1 e Caixa 2:<br> Ao clicar uma vez na Caixa 1, a cor da Caixa 2 deve ser trocada para azul.<br> Ao dar um clique-duplo na Caixa 2, a Caixa 1 deve ser trocada
    para vermelho e a Caixa 2 para amarela.<br> Altere apenas o JavaScript, criando o event listener adequado e caso precise, visite o link com todos os elementos.</div>
  <div class="caixa1">Caixa 1</div>
  <div class="caixa2">Caixa 2</div>
  
  <div class="caixa3">Hello</div>
</div>

script.js

const caixaUm = document.querySelector('.caixa1');
const caixaDois = document.querySelector('.caixa2');

function changeColors () {
  caixaUm.style.backgroundColor = 'red';
  caixaDois.style.backgroundColor = 'yellow';
}
function trocaCor () {
  caixaDois.style.backgroundColor = 'blue';
}
//Crie seu event listener abaixo:

style.css

.flexy {
  display: flex;
  font-size: 20px;
}

#input-texto{
  width: 80%;
  line-height: 24px;
}
.fonte {
  font-size: 32px;
  font-weight: 700;
}
.como-usar {
  border: 1px solid black;
  width: 75%;
}
.caixa1, .caixa2 {
  border: 2px solid black;
  width: 100px;
  height: 100px;
  margin: 10px auto;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}