Halt and catch fire
ProgramaciónTemplate 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í:
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
¡Ups! Este contenido es solo para codelovers, ¿no te has registrado aún? ¡Hazlo ahora!¿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…