Cursos online y materiales digitales para estudiantes y desarrolladores web

Reto

Reto resuelto: cambiar fondo de página en función del mes

Publicado el por Leave a Comment

background

Cambiar la imagen y el color de fondo de una página en función del mes

Javascript, jQuery y CSS

Estilos

La semana pasada nos enfrentábamos a un nuevo reto: cambiar el fondo de una página de manera que tuviera una imagen de fondo con una capa de color superpuesta (lo que se denomina en jerga de diseño overlay) al 90%, partiendo de 12 imágenes en blanco y negro y 12 códigos de color, una imagen y un código para cada mes.

Soluciones al reto

En esta ocasión os traigo dos soluciones al reto:

  • La primera, utilizando Vanilla Javascript para hacer referencia a los elementos.
  • La segunda, utilizando JQuery, lo que nos reduce sustancialmente el código.
  • Además vemos brevemente cómo trabajar con .scss para generar el .css resultante.

¿Qué aprenderás en el vídeo?

En este vídeo veremos:

  • Cómo utilizar variables en .scss para indicar la ruta de partida, colores e imágenes.
  • Cómo resulta el código .css transpilado.
  • Qué estilo utilizar para crear una imagen con un overlay de color.
  • Cómo ejecutar una función después de cargar el DOM de una página con Javascript puro y con jQuery.
  • Cómo crear una función que devuelva una cadena en función de un número.
  • Cómo extraer el mes actual a partir de la fecha actual.
  • Cómo seleccionar el body de una página con Javascript puro y con jQuery y aplicarle una clase en función de la fecha actual.

Vídeo y código fuente

¿Quieres saber cómo lo solucioné paso a paso? (salvando pequeñas diferencias…). ¡Aquí tienes el código fuente y el vídeo de la solución!

Código fuente de la solución
You do not have access to this post. ¡Ups! Este contenido es solo para codelovers, ¿no te has registrado aún? ¡Hazlo ahora! ¡Regístrate o accede!

Y si quieres compartir tu propuesta, te recomiendo que utilices alguna herramienta online de testing de código como Codepen, JSFiddle, PlayCode, etc. o repositorios como GitHub, GitLab, BitBucket…

Reto: cambiar fondo de página en función del mes

Publicado el por 9 Comments

background

Cambiar la imagen y el color de fondo de una página en función del mes

Javascript, jQuery y CSS

Estilos

El enunciado lo dice todo: la página tiene que tener una imagen de fondo con una capa de color superpuesta (lo que se denomina en jerga de diseño overlay) al 90%, de modo que dispongo de 12 imágenes en blanco y negro y 12 códigos de color, una imagen y un código para cada mes.

Necesito programar de algún modo que, en función del mes en el que nos encontremos, se modifique el fondo de la página y el color superpuesto.

Te dejo un par de pistas:

  • Clases CSS
  • linear-gradient

¿Te atreves a intentarlo? ¡Espero tus propuestas en los comentarios!

Y si quieres compartir código, te recomiendo que utilices alguna herramienta online de testing de código como Codepen, JSFiddle, PlayCode, etc. o repositorios como GitHub, GitLab, BitBucket…

Reto resuelto: Las redes sociales de Mark Zuckerberg

Publicado el por 3 Comments

Redes sociales

Las redes sociales de Mark Zuckerberg

Javascript y JQuery

Eventos

La semana pasada recibíamos un reto de Mark Zuckerberg en el que nos pedía una pequeña funcionalidad para controlar la edad de los nuevos usuarios de sus redes sociales. Podéis consultar los detalles del reto aquí.

Enunciado del reto:

La carta de Mark decía así:

¡Hola, chicos!
Necesito vuestra ayuda para implementar un pequeño código en mis formularios de creación de cuentas para que, cuando un usuario indique que es mayor de edad (de momento, 18 años), introduzca además su fecha de nacimiento para comprobar que es cierto.
Como me corre bastante prisa, únicamente quiero que el formulario haga dos cosas muy simples:
1. Al marcar el checkbox se mostrará un pequeño mensaje, un campo de fecha y un botón que inicialmente estará deshabilitado.
2. Si el usuario introduce correctamente la fecha y realmente tiene 18 años o más, se habilitará el botón Enviar.
Una vez que implementéis esto os pediré una segunda funcionalidad para diferenciar entre las redes sociales que manejo y sus diferentes mayorías de edad. Pero eso será en otro momento…
Os dejo el código fuente del formulario. ¡Gracias por todo!

Soluciones al reto

En esta ocasión os traigo dos soluciones al reto:

  • La primera, utilizando Vanilla Javascript para hacer referencia a los elementos.
  • La segunda, utilizando JQuery, lo que nos reduce sustancialmente el código.
  • En ambos casos utilizo la misma función de comprobar la edad de la persona a partir de su fecha de nacimiento.

¿Qué aprenderás en el vídeo?

En este vídeo veremos:

  • La diferencia entre visibility:hidden y display:none;
  • Cómo hacer referencia a elementos del DOM utilizando Vanilla Javascript y JQuery.
  • Cómo utilizar la función toggle de JQuery.
  • Cómo calcular el tiempo transcurrido entre una fecha y el día de hoy.
  • Qué es un operador ternario y cómo utilizarlo.

Vídeo y código fuente

¡¿A qué esperas?! ¡Echa un ojo al vídeo de la solución!

Código fuente de la solución
You do not have access to this post. ¡Ups! Este contenido es solo para codelovers, ¿no te has registrado aún? ¡Hazlo ahora! ¡Regístrate o accede!

¿Tú cómo lo habrías hecho? ¡Deja tus ideas en los comentarios!

Y si quieres compartir código, te recomiendo que utilices alguna herramienta online de testing de código como Codepen, JSFiddle, PlayCode, etc. o repositorios como GitHub, GitLab, BitBucket…

Reto: Las redes sociales de Mark Zuckerberg

Publicado el por 3 Comments

Redes sociales

Las redes sociales de Mark Zuckerberg

Javascript y JQuery

Eventos

Acceder al reto en formato vídeo

A Mark Zuckerberg, creador y fundador de Facebook, ha tenido un encontronazo con las leyes españolas en las que se regula la mayoría de edad para acceder a ciertas redes sociales (entre ellas, las suyas: Facebook, Instagram o Whatsapp).

Mark está muy liado con su bufete de abogados y ha decidido contar con nosotros para que implementemos la funcionalidad que controle la edad de las personas que se inscriben a su red social.

El mensaje que nos envió decía lo siguiente:

¡Hola, chicos!
Necesito vuestra ayuda para implementar un pequeño código en mis formularios de creación de cuentas para que, cuando un usuario indique que es mayor de edad (de momento, 18 años), introduzca además su fecha de nacimiento para comprobar que es cierto.
Como me corre bastante prisa, únicamente quiero que el formulario haga dos cosas muy simples:
1. Al marcar el checkbox se mostrará un pequeño mensaje, un campo de fecha y un botón que inicialmente estará deshabilitado.
2. Si el usuario introduce correctamente la fecha y realmente tiene 18 años o más, se habilitará el botón Enviar.
Una vez que implementéis esto os pediré una segunda funcionalidad para diferenciar entre las redes sociales que manejo y sus diferentes mayorías de edad. Pero eso será en otro momento…
Os dejo el código fuente del formulario. ¡Gracias por todo!

Como siempre, Edu se puso a darle vueltas al reto:

En realidad, esto de algoritmia tiene poco, ¿verdad? Únicamente es una gestión de eventos con Javascript. ¿Utilizamos el modelo de eventos del W3C? ¿Qué propiedades habría que tocar, visibility o display? ¿Y cómo sé yo qué fecha es el límite de los 18 años? Oye, ¿y si lo hacemos con JQuery?

¡Mmmmmm, buena idea! Podíamos probar con Vanilla Javascript y con JQuery y así comparar…

¿Tú cómo lo harías? ¡Espero tus propuestas en los comentarios!

Y si quieres compartir código, te recomiendo que utilices alguna herramienta online de testing de código como Codepen, JSFiddle, PlayCode, etc. o repositorios como GitHub, GitLab, BitBucket…

Reto resuelto: Un contador de “Me gusta” para Mutiny

Publicado el por 4 Comments

Halt and catch fire

Halt and catch fire

Programación

Template strings

Desde mediados de los años 80, Cameron Howe contactó con nosotros para crear un contador de Me gusta para su nueva red social, Mutiny. Podéis consultar todos los detalles del reto aquí.

Enunciado del reto:

El mensaje de Cameron decía así:

¡Hey, Ada y Edu! ¿Cómo os va?
Veréis, Donna y yo necesitamos un sistema de votaciones que permitan que, cuando alguien publique algo en nuestra comunidad, el resto de usuarios puedan indicar que les gusta.
No queremos un simple contador de “me gustas”, si no que debería mostrarse lo siguiente:
– Si nadie ha indicado que le gusta, aparecerá el mensaje “Nadie ha dicho que le gusta esto”.
– Si una persona ha indicado que le gusta, “A -nombre- le gusta esto”.
– Si son dos personas, “A -nombre1- y -nombre2- les gusta esto”.
– Si son tres personas, “A -nombre1-, -nombre2- y -nombre3- les gusta esto”.
– Si son más de tres personas, “A -nombre1-, -nombre2- y a otros -numeropersonas- les gusta esto”.
No necesitamos que nos implementéis un botón o enlace para hacerlo funcionar. Simplemente una función que, al recibir una lista de nombres, nos devuelva el mensaje correspondiente. ¿Podríais ayudarnos?

Soluciones al reto

Una vez más, os presento varias soluciones al reto:

  • La clásica, utilizando un switch en el que cada case muestra una opción.
  • La nueva, con template strings, que evita tener que alternar continuamente variables con literales utilizando las comillas `. Además, almaceno los pares clave-valor en un objeto y selecciono el tamaño correspondiente al array utilizando la función Math.min.
  • La mezcla, utilizando un switch e incluyendo template strings en cada case en lugar de utilizar un objeto. Además, incluyo un operador de propagación (…) para almacenar todos los nombres a partir del cuarto.

¿Qué aprenderás en el vídeo?

En este vídeo veremos:

  • Cómo utilizar un switch (normal y corriente).
  • Cómo utilizar template strings incluyendo elementos de un array.
  • Cómo crear un objeto con diferentes pares clave:valor y seleccionar uno de ellos utilizando corchetes y la función Math.min.
  • Cómo utilizar el operador de propagación para asignar un array a otro.

Vídeo y código fuente

¡¿A qué esperas?! ¡Echa un ojo al vídeo de la solución!

Y cómo no, el código fuente:

Código fuente de la solución
You do not have access to this post. ¡Ups! Este contenido es solo para codelovers, ¿no te has registrado aún? ¡Hazlo ahora! ¡Regístrate o accede!

¿Tú cómo lo habrías hecho? ¡Deja tus ideas en los comentarios!

Y si quieres compartir código, te recomiendo que utilices alguna herramienta online de testing de código como Codepen, JSFiddle, PlayCode, etc. o repositorios como GitHub, GitLab, BitBucket…

Reto: Un contador de “Me gusta” para Mutiny

Publicado el por 1 Comment

Halt and catch fire

Halt and catch fire

Programación

Template strings

Acceder al reto en formato vídeo

Cameron Howe está más centrada que nunca en hacer crecer Mutiny. La primera comunidad online que en un futuro se convertiría en el IRC tiene cada vez más usuarios y ha pensado crear una especie de sistema de votaciones.

Nos ha contactado para pedir ayuda porque no está muy familiarizada con este tipo de funcionamiento de las redes sociales del futuro. Su mensaje decía así:

¡Hey, Ada y Edu! ¿Cómo os va?
Veréis, Donna y yo necesitamos un sistema de votaciones que permitan que, cuando alguien publique algo en nuestra comunidad, el resto de usuarios puedan indicar que les gusta.
No queremos un simple contador de “me gustas”, si no que debería mostrarse lo siguiente:
– Si nadie ha indicado que le gusta, aparecerá el mensaje “Nadie ha dicho que le gusta esto”.
– Si una persona ha indicado que le gusta, “A -nombre- le gusta esto”.
– Si son dos personas, “A -nombre1- y -nombre2- les gusta esto”.
– Si son tres personas, “A -nombre1-, -nombre2- y -nombre3- les gusta esto”.
– Si son más de tres personas, “A -nombre1-, -nombre2- y a otros -numeropersonas- les gusta esto”.
No necesitamos que nos implementéis un botón o enlace para hacerlo funcionar. Simplemente una función que, al recibir una lista de nombres, nos devuelva el mensaje correspondiente. ¿Podríais ayudarnos?

Edu, una vez más, planteó sus ideas sobre el reto:

Con opciones tan concretas, hay poco código que repetir, ¿no? Además de utilizar un switch, ¿se te está ocurriendo la misma idea que a mi? ¿No crees que es el momento perfecto para utilizar Template Strings? Lo reconozco, Cameron y Donna son ídolos para mi 🙂

Y tenía razón, era el momento ideal de utilizar algo como las Template Strings… ¡pero también se podían utilizar opciones “clásicas“, ¿verdad?

¿Tú cómo lo harías? ¡Espero tus propuestas en los comentarios!

Y si quieres compartir código, te recomiendo que utilices alguna herramienta online de testing de código como Codepen, JSFiddle, PlayCode, etc. o repositorios como GitHub, GitLab, BitBucket…