Skip to content
OverviewSolutions
15
Comments
2
Orses
@orses

All comments

  • Estanislao Elias Varela Lucius•60
    @EstanisEVLSubmitted about 2 years ago

    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!!

    Responsive interactive rating component | HTML, CSS & JavaScript

    1
    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
  • Rafał•30
    @rafal-bedkowskiSubmitted about 2 years ago

    I really struggle with one thing. After i publish the page on githubpages, on all browser my page looks nice, but when it's come to opera on 1440 width i see the styles of the 375 width. Looks like it's totally crashes on this browser. Do you have any clue, how to fix it, i'm out of ideas?

    HuddleLandingPage use: HTML5, SCSS/CSS, BEM convention

    2
    Orses•210
    @orsesPosted about 2 years ago

    @GodstimeNwabue Hello Rafal, I was looking at your project in Opera and it's working.

    But I think the media queries they use are too long. You could change min-width:1440px to perhaps min-width:1100px. Starting at 1024px, any monitor that exceeds that figure, but does not reach 1440px, will display a strange page.

    Also, I think you could try creating a wrapper to center everything using margin left and right with value auto;

    I hope this is useful to you. Cheers

    Marked as helpful
    0