Submitted over 2 years ago

Interactive Rating Component (SCSS + vanilla JavaScript)

Artur Neri•230

@Artur-Neri

Preview site View code

This is a solution for...Interactive rating component

HTML
CSS
JS

1newbie

Design comparison

SolutionDesign

Solution retrospective

The solution here seems not to have compiled the stylesheet file. Could anyone tell me how to fix it? On my computer it works perfectly fine!

Edit: I solved the stylesheet import problem. I had to take the full path to the file after it was uploaded to the server and put it in the href attribute like this: <link href="https://artur-neri.github.io/Interactive-Rating-Component/dist/styles.css"> Also my JavaScript was not working, so I tried @elaineleung suggestion of removing the first slash I had on the path for the script src. Even though I used very little JS, the project was fun to do. I could not make sense of the colors on the style-guide file, so some of the colors might be a little different from the design... Anyways, if you have any feedback on how I could improve my solution, feel free to leave it here as always!

Community feedback

Elaine•11,400
@elaineleungPosted over 2 years ago
Hi Artur, well done on completing this! 🙂 I checked it out just now, and it looks like you got your CSS linked up, so I guess everything worked out on that front. I did try to submit a score but it doesn't seem to bring to the thank you page. I don't know whether it's because your src link in the script tag needs to either have the slash removed or have a dot added. Also, I think it's a good start in using the :focus style to change the styling of the checked button; however, if I click away elsewhere, the checked button would lose focus, and if I didn't clicked on another button (say, if I just clicked on the background), then the checked button would lose its style and no button would be appear checked. I suggest trying to use a styling class instead that you can toggle or add/remove.
Marked as helpful
0
Artur Neri•230
@Artur-NeriPosted over 2 years ago
@elaineleung I can't thank you enough! I would go bald before trying to remove the slash from the script tag hahah. Also, thank you for the feedback on the :focus "problem", I realized that it would be better to actually change the styling, but I have a very vague idea on how to do that. I will learn and improve the solution later on. Thank you again!
1
Elaine•11,400
@elaineleungPosted over 2 years ago
@Artur-Neri No problem, glad that got resolved! If you're interested, I have a small CodePen for this challenge that might give you an idea on how to do class styling: https://codepen.io/elaineleung/pen/GRxBNpE.
Marked as helpful
0

Please log in to post a comment

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