Skip to content
Submitted about 2 years ago

Responsive interactive rating component | HTML, CSS & JavaScript

Estanislao Elias Varela Lucius•60
@EstanisEVL
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive rating component
  • HTML
  • CSS
  • JS
1newbie

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
    @orsesPosted about 2 years ago

    ¡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
    Estanislao Elias Varela Lucius•60
    @EstanisEVLPosted about 2 years ago

    ¡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

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