Posted in Superbadge, Trailhead

LWC Specialist Superbadge : Challenge 10 Guide

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

Open the fiveStarRating LWC component that came bundled with package that you installed in the Challenge 1.

fiveStarRating.js

  • Import necessary headers and the mentioned Static Resource (fiveStar).
  • Add the constants suggested in the superbadge page. (You need 4 declarations)
  • Convert the readOnly and value variables to public.
  • loadScript and loadStyle methods load Javascript and CSS files. See the doc to know how to load third-party Javascript libraries. Do not forget to import loadStyle, loadScript from platformResourceLoader.
  • starClass is a getter method that returns c-rating or readonly c-rating css class (use constants) based on the readOnly attribute. 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.
  • initializeRating method is all filled ☺. This calls the ratingChanged method, that needs to be completed by us 😉. It’s again a simple one-liner, just dispatch the ratingchange event 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! 💪

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s