cn-unit-3-project-es.md

Proyecto de la Unidad 3: HTML, CSS, JavaScript

Agregar un "event listener" (escuchador de eventos) a un elemento HTML para cambiar el estilo CSS

index.html

  <div class="opening-screen">Tengo hambre</div>

  <button class="option-one-button">Dormir</button>
  <button class="option-two-button">Comer un sándwich</button>

  <div class="option-one-screen">¡Ahora estoy muriendo de hambre!</div>
  <div class="option-two-screen">¡Yum!</div>

script.js

  // Almacena tus elementos HTML como variables
  
  let openingScreen = document.querySelector('.opening-screen');
  
  let optionOneScreen = document.querySelector('.option-one-screen');
  let optionOneButton = document.querySelector('.option-one-button');
  
  let optionTwoScreen = document.querySelector('.option-two-screen');
  let optionTwoButton = document.querySelector('.option-two-button');

  // Agrega escuchadores de eventos a los botones
  
  optionOneButton.addEventListener("click", function() {
    openingScreen.style.display = 'none';  // ocultar pantalla de inicio
    optionOneScreen.style.display = 'block';  // mostrar pantalla de opción uno
  });
  
  optionTwoButton.addEventListener("click", function() {
    openingScreen.style.display = 'none';  // ocultar pantalla de inicio
    optionTwoScreen.style.display = 'block';  // mostrar pantalla de opción dos
  });