¿Cuál es la mejor hora para despertar sin agotamiento?

La fórmula para despertar sin agotamiento se basa en los ciclos de 90 minutos de sueño. Con esta vamos a calcular los mejores posibles horarios para levantarnos. Y además vamos a crear un sitio web que nos lo diga con un solo click.

¡Te doy la bienvenida a un nuevo reto de CSS y JavaScript! Esta vez vamos calcular los posibles horarios en los que deberíamos levantarnos para cumplir con ciclos de sueño de 90 minutos.

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 JavaScript

Paso 0: planeación

Para este reto te propongo que realices los siguientes 4 pasos:

1. Calcula con JavaScript los horarios para levantarte teniendo en cuenta ciclos de 90 minutos de sueño
2. Accede al DOM para mostrar los horarios que calculaste
3. Añade estilos a tu aplicación
4. ¡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: calcula con JavaScript los horarios para levantarte teniendo en cuenta ciclos de 90 minutos de sueño

Para poder comenzar a calcular los horarios, necesitamos conocer la regla de los 90 minutos para dormir mejor. Esta regla nos dice que para que tengas una buena noche de descanso, lo ideal es que duermas de 5 a 6 ciclos de aprox. 90 minutos.

Teniendo en cuenta esta regla, necesitamos conocer:

1. A qué hora empezarás a dormir
2. Sumarle 104 minutos a esa hora: 90 minutos del ciclo + 14 minutos que tardamos en quedarnos dormidos

Para saber qué hora es en el momento de querer dormir podemos usar el objeto new Date() de JavaScript y con el método setTime() podemos sumar o restar un número específico de milisegundos para finalmente conocer los horarios ideales.

En primera instancia creamos una variable con la hora actual y otra en donde guardaremos la nueva hora:

const currentDate = newDate()
const newDate = newDate()

Luego identificamos cuál es la formulita que debemos aplicar para sumarle los 104 minutos:

(90 + 14) * i * 60 * 1000

• 90 + 14 son los 90 minutos de cada ciclo y 14 el tiempo que tardamos en dormirnos.
• i es el número del ciclo (puede ser de 1 a 6)
• 60 cantidad de segundos en un minuto
• 1000 cantidad de milisegundos en 1 minuto.

Y usamos los métodos setTime y getTime para sumar un nuevo valor a la hora actual y para obtener la hora actual, respectivamente. Esto nos quedaría así:

newDate.setTime(currentDate.getTime() + ((90 + 14) * i * 60 * 1000))

Finalmente, para que i pueda tener valores de 1 a 6 (porque haremos el cálculo para 6 ciclos de sueño) el código nos quedaría de la siguiente forma:

const currentDate = newDate()
const newDate = newDate()

for (let i = 1; i <= 6; i++) {
  newDate.setTime(currentDate.getTime() + ((90 + 14) * i * 60 * 1000))
  const hourToSleep = `${newDate.getHours()}:${newDate.getMinutes()}`console.log('hourToSleep: ', hourToSleep)
}

Como getTime nos devuelve un número en milisegundos (algo que nos servía hacerlo así porque el cálculo lo hicimos a partir de milisegundos), usamos los métodos getHours y getMinutes para obtener ese valor resultante tanto en horas como en minutos y que sea más fácil de entender para el usuario.

Paso 2: accede al DOM para mostrar los horarios que calculaste

Una vez que tenemos nuestro código JavaScript funcionando, comenzamos a plasmar estos resultados en la interfaz. Para ello, escribimos el siguiente HTML:

<ulid="hoursBox">ul>

Ahora desde JavaScript llamamos a la lista que llamamos con const hoursBox = document.getElementById('hoursBox') y hacemos 3 cosas:

1. Crear un elemento li para cada hora
2. Añadimos al li un texto con la hora
3. Agregamos ese li como hijo de ul

li = document.createElement('li')
li.innerText = hourToSleep
hoursBox.appendChild(li)

Nuestro código JavaScript se vería de la siguiente manera:

const hoursBox = document.getElementById('hoursBox')
const currentDate = newDate()
const newDate = newDate()

for (let i = 1; i <= 6; i++) {
  newDate.setTime(currentDate.getTime() + ((90 + 14) * i * 60 * 1000))
  const hourToSleep = `${newDate.getHours()}:${newDate.getMinutes()}`
  
  li = document.createElement('li')
  li.innerText = hourToSleep
  hoursBox.appendChild(li)
}

Adicionalmente, podemos hacer que al darle click a un botón la lista se muestre. Para ello nuestro HTML quedaría de la siguiente forma:

<buttonid="getHours">Conocer horariosbutton><divid="infoBox"><ulid="hoursBox">ul>div>

Añadimos la siguiente clase de CSS:

.visible {
  display: block !important;
}

Y añadimos el evento click del botón a nuestro JavaScript, así:

const button = document.getElementById('getHours')
const infoBox = document.getElementById('infoBox')

button.addEventListener('click', () => infoBox.classList.add('visible'))

Paso 3: añade estilos a tu aplicación

En este paso puedes ser tan creativo(a) como desees. Añade colores, tipografías, imágenes, lo que quieras.

Aquí te comparto algunos recursos que te pueden ser útiles:

• Tipografía Poppins de Google Fonts
• Nombre de colores nativos de CSS
• Imágenes gratis
• Emojis

En mi caso, decidí agregar colores a los textos, al fondo, a las horas y al botón, como también, cambiarle la tipografía y añadir textos descriptivos a la aplicación.

Mi HTML quedó finalmente así:

<div><header><h1>¡Levántate sin agotamientos!h1><p>Para que tengas una buena noche de descanso, lo ideal es que duermas de 5 a 6 ciclos de aprox. 90 minutos.p>header><section><h2>Si te duermes ya, <br/> ¿cuáles son los horarios ideales para despertarte?h2><buttonid="getHours">Conocer horariosbutton><divid="infoBox"><p>Teniendo en cuenta que nos demoramos aprox. 14 minutos en dormirnos, si te acuestas ya, los mejores horarios para que te despiertes son:p><ulid="hoursBox">ul><p>Bonita noche 🌝p>div>section>div>

Y el CSS que le añadí fue el siguiente:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;700&display=swap');

body {
  margin: 0;
  background: Lavender;
  font-family: 'Poppins', sans-serif;
}

div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

header, section {
  max-width: 300px;
  text-align: center;
}

section {
  margin-bottom: 20px;
}

h1, h2 {
  color: BlueViolet;
}

h2 {
  font-size: 16px;
}

p {
  font-size: 12px;
  margin: 0;
}

#infoBox {
  display: none;
}

button {
  border-radius: 20px;
  padding: 8px16px;
  margin: 8px024px;
  background: BlueViolet;
  border: none;
  color: white;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
}

ul {
  list-style: none;
  padding: 0;
  margin-top: 20px;
}

ulli {
  margin-bottom: 12px;
  background: PapayaWhip;
  padding: 8px;
}

.visible {
  display: block !important;
}

Paso 4: ¡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 tu Sleepy Time 😄

Aquí te comparto mi codepen, repositorio de GitHub y deploy con el resultado final.

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

Si quieres seguir aprendiendo sobre cómo dormir mejor, te recomiendo las siguientes lecturas:

• Cómo dormir mejor según la ciencia
• Cómo afecta el sueño en el aprendizaje
• 15 Cosas que seguro te han pasado si amas estudiar de noche

#NuncaParesDeAprender