Animaciones con TailwindCSS

Vamos a usar animaciones de CSS para mover la aspiradora, prender las luces y el sensor de movimiento, entre otras propiedades de nuestra Casa Inteligente con TailwindCSS.

Recuerda que hicimos la maquetación de la casa en la primera parte de este reto: Casa Inteligente con TailwindCSS (parte 1).

Compártenos el resultado final en los comentarios y/o en Twitter con el hashtag #RetosPlatziCSS. 😉

Antes de comenzar, los cursos de Platzi que te recomiendo para realizar este reto son los siguientes:

• Curso de Frontend Developer
• Curso Práctico de Frontend Developer
• Curso Básico de TailwindCSS 2 y 3

Paso 0: planeación

Para este reto, te propongo que realices los siguientes 8 pasos:

1. Funcionalidad para prender las luces
2. Funcionalidad para mover la aspiradora
3. Funcionalidad para prender la música
4. Funcionalidad para activar el sensor de movimiento
5. ¡Compártenos tu resultado en los comentarios!

Recomendación: Evita copiar y pegar el código. Trata de transcribir cada detalle y entender muy bien su funcionamiento (Sin afán, tómate tu tiempo). Sólo de esta forma podrás convertirte en un(a) experto(a) en maquetación con CSS.

ʕ•́ᴥ•̀ʔっ ¡Empecemos!

Paso 1: Funcionalidad para prender las luces

Para añadir el ícono a la card, hagamos una lista de lo que necesitamos hacer junto con las propiedades y valores que nos permitirían lograr eso que necesitamos:

La idea después de conocer las propiedades y valores que necesitamos para las luces, es ir a la documentación oficial de TailwindCSS para buscar las clases correspondientes y añadirlas al HTML así como veíamos en la parte 1 de este reto, sin embargo, como son valores tan específicos, no los vamos a encontrar.

Para este caso, podemos hacer dos cosas:

1. Añadir la clase de CSS en la configuración de TailwindCSS con la propiedad y valor que necesitamos como en este ejemplo.
2. Crear una clase de CSS en nuestro archivo de estilos como lo haríamos normalmente sin el uso de TailwindCSS.

En la parte 1 de este reto, aprendimos a añadir la clase de CSS en la configuración de TailwindCSS. Así que ahora, veremos cómo crear una clase de CSS en nuestro archivo de estilos como lo haríamos normalmente ya que para este caso, las propiedades y valores son específicas para cada elemento (luz, sensor, aspiradora, etc) y no tan generales como para añadirlas en la configuración.

Teniendo en cuenta lo anterior, las clases de CSS que necesitamos en nuestro archivo de estilos son:

.light {
  width: 0.4rem;
  height: 0.4rem;
  background: rgb(253 230 138);
  -webkit-box-shadow: 10px10px50px30pxrgb(253 230 138);
     -moz-box-shadow: 10px10px50px30pxrgb(253 230 138);
          box-shadow: 10px10px50px30pxrgb(253 230 138);
}

.light-1 {
  top: 11%;
  left: 24%;
}

.light-2 {
  top: 11%;
  left: 46%;
}

.light-3 {
  top: 16%;
  left: 59%;
}

El HTML que tenemos que añadir sería:

<div class="light light-1 absolute rounded-full"></div>
<div class="light light-2 absolute rounded-full"></div>
<div class="light light-3 absolute rounded-full"></div>

Y lo pondríamos debajo de la imagen del plano, así:

<divclass="relative grid place-items-center w-full lg:w-4/6">
  <img class="w-full " src="https://i.ibb.co/09fmVRK/plan.png" alt="plan">
  <divclass="light light-1 absolute rounded-full"></div>
  <divclass="light light-2 absolute rounded-full"></div>
  <divclass="light light-3 absolute rounded-full"></div>
</div>

En el HTML añadimos las propiedades relative al contenedor y absolute y rounded-full a las luces ya que estas propiedades y valores sí las encontramos en TailwindCSS.

Ahora, lo que sigue es poder activar las luces con el Toggle Button y para ello, removemos la clase light y añadimos unos id al HTML así:

<divid="light-1"class="light-1 absolute rounded-full"></div>
<divid="light-2"class="light-2 absolute rounded-full"></div>
<divid="light-3"class="light-3 absolute rounded-full"></div>

Luego, en nuestro código JavaScript accedemos al DOM así:

const lightsToggleButton = document.getElementById('lights-toggle-button')
const light1 = document.getElementById('light-1')
const light2 = document.getElementById('light-2')
const light3 = document.getElementById('light-3')

Donde lights-toggle-button es el id del input correspondiente a las luces.

Y le decimos que cuando el Toggle Button cambie, le agregue la clase light a nuestros elementos de HTML, así:

function turnOnLights() {
    lightsToggleButton.addEventListener('change', () => {
      light1.classList.toggle('light')
      light2.classList.toggle('light')
      light3.classList.toggle('light')
    })
}

turnOnLights()

Paso 2: Funcionalidad para mover la aspiradora

Lo primero que vamos a hacer es ir a icons8 para buscar el ícono de una aspiradora robot para poner en nuestro plano y luego lo añadimos al HTML así:

<img src="https://img.icons8.com/external-vitaliy-gorbachev-flat-vitaly-gorbachev/58/000000/external-robot-vacuum-cleaner-internet-technology-vitaliy-gorbachev-flat-vitaly-gorbachev.png"/>

Luego, debemos posicionar la aspiradora y darle un tamaño, así:

.vacuum-start {
  bottom: 22%;
  right: 12%;
  width: 5%;
}

Para generar el movimiento de la aspiradora hacemos uso de nuestras animaciones en CSS para rotarla y trasladarla de la siguiente manera:

.vacuum {
  animation: vacuum 5s ease infinite;
}

@keyframes vacuum {
  0% {
    transform: translate(0%) rotate(-360deg);
  }
  25% {
    transform: translateY(-350%);
  }
  50% {
    transform: translateY(-350%) translateX(-500%) rotate(360deg);
  }
  75% {
    transform: translateY(-350%);
  }
  100% {
    transform: translate(0%) rotate(360deg);
  }
}

Finalmente, el JavaScript nos quedaría de la siguiente manera:

const cleaningToggleButton = document.getElementById('cleaning-toggle-button')
const vacuum = document.getElementById('vacuum')

functionturnOnVaccum() {
    cleaningToggleButton.addEventListener('change', () => {
      vacuum.classList.toggle('vacuum')
    })
}

Paso 3: Funcionalidad para prender la música

Para reproducir música en JavaScript lo primero que debemos hacer es añadir a nuestro HTML la canción, así:

<audioid="audio"src="public/bensound-happyrock.mp3"></audio>

Asegúrate de que la canción sea de uso libre. Puedes encontrar algunas en Bensound.

Luego, debemos crear una instancia de audioContext y decirle quién es la canción que queremos que se reproduzca, así:

const audio = document.getElementById('audio')
const audioContext = new AudioContext() // Instanciaconst source = audioContext.createMediaElementSource(audio)
source.connect(audioContext.destination)

Para hacer sonar la canción escribimos audio.play() y para pausarla escribimos audio.pause(). Luego, lo que hacemos es decirle a JavaScript que cuando la canción esté pausada y oprimamos el botoncito de toggle, haga sonar la canción; y cuando la canción esté sonando y oprimamos el botoncito de toggle, haga pausar la canción. Así:

let paused = true// La canción estará pausada inicialmentefunctionturnOnMusic() {
    musicToggleButton.addEventListener('change', () => {
      if (paused) { // Si la canción está pausada,
        audio.play() // que suene
        paused = false// (y cambiamos el estado de true a false para que la próxima vez que oprimamos el toggle button, JS sepa que la canción cambió de sonando a pausada).
      } else { // Pero si la canción está encendida,
        audio.pause() // que se pause
        paused = true// (y cambiamos el estado de true a false para que la próxima vez que oprimamos el toggle button, JS sepa que la canción cambió de pausada a sonando).
      }
    })
}

turnOnMusic()

Paso 4: Funcionalidad para activar el sensor de movimiento

Esta funcionalidad es muy parecida a la del paso número 1 en donde prendemos y apagamos las luces, solo que ahora cambiamos la luz amarilla por roja (o del color que quieras tu sensor), la posición del elemento HTML y listo.

El HTML te quedaría de la siguiente manera:

<divid="sensor"class="absolute rounded-full"></div>

El CSS así:

.sensor {
  bottom: 49%;
  left: 89%;
  width: 0.4rem;
  height: 0.4rem;
  background: red;
  -webkit-box-shadow: 10px10px50px30px red;
     -moz-box-shadow: 10px10px50px30px red;
          box-shadow: 10px10px50px30px red;
}

Y el JavaScript así:

const motionSensorToggleButton = document.getElementById('motion-sensor-toggle-button')
const sensor = document.getElementById('sensor')

functionturnOnSensor() {
    motionSensorToggleButton.addEventListener('change', () => {
      sensor.classList.toggle('light')
    })
}

turnOnSensor()

Donde motion-sensor-toggle-button es el id del input correspondiente al sensor de movimiento.

Paso 5: ¡Compártenos tu resultado en los comentarios!

¡Este paso es mi favorito! Compártenos en los comentarios y/o en Twitter con el hashtag #RetosPlatziCSS el resultado final de la aplicación de tu casa inteligente con TailwindCSS. 😄

Aquí te comparto:

• El repositorio con el resultado final.
• El deploy con el resultado final.

Además, cuéntanos qué otro tipo de retos te gustaría encontrar en esta sección.

#NuncaParesDeAprender