How to make rating stars in html and JavaScript?

Question

I am creating an HTML web app and getting all data from API calls. I have set data into an array and display them. And there is data coming with HTML tags.

My data set Like below;

contDet = [
    {
      idappcontent: "Review1_Ques_01",
      content:
        '',
    },
    {
      idappcontent: "Review1_Ques_02",
      content:
        'Your Opinion Is Important To Us
Please take a moment to share with us your thoughts on your visit today.',
    },
    {
      idappcontent: "Review1_Ques_03",
      content: '',
    },
    {
      idappcontent: "Review1_Ques_06",
      content:
        '< PREVIOUS>  NEXT',
    },
  ];
  contImg = [
    { idclient: "11", idlocation: "25", ImageName: "highlightedStar.png" },
    { idclient: "11", idlocation: "25", ImageName: "star.png" },
  ];
  surQue = [
    { idsurveyquestion: "22", question: "Taste of the food?" },
    { idsurveyquestion: "23", question: "Quality of the food?" },
    { idsurveyquestion: "24", question: "Speed Of delivery?" },
    { idsurveyquestion: "25", question: "The accuracy of the order?" },
    { idsurveyquestion: "26", question: "How is our service?" },
  ];

I need to make a 5-star rating section for each question like below.

Here I want to make a star rating for each question and need unselect star when click on the same star again.

This is what I tried;

function getData() {
  contDet = [{
      idappcontent: "Review1_Ques_01",
      content: '',
    },
    {
      idappcontent: "Review1_Ques_02",
      content: 'Your Opinion Is Important To Us
Please take a moment to share with us your thoughts on your visit today.',
    },
    {
      idappcontent: "Review1_Ques_03",
      content: '',
    },
    {
      idappcontent: "Review1_Ques_06",
      content: '< PREVIOUS>  NEXT',
    },
  ];
  contImg = [{
      idclient: "11",
      idlocation: "25",
      ImageName: "highlightedStar.png"
    },
    {
      idclient: "11",
      idlocation: "25",
      ImageName: "star.png"
    },
  ];
  surQue = [{
      idsurveyquestion: "22",
      question: "Taste of the food?"
    },
    {
      idsurveyquestion: "23",
      question: "Quality of the food?"
    },
    {
      idsurveyquestion: "24",
      question: "Speed Of delivery?"
    },
    {
      idsurveyquestion: "25",
      question: "The accuracy of the order?"
    },
    {
      idsurveyquestion: "26",
      question: "How is our service?"
    },
  ];

  //set content
  document.getElementById("Review1_Ques_01").innerHTML = contDet[0].content;
  document.getElementById("Review1_Ques_02").innerHTML = contDet[1].content;
  document.getElementById("Review1_Ques_03").innerHTML = contDet[2].content;
  document.getElementById("Review1_Ques_06").innerHTML = contDet[3].content;

  //set star image path
  //geting star img
  var starImg = contImg.filter(function(item) {
    return item.ImageName.includes("star");
  });
  // console.log(starImg);
  var starImgpath =
    "./images/" +
    starImg[0].idclient +
    "/" +
    starImg[0].idlocation +
    "/" +
    starImg[0].ImageName;

  //geting highlightedStar img
  var highlightedStarImg = contImg.filter(function(item) {
    return item.ImageName.includes("star");
  });
  console.log(starImg);
  var highlightedStarImgpath =
    "./images/" +
    highlightedStarImg[0].idclient +
    "/" +
    highlightedStarImg[0].idlocation +
    "/" +
    highlightedStarImg[0].ImageName;

  //   display question list
  $.each(surQue, function(o, que) {
    $("#Review1_Ques_04").append(
      "" + que.question + ""
    );
  });
}

#Review1_Ques_04 {
  list-style-type: none;
}

This is the output that I have tried;

Here I want to use my star and highlightedstar png to make the rating star like below,

src should be set from the js file, and the image data also coming from API. my folder path is images->11->25.

Please help me to solve my problem.

I need to create a section like this;

Taste of the food?

How can I create a section Like the above?

How to make rating stars in html and JavaScript?

Answers (1)

Related Questions