This is not a complete solution for challenges, but will guide you when you are stuck! Read the superbadge page completely. Most of the challenges are interlinked and the text is not in the same order of the challenge.
For other challenges, visit the Guide to Challenges.
Challenge 10: Integrate Third Party Scripts to build the component fiveStarRating
fiveStarRating LWC component that came bundled with package that you installed in the Challenge 1.
- Import necessary headers and the mentioned Static Resource (
- Add the constants suggested in the superbadge page. (You need 4 declarations)
- Convert the
valuevariables to public.
starClassis a getter method that returns
readonly c-ratingcss class (use constants) based on the
readOnlyattribute. Use one-liner ternary operation.
- Read this point carefully again to update the change, otherwise you will end up with this error just like me: We can’t find a ternary operator in the starClass getter function to return the correct class in the fiveStarRating component. Make sure the function was created according to the requirements, including the correct logic, usage of readOnly, READ_ONLY_CLASS, and EDITABLE_CLASS, with the proper case-sensitivity.
initializeRatingmethod is all filled ☺. This calls the
ratingChangedmethod, that needs to be completed by us 😉. It’s again a simple one-liner, just dispatch the
ratingchangeevent that utilizes rating local variable. (But seriously saying, DO NOT USE ONE-LINER, break that into two. Create custom event and assign to a variable, dispatch the event using the variable. As in earlier, challenges, superbadge is unable to validate for the one liner solution for dispatching custom events 😢)
- I was blamed with this error for using one-liner solution: We can’t find the custom event ratingchange being dispatched correctly when the rating changes. Make sure ratingChanged(rating) was created according to the requirements, including the correct event name, with the proper case-sensitivity and quotation.
That’s it, we have cleared 10th challenge! 💪