Skip to content
OverviewSolutions
9
Comments
3
Trevor
@Tactenator

All comments

  • GrayTechFun•100
    @GrayTechFunSubmitted about 1 year ago

    Please give me advice for how to make one rating be orange at once (not all of them could be orange ) and how to grab the different rating innerText to the submitted page (You selected ${rate} out of 5).

    interactive-rating

    1
    Trevor•200
    @TactenatorPosted about 1 year ago

    Hello! Your solution looks good! As for your questions:

    1. Based on your code, when someone clicks on your span, it will add the class 'clicked'. However, there is no code to remove code from another span when another one is clicked. To resolve this, what you can do loop through each span in your query selector to check if it has the 'checked' class. If it does, the loop can remove the clicked class, and allow you to add 'clicked' to the correct div the user clicks.

    2. As for the correct rating, that can be done by grabbing the inner text of the span much like you have now.

    I hope this helps! Have a good one!

    0
  • Trevor•200
    @TactenatorPosted about 1 year ago

    Congratulations on posting your first solution! I hope you continue to pursue Frontend Mentor. I've just recently gotten back into it and it's been very enjoyable to code these various projects.

    Project looks great! Only thing I saw that you might want to consider is using responsive units, such as rem, when using padding or width. Sometimes using pixels is okay, but you'll start to run into problems with making things responsive for mobile if all you use is pixels for width or padding. If you want to check out more about responsive design, I highly recommend Kevin Powell. He's outstanding at teaching all things CSS.

    Take care!

    Marked as helpful
    1
  • K•10
    @teerawxtSubmitted about 2 years ago

    I don't know yet how to merge the image and paragraph together and to make it responsive. but I keep learning more.

    simple website

    2
    Trevor•200
    @TactenatorPosted about 2 years ago

    Hello!

    I just finished this challenge myself, so hopefully I can help with your merging issue.

    As the other comment says, try using flexbox. Flexbox makes it incredibly easy to merge items like this and make them look a lot neater. Using absolute positioning, in this case, is not necessary and is only making this challenge far more difficult than it needs to be.

    Someone I can't recommend enough is NetNinja for learning anything you need to know about web development.

    https://www.youtube.com/watch?v=Y8zMYaD1bz0&list=PL4cUxeGkcC9i3FXJSUfmsNOx8E7u6UuhG

    Here is his series on flexbox. I hope it helps and happy coding!

    0