Cursos online y materiales digitales para estudiantes y desarrolladores web

cadenas

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

Publicado el por 2 Comments

Breaking Bad

Breaking Bad

Programación

Procesar una cadena de números en dos arrays

Acceder al reto en formato vídeo

Walter White y Jesse Pinkman se han dado cuenta de que la última remesa de bolsas de meta azul que han fabricado no es tan pura como las anteriores. ¡Pero no quieren desperdiciarla!

Así que han decidido hacer lo siguiente para que nadie más se dé cuenta: en cada lote de bolsas van a meter una de mala calidad. Y para diferenciarla de las demás van a etiquetarla con un número “diferente”. Ese número será un número par si el resto de bolsas están identificadas por números impares; o será un número impar si el resto se identifican por números pares.

Y, cómo no, esta misma mañana recibí, a través de Edu, una notificación desde Alburquerque (qué calor).

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 Edu, para no variar, me puso en situación:

¿Si no es un array, cómo vas a procesar los valores? Necesitarás una lista para pares y otra para impares, ¿no? ¿Vas a hacerlo con un for o utilizarás algún tipo de filtro? ¿Si le pedimos una muestra nos mandarán la buena o la mala?

Sin duda la primera pregunta la tenía clara, y la segunda… también; pero la tercera me dio que pensar y creo que lo resolveré de dos maneras diferentes.

¿Tú cómo lo harías? ¡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…