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:
Para este reto, te propongo que realices los siguientes 8 pasos:
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!
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:
Lo que necesitamos | Propiedad(es) y valor(es) para lograrlo |
---|---|
Posicionamiento absoluto | position: absolute |
Redondeado completo | border-radius: 50% |
Un ancho de 0.4rem | width: 0.4rem; |
Un alto de 0.4rem | height: 0.4rem; |
Un background rgb(253 230 138) | background: rgb(253 230 138); |
Un box shadow de 10px 10px 50px 30px (este valor lo puedes obtener de aquí) y con el color de background anterior | box-shadow: 10px 10px 50px 30px rgb(253 230 138); |
Un posicionamiento tanto arriba como al lado izquierdo para la luz 1 | top: 11%; y left: 24%; |
Un posicionamiento tanto arriba como al lado izquierdo para la luz 2 | top: 11%; y left: 46%; |
Un posicionamiento tanto arriba como al lado izquierdo para la luz 3 | top: 16%; y left: 59%; |
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:
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 yabsolute
yrounded-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()
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')
})
}
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()
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.
¡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:
Además, cuéntanos qué otro tipo de retos te gustaría encontrar en esta sección.
#NuncaParesDeAprender
No estoy en el área de Frontend pero me encanta como se ven las interfaces de este proyecto. Te quedo genial el resultado 💚✨
Gracias, Julián !!! 💚
Voy a guardar este post para realizar el reto para cuando tenga el curso de tailwind completado… La idea de las luces y animaciones no se me había llegado a ocurrir
Esoooo !!! Me muestras el resultado finaaaal 🎉
Gracias Teff, lo pondré en practica 😄, ¡muy bonito diseño!
Genial !!! Graciasss 💚
Luce genial! 😮 No consigo ver el deploy, la página aparece caída 😦
Y ahora ? hehe…
aaaaaaaaa
Donde encuentras este problema, ralerv?
Con el deploy, pero ya no pasa 😄
información muy interesante
💚💚💚