Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive interactive rating component | HTML, CSS & JavaScript

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi👋! This is my attempt at solving the Interactive rating component challenge. I would highly appreciate any feedback at all, specially on the following:

  • Are there any bad practices you see on my JavaScript code? I tried to keep it as simple as possible, but there are some recommended practices I didn't know how to apply without breaking the project.
  • Do the gradients resemble the ones provided by Frontend Mentor? I struggle to achieve a similar effect, and I'm unsure of the final result.

Thanks!!

Community feedback

Orses 210

@orses

Posted

¡Hola, Estanislao (@EstanisEVL)!

Enhorabuena por tu reto.

Te propongo un par de sugerencias sobre la parte de JS:

  • Cuando no uses type="module" en tu etiqueta script de html podrías usar las funciones IIFE que te permiten encapsular tu código, aislarlo del resto, evitar conflictos con librerías de terceros, evitar que otros sobrescriban tus variables y objetos, y mantener limpio el objeto global windows. Es muy fácil, introduce todo tu código entre estas dos líneas siguientes
(() => {
    // tu código aquí
})();

Puedes ver un ejemplo en mi código link

Si haces así, cuando vayas a la consola verás que no se puede acceder directamente a tus funciones.

  • La segunda es una recomendación de estilo, pero eso es muy personal, por tanto tómalo como eso, una recomendación. Normalmente se declaran arriba las variables globales, luego las funciones y finalmente los eventListener();

Espero sea de tu interés y ayuda. ¡Saludos!

Marked as helpful

1

@EstanisEVL

Posted

¡Muchísimas gracias Juan Pablo (@orses) por tomarte un momento para revisar mi código y darme tus recomendaciones, definitivamente las tendré en cuenta para mis proyectos!

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord