Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Sainath VenkatSainath Venkat 

issue with LWC Superbadge challenge 10

Hello Everyone, I am working on getting the LWC superbadge but got struck at challenge 10, I am trying to complete the below challenge

"Integrate Third Party Scripts to build the component fiveStarRating"

but keep on getting the following error message.
"Challenge Not yet complete... here's what's wrong:
We can't find the API decorator being imported in fiveStarRating.js file. Make sure the component was created according to the requirements."

my Js is below, can anyone help me out in this issue here. 
//import fivestar static resource, call it fivestar
import fivestar from '@salesforce/resourceUrl/fivestar';
import { reduceErrors } from 'c/ldsUtils';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { api, LightningElement } from 'lwc';
// add constants here
const TOAST_ERROR_TITLE = 'Error loading five-star';
const ERROR_VARIANT = 'error';
const READ_ONLY_CLASS = 'readonly c-rating';
const EDITABLE_CLASS = 'c-rating';
export default class FiveStarRating extends LightningElement {
  //initialize public readOnly and value properties
  @api readOnly = false;
  @api value;

  editedValue;
  isRendered;

  //getter function that returns the correct class depending on if it is readonly
  get starClass() {
    return this.readOnly ? READ_ONLY_CLASS : EDITABLE_CLASS;
  }

  // Render callback to load the script once the component renders.
  renderedCallback() {
    if (this.isRendered) {
      return;
    }
    this.loadScript();
    this.isRendered = true;
  }

  //Method to load the 3rd party script and initialize the rating.
  //call the initializeRating function after scripts are loaded
  //display a toast with error message if there is an error loading script
  loadScript() {
    Promise.all([
      loadScript(this, fivestar + '/rating.js'),
      loadStyle(this, fivestar + '/rating.css')
    ])
      .then(() => {
        this.initializeRating();
      })
      .catch(error => {
        this.dispatchEvent(new ShowToastEvent({
          title: TOAST_ERROR_TITLE,
          message: error,
          variant: ERROR_VARIANT
        }));
      })
  }

  initializeRating() {
    let domEl = this.template.querySelector('ul');
    let maxRating = 5;
    let self = this;
    let callback = function (rating) {
      self.editedValue = rating;
      self.ratingChanged(rating);
    };
    this.ratingObj = window.rating(
      domEl,
      this.value,
      maxRating,
      callback,
      this.readOnly
    );
  }

  // Method to fire event called ratingchange with the following parameter:
  // {detail: { rating: CURRENT_RATING }}); when the user selects a rating
  ratingChanged(rating) {
    this.dispatchEvent(new CustomEvent('ratingchange', { detail: { rating } }));
  }
}

 
ANUTEJANUTEJ (Salesforce Developers) 
Sainath,

Please note that Questions about how to pass Trailhead challenges are not on topic, because these challenges are intended to be independent demonstrations of your abilities.

Trailhead Help (https://trailhead.salesforce.com/en/help?support=home)can provide assistance for situations where Trailhead does not appear to be functioning correctly. You can reach out to them if this is the case.

Please close the thread by selected as Best Answer so that we can keep our community clean


Regards,
Salesforce Support.
CharuDuttCharuDutt
Hii  Sainath Venkat 
Try The Following Code 
import { LightningElement,api } from 'lwc';
import fivestar from '@salesforce/resourceUrl/fivestar';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { loadStyle, loadScript } from 'lightning/platformResourceLoader';

const ERROR_TITLE = 'Error loading five-star';
const ERROR_VARIANT = 'error';
const EDITABLE_CLASS = 'c-rating';
const READ_ONLY_CLASS = 'readonly c-rating';

export default class FiveStarRating extends LightningElement {@api readOnly;
    @api value;
  
    editedValue;
    isRendered;
  
   
    get starClass() {
      return this.readOnly ? READ_ONLY_CLASS : EDITABLE_CLASS;
    }
  
    
    renderedCallback() {
      if (this.isRendered) {
        return;
      }
      this.loadScript();
      this.isRendered = true;
    }
  
   
    loadScript() {
        Promise.all([
          loadStyle(this, fivestar + '/rating.css'),
          loadScript(this, fivestar + '/rating.js')
        ]).then(() => {
          this.initializeRating();
        }).catch(()=>{
          this.dispatchEvent(
            new ShowToastEvent({
                title: ERROR_TITLE,
                message: error,
                variant: ERROR_VARIANT
            })
        );
        });
    }
  
    initializeRating() {
      let domEl = this.template.querySelector('ul');
      let maxRating = 5;
      let self = this;
      let callback = function (rating) {
        self.editedValue = rating;
        self.ratingChanged(rating);
      };
      this.ratingObj = window.rating(
        domEl,
        this.value,
        maxRating,
        callback,
        this.readOnly
      );
    }
  
  
    ratingChanged(rating) {
      this.dispatchEvent(new CustomEvent('ratingchange', {detail: { rating: rating }}));
    }}
Please Mark It As Best Answer If It Helps
Thank You!
Gayatri SumanGayatri Suman
Best Answer
Ankit Darji 8Ankit Darji 8
Getting same Issue tried above both code but getting below error eventhough API decorator is there in .js file but still

Challenge Not yet complete... here's what's wrong:
We can't find the API decorator being imported in fiveStarRating.js file. Make sure the component was created according to the requirements.

//import fivestar static resource, call it fivestar
import fivestar from '@salesforce/resourceUrl/fivestar';
import { LightningElement, api } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { loadStyle, loadScript } from 'lightning/platformResourceLoader';
// add constants here
const ERROR_TITLE = 'Error loading five-star';
const ERROR_VARIANT = 'error';
const EDITABLE_CLASS = 'c-rating';
const READ_ONLY_CLASS = 'readonly c-rating';
export default class FiveStarRating extends LightningElement {
  //initialize public readOnly and value properties
  @api
  readOnly;
  @api
  value;
  editedValue;
  isRendered;
  //getter function that returns the correct class depending on if it is readonly
  get starClass() {
    return this.readOnly ? READ_ONLY_CLASS : EDITABLE_CLASS;
  }
  // Render callback to load the script once the component renders.
  renderedCallback() {
    if (this.isRendered) {
      return;
    }
    this.loadScript();
    this.isRendered = true;
  }
  //Method to load the 3rd party script and initialize the rating.
  //call the initializeRating function after scripts are loaded
  //display a toast with error message if there is an error loading script
  loadScript() {
    Promise.all([
      loadScript(this, fivestar + '/rating.js'),
      loadStyle(this, fivestar + '/rating.css')      
    ]).then(() => {
      this.initializeRating();
    })
    .catch(error => {
      const toast = new ShowToastEvent({
          title: ERROR_TITLE,
          message: error.message,
          variant: ERROR_VARIANT,
      });
      this.dispatchEvent(toast);
    });
  }
  initializeRating() {
    let domEl = this.template.querySelector('ul');
    let maxRating = 5;
    let self = this;
    let callback = function (rating) {
      self.editedValue = rating;
      self.ratingChanged(rating);
    };
    this.ratingObj = window.rating(
      domEl,
      this.value,
      maxRating,
      callback,
      this.readOnly
    );
  }
  // Method to fire event called ratingchange with the following parameter:
  // {detail: { rating: CURRENT_RATING }}); when the user selects a rating
  ratingChanged(rating) {    
    const ratingchangeEvent = new CustomEvent('ratingchange', {
      detail: {
        rating: rating
      }
    });
    this.dispatchEvent(ratingchangeEvent);    
  }
}
Abrahan MartinezAbrahan Martinez
Hello,
Were you able to solve this issue. I'm also getting the same error -- api nout found.