Una vez construída la UI en la parte anterior, pasemos a la verdadera chicha del proyecto: la lógica de programación con JavaScript.
Evaluación de la estructura de navegación entre archivos HTML
No tengo muy claro si debería navegar entre las páginas usando algún tipo de lógica, o si con los hrefs apuntando al archivo HTML que les corresponde es suficiente. Pero después de hacer una investigación al respecto, lo dejo tal cual está, porque de momento, "funciona" 
.
Refactorizando el menú: un poquito de DOM manipulation
Lo que sí que voy a hacer es refactorizar el menú para dejar de usar el bloque de código del <header> por todas partes y escribirlo una única vez, intentando hacer honor al principio DRY. Repasando estos posts sobre el DOM y este curso de JS, sé que debo manipular el DOM para eso, y crear el menú entre template literals en el index.js (commit).
Tampoco había vinculado el archivo JS con todos los archivos HTML, así que corrijo eso.
Un intento de hacer una página multi-lenguaje
Qué ingenua era cuando planeé esto, ya que pensé que sería algo así como crear un archivo JSON y crear dynamic keys en lugar de valores hardcoded, tipo:
<a href="./login.html"><span id="loginID">{{login}}</span></a>
Y en algún JSON recoger las traducciones, tipo:
login: {
'esp': 'iniciar sesión',
'eng': 'login'
}
Pero no he conseguido hacerlo. Así que sólo me he centrado en traducir los elementos del top menu (commit). Es una solución muyyyy mejorable, porque he utilizado la almohadilla de la URL (#) para determinar qué idioma usar, con consecuencias tan desastrosas como que, al recargar la página o al cambiar de página, la elección del usuario se pierde 
.
Además, la variable dataReload es undefined a menos que le aplique un setTimeout, lo cual no acabo de entender 
.
También he añadido strict mode (commit) para que capturar errores sea más sencillo y prevenir también algunos comportamientos indeseados.
Cambios en la página ETF screener
He añadido funcionalidad a la lista de asset types de la izquierda, haciendo que se puedan añadir a la UI al hacer clic sobre ellos (commit). Pensaba que lo mejor era injectar el HTML con JS, pero me estaba complicando la vida. Así que en este commit lo arreglo.
Además, he añadido la posibilidad de eliminar un filtro (una chip) de manera individual al hacer clic sobre él. No es una código muy DRY, y además, el añadir la propiedad style + display no me convence, teniendo alternativas mejores. Por ejemplo, crear una clase tipo d-none para aplicarla cuando queramos ocultar elementos del DOM.
También añado la posibilidad de resetear todos los filtros a la vez haciendo clic en el botón Reset filters (commit) y lo oculto al iniciar la app (commit).
Creo la clase d-none en CSS, como he mencionado arriba, y la añado a ciertos elementos HTML para ocultarlos cuando se inicie la app (commit). Es una manera más visual de hacer las cosas, porque así tenemos un código HTML que refleja el estado inicial de la página, y la DOM manipulation que hagamos en JS ocurrirá al interactuar con la página, no antes.
Para aprender a hacer todo esto, me ayudó mucho el curso de JS de Jonas, que me hizo descubrir recursos tan curiosos como este Live DOM viewer.
Cómo crear una URL en GitHub para ver una demo de un proyecto (GitHub pages)
He hecho esto mil veces y siempre olvido algún paso que me bloquea cada vez que quiero crear una URL de un proyecto. Por eso, he decidido documentarlo. Es cierto que los pasos son ligeramente distintos si lo que queremos es crear una URL para un proyecto hecho con Angular, pero con vanilla JS, estos serían los pasos:
Requisito previo: tener (mínimo) un archivo HTML en la raíz (root) del proyecto.
1. Vamos a settings
y buscamos la sección Github pages. Ahí debería decirte que github pages está desactivado:
2. Seleccionamos la branch desde la que queremos crear la URL y la carpeta raíz, en mi caso:
3. Al guardar, vemos que GitHub nos genera una URL, en mi caso:
Debemos esperar (máximo) unos 20 minutos hasta que la URL esté activa. Pasado ese tiempo, la URL ya debería funcionar, mostrando tu estupenda app en acción.
¡FIN DE ESTA PARTE!
¡Y esto es todo por ahora! Este es el aspecto actual de la web. Espero que hayas aprendido algo nuevo 
. Si te queda alguna duda, ¡nos vemos en los comentarios!
Sobre la autora de este post
Soy Rocío, una abogada reconvertida en programadora. Soy una apasionada de aprender cosas nuevas y ferviente defensora de que la única manera de ser feliz es alcanzando un equilibrio entre lo que te encanta hacer y lo que te saque de pobre. Mi historia completa, aquí.
Más recursos de aprendizaje
En mi experiencia, la manera más eficaz para aprender JavaScript es combinando varias vías de aprendizaje. Uno de mis métodos favoritos son los vídeo-cursos y mi plataforma predilecta para eso es Udemy, aunque no es la única. He hecho varios cursos pero sólo recomiendo aquellos que verdaderamente me han sido útiles. Aquí van:
The Complete JavaScript Course - Jonas Schmedtmann
JavaScript: The Advanced Concepts - ZTM Academy
Si necesitas apoyo en forma de libro, puede que éstos te sirvan de ayuda:
La programación es un mundo que evoluciona a una velocidad de vértigo. Los autores de estos libros lo saben, por eso suelen encargarse de actualizar su contenido regularmente. Asegúrate de que así sea antes de adquirirlos 
.
Participo en el programa de afiliados de Udemy y Amazon, lo que significa que, si compras alguno de estos cursos y/o libros, yo me llevaré una pequeña comisión y a ti no costará nada extra. Vamos, lo que se dice un win-win 
.
Otros artículos que pueden interesarte