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

Interactive Rating Component

Skippy 110

@skippysworld

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


After some time when I was learning JavaScript I came back to next challenge.

I'd say I'm pretty satisfied with the JS part, but not at all with CSS. It works, but I feel it could have been written much better, easier with less code.

What do you think?

Community feedback

@ezechuka

Posted

I checked your CSS code and it's very neat, I like it. If you want to write less and easier CSS I suggest learning/using SASS (that is if you don't know about it before), it's a css preprocessor with cool features like nesting, functions, inheritance.

For example: this code snippet from your style.css:

.container-thanks h2 {
    padding-top: 1rem;
  }

  .container-thanks p {
    margin-bottom: 1rem;
    text-align: center;
  }

can be written or nested as:

$top-padding: 1rem;
.container-thanks {
      h2 {
          padding-top: $top-padding;
     }
     p {
        margin-bottom: $top-padding;
        text-align: center;
     }
}

Marked as helpful

1

Skippy 110

@skippysworld

Posted

@ezechuka Thanks! Appreciate your point pf view!

Yea I've heard about less sass before, but I aim for what I think is right approach - to learn basics well before pre-processors or frameworks. I'm afraid it would confuse me more in the long term.

I dont necessarily think it's too much CSS rather than I could use more of common classes. To describe better - I have feeling I duplicated code that might have been implemented and reused in better manner :)

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