• Skip to primary navigation
  • Skip to main content
  • Skip to footer

Cursos online y materiales digitales para estudiantes y desarrolladores web

  • CURSOS
  • BLOG
  • QUIÉNES SOMOS
  • FAQ
  • ACCEDER
  • CONTACTO

didacticode

Snippet: cambiar el texto de un botón al hacer click

Publicado el 16/10/2020 por didacticode Leave a Comment

Os traigo un sencillo snippet que nos permite modificar el texto de un botón al hacer click sobre él, en respuesta a la duda que nos planteó Cristian en el canal de Youtube:

Duda Yutube - Cambiar texto botón al hacer click
Duda en Youtube – Cambiar texto de un botón al hacer click sobre él

La solución es muy sencilla: simplemente hay que asociar una función al evento «click» del botón en la que cambiamos el valor de su atributo «value» al que necesitemos.

¡Os dejo el snippet donde podéis verlo!

Filed Under: Tips & Tricks Tagged With: javascript, snippet

Reto resuelto: Un contador de «Me gusta» para Mutiny

Publicado el 14/10/2020 por didacticode 2 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

¿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…

Filed Under: Ejercicio resuelto, Reto Tagged With: javascript, template strings

Herramienta: JSFiddle

Publicado el 10/10/2020 por didacticode Leave a Comment

JSFiddle
IDE online

JSFiddle

Hoy analizaremos a fondo JSFiddle, una herramienta genial no solo para probar código web de manera online. También nos permitirá compartirlo, trabajar de manera colaborativa, etc.

¿Qué es JSFiddle?

JSFiddle es un IDE online que permite a los usuarios editar y ejecutar código HTML, JavaScript y CSS en una sola página. Además, es posible utilizar alternativas a estos lenguajes como SCSS o SASS, Typescript, Coffeescript, etc.
Tiene una interfaz minimalista dividida en cuatro marcos principales correspondientes con los tres lenguajes citados anteriormente y un cuarto marco que muestra el resultado del proyecto ejecutado.

¿Qué características ofrece?

  1. Distintos lenguajes de programación web: HTML, XHTML, CSS, SCSS, SASS, Javascript, Typescript, Coffeescript, Vue, React, etc.
  2. Guardado y compartición de código de manera pública (sin necesidad de login) y privada (versión premium).
  3. Incrustación de código con script o iframe.
  4. Edición de código colaborativa y simultánea con chat y micrófono.
  5. Bifurcación de código (fork).
  6. Opciones de edición de código: verificación de sintaxis, sangría automática, autocompletar, etc.

Análisis a fondo de la herramienta

Web oficial

jsfiddle.net

Versiones

Sólo online

Precio

Versión gratuita
Versión de pago (8€/mes o 90€/año)

Y tú, ¿la has probado? ¿Qué te parece? ¿Conoces alternativas interesantes? ¡Déjame un comentario y cuéntamelo!

Filed Under: Herramientas Tagged With: editor de código, herramientas, jsfiddle

Reto: Un contador de «Me gusta» para Mutiny

Publicado el 05/10/2020 por didacticode 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…

Filed Under: Reto Tagged With: javascri, template strings

Boleticode #06 – Una disculpa, una confesión y una noticia

Publicado el 04/10/2020 por didacticode Leave a Comment

¡Hola!

Te preguntarás a qué se debe el asunto del email. Igual hasta te lo hueles.

Empiezo por la disculpa.

Seguramente la semana pasada recibiste un correo de confirmación de la lista de suscripción cuando, posiblemente, ya estabas suscrito/a. Y lo peor de todo, quizá lo recibiste más de una vez. Un fallo técnico, nunca mejor dicho. Así que reitero mis disculpas y espero no volverla a liar. Obviamente, si has recibido este correo es que estás en la lista en cuestión. Pero si ha sido un error o te lo has pensado dos veces, ya sabes que puedes darte de baja sin problemas cuando te apetezca.

Y ahora la confesión.

No me llamo Ada. ¡No! Es un nombre original, atípico, corto, sin diminutivos, fácil de pronunciar. Pero no el mío. Yo me llamo Laura, como el chorrocientos por cien de las niñas que nacieron en los 80. Y aunque igual estás diciendo: «¡Vaya confesión, ya imaginaba que no te llamabas así!«, todavía hay gente que da por sentado que me llamo Ada Lovecode (¡algunos hasta me han preguntado!). Pues no. El nombre de la protagonista de esta web se llama así en honor a Ada Lovelace, considerada la primera programadora de la historia. Mi alter ego. Mi otro «yo». ¡Misterio resuelto! Pues eso, yo soy Laura, y a partir de ahora es posible que me encuentres detrás de estos correos. ¡O no! Me lo pensaré. En cualquier caso, si quieres saber más de mí, en la página de Quiénes somos he contado un poco mi vida y milagros. Y por último, aprovecho para decirte que ya está operativa la nueva web.

Y trae un montón de mejoras.

De momento, podrás:
  • Hacer un seguimiento de los cursos.
  • Gestionar un perfil de usuario mucho más completo.
  • Escribirme a través del formulario de contacto.
Y otras tantas que te iré descubriendo poco a poco. Recuerda que la web está evolucionando cada día gracias al feedback de codelovers como tú. Así que te animo a que me escribas un correo siempre que quieras a través del formulario de contacto.

O si solo quieres saludarme, puedes hacerlo respondiendo a este correo con un «¡Hola, mundo!» y te contestaré personalmente 😉

Para finalizar, te recuerdo que vuelve a la actividad habitual con nuevo material cada semana… y atento/a porque vienen sorpresas 😉 Laura, Ada… ¡y Edu!

Filed Under: Boleticode Tagged With: boleticode

Boleticode #05 – ¡Vuelta al cole!

Publicado el 14/09/2020 por didacticode Leave a Comment

¿Qué tal ha ido este verano atípico? ¡Espero que muy bien dentro de la «anormalidad»! Como sabrás, estos dos meses la web ha estado muy parada… al menos «de puertas para afuera». Pero de puertas para dentro he estado haciendo muuuuuuchos cambios que me gustaría enseñarte cuanto antes.

Por eso, a partir de mañana y hasta que termine la migración, la web estará en modo mantenimiento (quiero comprobar que todo funciona correctamente antes de poner la nueva a andar). Así que ¡no preocuparse que en seguida volvemos a la carga!

Entre tanto, me gustaría hacer una pequeña consulta. Y es que he recibido muchos correos con pequeños problemas o dudas que con un minitutorial se solucionarían (configuración de XAMPP, recomendaciones sobre editores, consultas puntuales de programación…). ¿A ti también te ha pasado que te has enredado con algo mucho tiempo y que podrías haber solucionado con un pequeño tutorial? ¡Cuéntamelo! Seguro que a otros codelovers también les vendrá bien 😉

¡Síiii! ¡A mí me pasó esto!

Y si eres nuevo por aquí, o no curioseaste la última vez, recuerda que puedes consultar el Roadmap de Didacticode para saber lo que está por venir y dejar tus comentarios o escribirme un correo a ada@didacticode.com.

Una vez más, muchas gracias por leer. ¡Disfruta de septiembre y nos vemos MUY pronto!

Ada… ¡y Edu!

Filed Under: Boleticode Tagged With: boleticode

  • « Go to Previous Page
  • Go to page 1
  • Go to page 2
  • Go to page 3
  • Go to page 4
  • Go to page 5
  • Interim pages omitted …
  • Go to page 8
  • Go to Next Page »

Footer

Didacticode

Cursos para estudiantes y docentes del mundo de la informática.
Retos: retos resueltos de programación.
Tips&Tricks: trucos y consejos.
Boleticodes: boletines de noticias.
Quiénes somos: Ada, Edu... y Laura.
Contacto¡Contacta conmigo!

Legal

Aviso legal
Política de privacidad
Cookies

Redes Sociales

Youtube
Twitter
Instagram
Facebook
Twitch
LinkedIn
Gitlab
Github

Didacticode © 2021

¡Cómo no! Este sitio también utiliza cookies para mejorar la experiencia de tu visita.

Puedes informarte más sobre qué cookies estamos utilizando o desactivarlas en los AJUSTES.

Resumen de privacidad
Didacticode

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.