Skip to content
Submitted 25 days ago

Responsive Interactive rating component using JavaScript

#bootstrap
Manuel-D-Creator•10
@Manuel-D-Creator
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

What are you most proud of, and what would you do differently next time?

I'm most proud of how I structured my code throughout the project. I focused on writing semantic HTML, organizing my CSS efficiently, and ensuring design responsiveness across different screen sizes. Additionally, I took extra care to follow best practices, which made debugging and refining the project much easier. I'm also very proud as this is my very first project involving JavaScript after learning the basics of the language. Next time, I would focus more on optimizing my workflow.

What challenges did you encounter, and how did you overcome them?

One of the challenges I encountered was implementing certain JavaScript functionalities. There were some operations I wasn't entirely familiar with, which made it difficult to achieve the desired functionality right away. To overcome this, I did some research on how to use the classList property to check if a particular element contains a particular class by using the ".contains" property. This experience helped me deepen my understanding of JavaScript interactivity and improved my problem-solving skills.

What specific areas of your project would you like help with?

I would appreciate feedback on my JavaScript implementation, particularly on how I handled event listeners and classList. While I was able to make the functionality work, I'd like to know if there's a more efficient or cleaner way to achieve the same result. Additionally, I'd love guidance on improving my CSS organization. I feel like I might have written some redundant styles, and I want to ensure that my approach is structured and maintainable. Finally, if there are any best practices I might have missed, whether in JavaScript, HTML, or CSS, I'd love to hear any recommendations for improvement.

Community feedback

  • IO•690
    @i000oPosted 23 days ago

    Hi!

    Your solution looks good and functions well. I can't speak on all the feedback you asked for, particularly .classList since, as a fellow newcomer to Javascript, I haven't used this yet. But I can say:

    1. HTML - The advised approach to this problem is to use a HTML form that uses radio buttons (buttons that don't allow for multiple choice answers). From here, you can control interactivity of the form with JS and shorten your code considerably. Have a look at my solution and the recommended Useful resources in my README.md. You'll find links to explanations on these concepts there. In general, I recommend joining the Discord community and searching for others' questions on the same solution as you work on it. This can help you save time and understand how to get clear guidance on approaching the problem instead of going in blind. If your JS is still elementary, I think it's more efficient to get straight into writing JS that functions well and is as simple as possible to help your understanding of it at this stage.
    2. Good use of .querySelector
    3. I can't see an .addEventListener in your JS. This is the technique we'd use for a situation like this.
    4. Conditional statements - You have a long list of if/else if statements in your conditional logic. Potentially look into switch-case statements with break clauses, as these might be allow you to organise your conditions into cases which might improve readability. Alternatively, I have only 1 if/else statement in my JS for this project - maybe take a look. It essentially states that if a rating is submitted, convert it to a value to remember and show the Thank-you state, otherwise, just show the default screen.
    5. I like your prompt that shows when Submit is hit with no rating given.
    6. I'm new to JS also and using an AI assist really helped me to break down the problem to approach it. This might give you some direction to avoid detours/confusions/verbose code and help you to understand tackling projects better.
    7. Styling - The font used for this project is given in the style-guide.md document. To organise your CSS further and write DRY code, you could use a pre-processor like Sass. These really help me and make CSS-writing more enjoyable. To learn more, you can compare my input.scss file in my sass folder in this repo to the output.css to see how the processor converts Sass into pure CSS (and saves you code).

    Well done on your first JS challenge! Keep goin' -

    Marked as helpful
    0
    Manuel-D-Creator•10
    @Manuel-D-CreatorPosted 22 days ago

    @i000o thanks a lot for your feedback. I'll take a look at your solutions for more clarity.

    0

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