Skip to content
OverviewSolutions
21
Comments
2

Rora Alem

@Rgit915Kitchener, Ontario370 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • 0-scripter•10
    @0-scripter
    What are you most proud of, and what would you do differently next time?

    this is my first time writing a code, hence I am very happy for trying my best and completing this task.

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

    reading material is different than applying it in real project u just get blank, so the only solution is keep practicing and coding.

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

    my code is not clean, I want to know how I can make it shorter and more clean. Any other opinion will also be appreciated.

    basic html and css web-design

    #accessibility
    2
    Rora Alem•370
    @Rgit915

    Hi @0-scripter,

    I reviewed your code, and you've done a great job so far! I have a few suggestions that could make the solution even cleaner and more aligned with best practices:

    Semantic HTML Usage:

    Consider using meaningful headings like <h1> or <h2> for titles instead of <p> tags. This helps with both readability and accessibility. Group related elements using meaningful containers like <div> or <section> for better structure and styling.

    CSS organziation:

    Move the inline CSS(in index.html) for .attribution into the your external css.css file to separate concerns.

    Alt Text Improvements:

    Avoid repeating the image file path in the alt attribute. Instead, describe the image's function. For example:

    alt="QR code to visit Frontend Mentor"

    Ensure that the alt attribute accurately describes the purpose of the image rather than the file path.

    Personalization:

    Update "Coded by <a href="#">Your Name Here</a>" with your actual name to make the footer more personalized and authentic.

    Remove Repeated Lines:

    Lines 29 to 30 appear to repeat the content already found in lines 43 to 46. You could remove lines 29 to 30 to avoid duplication.

    These tweaks will improve your code’s readability and accessibility. Keep up the great work! 😊

    Best regards,

    Rora

  • Rora Alem•370
    @Rgit915

    @Sandaruwan7056, Your component looks fantastic! 😊

    Just a quick tip:

    • since you’re only targeting the first .rating-start-container and .rating-thankyou-container elements, you could use querySelector instead of getElementsByClassName for a cleaner approach.

      const container = document.querySelector(".rating-start-container"); 

      const thankYouContainer = document.querySelector(".rating-thankyou-container");

    • And one more thing: to avoid potential errors, you can add a quick check to make sure yourRating exists in the DOM before updating it:

      if (yourRating) yourRating.textContent = getValue;

    Marked as helpful