Aquí tienes algunos consejos para mejorar el ejercicio:
JavaScript: básico
[x] Habilite el modo estricto escribiendo 'use strict' al comienzo del documento js.
[x] En la carga de la página, ejecute la función 'getRandomNumber' y almacene el valor devuelto en una constante para trabajar con él más adelante.
[x] Defina la lógica para generar y guardar el número aleatorio (recuerde que le dimos un código de muestra).
[x] Si llama a la función 'getRandomNumer' dentro de la devolución de llamada del evento, creará un nuevo número aleatorio cada vez que el usuario haga clic en el botón. Eso hace que el juego sea realmente complejo y las pistas no tendrán sentido. Generemos el número aleatorio cuando se carga la página.
[x] Defina la lógica para hacer que el contador funcione.
[x] No utilice una declaración return en una devolución de llamada para devolver un valor porque no es posible obtener el valor en eladdEventListener.
[x] Extrae el pintor de comentarios a una función.
[x] Repara la estructura del if: busca una opción, luego la otra y luego el resto es suficiente con una declaración else.
[x] Verifique si el número es menor que 1 o mayor que 100.
[x] No use un objeto para resolver el contador, una buena constante será suficiente;)
[x] Cuidado con los nombres de selector utilizados en los métodos querySelector () ... ¡deben existir en nuestro código HTML!
[x] Recuerde que no puede reasignar el valor de una variable constante.
[x] Use UN addEventListener para cada evento. Si necesita ejecutar varias funciones a la vez, tal vez pueda llamarlas dentro de su controlador único.
[x] Recuerde que cada vez que usamos .innerHTML o.value para obtener contenido DOM, recibimos una cadena. A veces tendremos que usar algo como parseInt () para convertirlo en un número.
[x] Si repetimos varias veces parseInt (value) dentro de una función, es mejor establecerlo en una constante.
[x] Cuidado con los nombres constantes utilizados para guardar referencias DOM ... ¿Queremos usar la referencia DOM o el contenido de ese elemento DOM (innerHTML / value)?
[x] Eliminar depurador y otro código innecesario
JavaScript: avanzado
[x] Mueva la lógica de retroalimentación a una función y ejecútela con cada clic.
[x] Mueve tu lógica de contador a una función y ejecútala con cada clic.
[ ] Estás escribiendo muchas veces "trackEl.innerHTML = 'something';", ¿qué hay de hacer una función que acepta una cadena como parámetro y la pinta en 'trackEl'?
[x] Mueva ev.preventDefault () a la primera línea de la función.
JavaScript: buenas prácticas
[x] Mueve las declaraciones de variables y constantes a la parte superior del archivo.
[x] Utilice === en lugar de == para las comparaciones.
[x] Utilice addEventListener en lugar deonClick para registrar oyentes de eventos.
Buenas practicas
[x] Sangra y evita los espacios en blanco adicionales para mejorar la legibilidad y evitar errores.
[x] Eliminar código comentado innecesario.
[x] ¡Escribe tu código en inglés!
[x] Intenta mejorar tus mensajes de confirmación, mejor en inglés y usando imperativo.
[x] Intenta usar el imperativo para tus mensajes de confirmación. Ex. -> Reparar texto central.
[x] Intenta mejorar tus mensajes de confirmación. "Agregar JS" es un poco pobre. "Agregar lógica de número aleatorio" es más explicativo.
Estructura
[x] Vincula el archivo JS externo correctamente (¡mira la ruta!).
[x] Se corrigió la posición de la etiqueta del script en el HTML (debería estar al final del cuerpo, pero dentro de él).
[x] Defina una buena estructura de carpetas y archivos para el proyecto.
[x] Eliminar archivos / carpetas no utilizados del proyecto: node_modules, package-lock.json.
[x] La ruta CSS y JS debe comenzar con . /.
CSS
[ ] Evite agregar estilos hasta que el código js sea sólido como una roca.
Recuerda que estos comentarios pueden tener algún error. Si detectas algo que esté marcado como error pero no coincida con tu código puedes omitirlo.
Aquí tienes algunos consejos para mejorar el ejercicio:
JavaScript: básico
return
en una devolución de llamada para devolver un valor porque no es posible obtener el valor en eladdEventListener
.else
.addEventListener
para cada evento. Si necesita ejecutar varias funciones a la vez, tal vez pueda llamarlas dentro de su controlador único..innerHTML
o.value
para obtener contenido DOM, recibimos una cadena. A veces tendremos que usar algo comoparseInt ()
para convertirlo en un número.parseInt (value)
dentro de una función, es mejor establecerlo en una constante.JavaScript: avanzado
ev.preventDefault ()
a la primera línea de la función.JavaScript: buenas prácticas
===
en lugar de==
para las comparaciones.addEventListener
en lugar deonClick
para registrar oyentes de eventos.Buenas practicas
Estructura
cuerpo
, pero dentro de él).. /
.CSS
Recuerda que estos comentarios pueden tener algún error. Si detectas algo que esté marcado como error pero no coincida con tu código puedes omitirlo.
Ánimo!