Cursos online y materiales digitales para estudiantes y desarrolladores web

Ejercicio resuelto

Reto resuelto: Programando el Delorean de Marty McFly

Publicado el por Leave a Comment

Regreso Al Futuro

Regreso al futuro

Programación

Cálculos con fechas

Fue Marty McFly quien se presentó en vivo y en directo subido a su monopatín en nuestra casa atemporal. Doc y él habían programado la máquina del tiempo pero necesitaban una pequeña funcionalidad para saber exactamente cuánto viajaban al futuro o al pasado y que os contaba en esta entrada.

Enunciado del reto:

El reto decía:

Tenemos los dos visores de las fechas destino y presente y sus valores pueden introducirse libremente por el usuario en cada uno de los campos.
Necesitamos que, al pulsar el botón de cálculo de viaje nos diga si vamos a viajar al futuro o al pasado, y cuántos años, días, minutos y segundos vamos a desplazarnos.
Ejemplo de entrada:
En los campos de presente: OCT 26 1985 01:21
En los campos de destino: JUN 01 2020 17:00
Ejemplo de salida: Vas a viajar al futuro 34 años, 227 días, 14 horas y 39 minutos.
Nota: no necesitamos los meses porque pueden tener 28, 30 o 31 días.

En este caso, pensamos que no había mucho donde rascar, y resolvimos el reto de una única manera:

  • En primer lugar definimos un array para colocar los meses en español.
  • A continuación extrajimos todos los campos de las fechas del formulario.
  • Convertimos los campos de fecha en un objeto de tipo Date.
  • Finalmente realizamos los cálculos para saber cuántos minutos, horas, días y años había entre las dos fechas y mostramos la información.

Pero como siempre, recordad, ¡no hay una única solución al problema; hay soluciones mejores y soluciones peores!

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

En este vídeo veremos:

  • Cómo definir un array constante de cadenas de tres caracteres.
  • Cómo extraer la información de los campos de un formulario.
  • Cómo transformar datos numéricos en un objeto Date.
  • Cómo realizar cálculos para conocer el tiempo que transcurre entre dos fechas.
  • El procedimiento de transformación de milisegundos a otras unidades de tiempo (¡son operaciones aritméticas sin trampa ni cartón!).
  • Cómo mostrar la información textual en una etiqueta HTML.

Vídeo y código fuente

¡¿A qué esperas?! ¡Echa un ojo al vídeo!

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 resuelto: #0000FF oscuro casi #000000

Publicado el por Leave a Comment

Azul oscuro casi negro

Azul oscuro casi negro

Programación

Cambio de bases

La semana pasada el director de cine Daniel Sánchez Arévalo nos enviaba un reto en el que nos pedía que transformáramos colores en decimal a hexadecimal y que titulamos #0000FF oscuro casi #000000.

Enunciado del reto:

El reto decía:

Hola, Ada:
Necesito un programa sencillito que transforme un código en RGB en hexadecimal. La idea es que, a partir de tres variables (rojo, verde y azul) devuelva el código de color en hexadecimal.
Ejemplo de entrada: 0, 36, 255
Ejemplo de salida: #0024ff

En este caso dimos con cuatro maneras de resolverlo; o mejor dicho, dos, una de ellas con variaciones, que podrás ver en dos vídeos:

  • La primera, la más clásica, en la que no utilizamos funciones especiales de Javascript. Esta sería la versión que, desde el punto de vista algorítmico, podría trasladarse a otros lenguajes de programación de alto nivel cambiando detalles mínimos.
  • La segunda, en la que utilizamos una función de Javascript que nos permite parsear un número en binario a hexadecimal.
  • La tercera, similar a la anterior, pero con una comprobación un poco más sencilla para asegurarnos que los números recibidos están entre 0 y 255.
  • La última, una versión de la tercera utilizando una función flecha, o arrow function.

Pero como siempre, recordad, ¡no hay una única solución al problema; hay soluciones mejores y soluciones peores!

¿Qué aprenderás en los vídeos?

En este vídeo veremos:

  • Cómo seleccionar un elemento de un array constante.
  • Cómo trabajar con las operaciones división con decimales, división entera y módulo o resto.
  • La función toString para hacer una transformación entre bases.
  • La función slice para extraer un número de caracteres de una cadena.
  • La función toUpperCase para transformar una cadena a mayúsculas.
  • Un modo de reducir un número a un rango de valores con Math.max y Math.min.
  • Y por último, cómo transformar una función normal a una arrow function.

Vídeos y código fuente

¡¿A qué esperas?! ¡Echa un ojo a los vídeos vídeo!

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? ¡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: Walter White y los códigos de las bolsas de meta azul

Publicado el por Leave a Comment

Breaking Bad

Breaking Bad

Programación

Procesar una cadena de números

La semana pasada recibíamos un reto desde Alburquerque, en Nuevo México (EEUU). El mismísimo Walter White necesitaba que le echáramos una mano con los códigos de las bolsas de meta azul que iban a traficar y que os contábamos en esta entrada.

Enunciado del reto:

El reto decía:

Señorita Ada:
A partir de una lista de códigos de bolsas de meta azul queremos identificar cuál es “diferente” a las demás: si las demás son pares, cuál es la impar; y viceversa.
Dispondrá de una CADENA de códigos y deberá mostrarnos cuál de ellos no se corresponde con el resto.
Ejemplo de entrada: “1234 2345 3456 1358 2360 2246 8088”
Ejemplo de salida: 2345
Nota: solo habrá una bolsa “diferente”, por lo que validar esa información no es necesario.

Y una vez más dimos con, al menos, dos maneras de resolverlo:

  • La primera, en la que almacenamos en dos arrays (pares e impares) los números recorriendo uno a uno los elementos de la lista dada y comprobando cuál de los dos arrays contiene un único elemento.
  • La segunda, del estilo a la anterior pero mucho más compacta, y que utiliza la función filter() de Javascript:

Pero recordad, ¡no hay una única solución al problema; hay soluciones mejores y soluciones peores!

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

En este vídeo veremos:

  • Cómo transformar una cadena de texto en un array utilizando la función split().
  • Cómo insertar elementos en un array con Javascript utilizando la función push().
  • Un ejemplo práctico de uso del operador ternario (? :).
  • Y por último, cómo trabajar con la función filter() para convertir un array en otro con una serie de elementos que cumplen con una condición (¡ojo, utilizamos una función arrow).

Vídeos y código fuente

¡¿A qué esperas?! ¡Echa un ojo al vídeo!

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 resuelto: gestión de pasajeros del expreso de Hogwarts

Publicado el por Leave a Comment

Harry Potter

Harry Potter

Programación

Procesar un array bidimensional

Una semana más recibimos un reto desde el mismo Colegio Hogwarts de Magia y Hechicería que titulamos “Gestión de pasajeros del expreso de Hogwarts“.

Enunciado del reto:

El reto decía:

Señorita Ada:
Necesitamos controlar el número de pasajeros que llegan al final de un trayecto teniendo en cuenta cuántos suben y bajan en cada parada.
Le facilitaremos una lista del tipo: [s1,b1][s2,b2][s3,b3]… donde en cada par de elementos va el número de pasajeros que se suben (s) y el número de pasajeros que se bajan (b). Así, procesando esa lista, sabremos el número de pasajeros finales que debería llegar a fin de trayecto.
Ejemplo de entrada: [[7,0][8,2][9,5][3,1]]
Ejemplo de salida: 19 pasajeros
* Nota: En el primer par de números, el segundo siempre será 0 porque en la estación de origen no se baja nadie. No hace falta controlar ese número: se lo facilitaremos siempre de manera correcta.

Para solventarlo se nos ocurrió hacerlo de dos maneras:

  • Una clásica, que desde el punto de vista de la algoritmia es aplicable a la mayoría del resto de lenguajes de programación de alto nivel (Java, C, C++…).
  • Otra propia de Javascript que utiliza una interesante función llamada reduce.

Pero recordad, ¡no hay una única solución al problema; hay soluciones mejores y soluciones peores!

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

Así que en este vídeo os explico:

  • Cómo procesar un array bidimensional utilizando un bucle for.
  • Cómo funciona la función reduce de Javascript para convertir un array en un único valor.
  • Cómo trabajar con la función reduce y una función arrow pasándole el array de dos modos diferentes.

Vídeos y código fuente

¡Al lío! ¡Echa un ojo al vídeo!

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 resuelto: Dustin, Suzie y la constante de Planck

Publicado el por 2 Comments

Stranger Things

Stranger Things

Programación

Validar una contraseña con Javascript

La semana pasada recibíamos el reto para ponérselo difícil a los personajes de Stranger Things, cuyo título era “Dustin, Suzie y la constante de Planck“.

Enunciado del reto

El reto decía así:

Señorita Ada:
Necesitamos que cree un formulario que compruebe si se ha introducido correctamente la constante de Planck.
* Que, por cierto, es 6.62607015, aunque Suzie menciona una versión anterior 6,62607004.

En esta ocasión, y basándonos en el reto de la semana anterior (Berlín, Tokio y Moscú también son capitales), he diseñado dos soluciones:

  • Una sencilla, que comprueba simplemente que la contraseña cumple con alguno de los dos valores de la constante de Planck.
  • Una un poco más compleja y que se lo pone chupao a los que tienen que introducirla: además de comprobar los valores validamos el formulario HTML.

Pero recordad, ¡no hay una única solución al problema; hay soluciones mejores y soluciones peores!

¿Qué aprenderás en los vídeos?

Así que en estos dos vídeos os explico:

  • Cómo asignar un evento a un objeto (en este caso, al botón enviar) para que se ejecute una función cuando hacemos click sobre él.
  • Cómo llamar a a función con nombre y a una función anónima asociadas a un evento.
  • Cómo evitar el envío de un formulario.
  • Cómo comprobar que un valor se corresponde con uno de entre cuatro.
  • Cómo crear un patrón para un decimal como la constante de Planck.
  • Cómo realizar una validación de campo no vacío y patrón.
  • Cómo utilizar el selector :valid e :invalid de CSS para asignar un estilo a un campo que cumple con las restricciones… o no.
  • Cómo usar validity y no morir en el intento.
  • Cómo modularizar el código con tres funciones.

Vídeos y código fuente

¡Basta de rollos! ¡Echa un ojo a los vídeos!

Código fuente de la solución (1/2)
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!
Código fuente de la solución (2/2)
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 resuelto: Berlín, Tokio y Moscú también son capitales

Publicado el por 2 Comments

La casa de papel

La casa de papel

Programación

Uso de condicionales y arrays

Han pasado 10 días desde que recibimos el reto sobre los personajes de La Casa de Papel al que pusimos por nombre “Berlín, Tokio y Moscú también son capitales“.

Enunciado del reto

El reto decía así:

Querida Ada, nos estamos haciendo un lío con los nombres de los atracadores que no te imaginas. Necesitamos que crees un programa que, dada una capital indique si se trata de uno de los nombres elegidos por El Profesor para alguno de los miembros de su equipo o no.
Necesitamos tenerlo para el sábado… ¡hay demasiados rehenes en juego!

En este tiempo hemos recibido multitud de ideas, propuestas, códigos… ¡¡muchas gracias a tod@s por echarnos una mano!! Y es que, como ya dice Edu: no hay una única solución al problema; hay soluciones mejores y soluciones peores.

Por eso aquí tenéis no 1, sino 10 propuestas para resolver el reto; y en cada una de ellas os dejo mi punto de vista: por qué la propuesta es regulera, buena o… mejor 😉

¿Qué aprenderás en los vídeos?

En los vídeos te explico:

  • Por qué deberíamos utilizar un único return por cada función.
  • Por qué no utilizar ifs sin encadenar.
  • Cómo utilizar un switch y ahorrarnos varias instrucciones en los case.
  • La diferencia entre resolver con operadores lógicos or y and.
  • Un clásico: recorrer un array… ¿pero cómo hacerlo eficiente para evitar que lo recorra entero en caso de encontrar el valor buscado?
  • Y mis favoritos: cuatro métodos para arrays propios de Javascript ES5, ES6 y ES7.

Vídeos y código fuente

¡Vale de cháchara! ¡Echa un ojo a los vídeos!

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…