title: creating a star rating system based of an API
body: <p>I have an api that will give a number of either 1-5 under &quot;ratings&quot; , i also have a list of 5 stars, depending on the rating these stars will either turn red or black on click of the button, red will be for each number in the Ratings . i.e a rating of 4 would turn 4 of the stars red and 1 black. so far i have the html and css created but when the button is pressed i recieve no data at all to test the button I added a basic alert and that worked. So far I have this:</p>
  <h2>DEMO:</h2>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#viewreview").click(function(){
      $.ajax("api link").done(function(data){
          $(".reviewblk").html('');
          var htmlstr = '';
          for(var i=0; i&lt;data.length; i++){
              var rating = parseInt(data[i]["rating"]);
              var chk = ['', '', '', '', ''];
              for(var j=0; j&lt;rating &amp;&amp; j&lt;5;j++){
                  chk[j] = 'checked';
              }
              htmlstr += '&lt;div class="preview"&gt;&lt;img src="reviewicon1.jpg" alt="reviewpic" class="revImg" /&gt;&lt;div class="stars"&gt;&lt;p class="checked '+chk[0]+'"&gt;&lt;/p&gt;&lt;p class="checked '+chk[1]+'"&gt;&lt;/p&gt;&lt;p class="checked '+chk[2]+'"&gt;&lt;/p&gt;&lt;p class="checked '+chk[3]+'"&gt;&lt;/p&gt;&lt;p class="checked '+chk[4]+'"&gt;&lt;/p&gt;&lt;/div&gt;&lt;h3 class="personName"&gt;'+data[i]["nickname"]+'&lt;/h3&gt;&lt;div class="revtext"&gt;&lt;p&gt;'+data[i]["review"]+'&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;hr /&gt;';
          }
          $(".reviewblk").html(htmlstr);
      });
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.productreviews{ /*sets font*/
      font-family: 'Roboto Condensed', sans-serif;
      
  }
  .preview{ /*sets padding for how the div is displayed*/
      padding-left: 60px;
      padding-top: 30px;
      padding-bottom: 30px;
      display: block;
      position: relative;
  }
  
  .revImg{ /*gives images curved edges*/
      border-radius: 10px;
      display: inline;
  }
  
  .personName{ /*sets the person name so that it is to the right of the image and just below the stars*/
      display: inline;
      position: absolute;
      padding-left: 30px;
      padding-top: 20px;
      width: 150px;
  }
  
  .stars{ /*sets stars elements to above name and to the right of the image*/
      position: absolute;
      width: 100px;
      top: 30px;
      left: 180px;
      
  }
  
  
  .revtext{ /* displays the text div so that it is to the right side of the preview box*/
      display: inline;
      width: 550px;
      position: absolute;
      right: 0;
      font-size: 15px;
      font-weight: 600;
      top: 10px;
  }
  
  .revtext p{ /*i used word wrap to wrap the word onto the next line then used overflow to contain the overflowing text and then used text overflow so that any overflowing text would be shown as an ellipsis*/
      word-wrap: break-word;
      overflow: hidden;
      text-overflow: ellipsis;
  }
  
  .btnreview{ /* setting the padding for the buton aswell as the color so that the text is white and the button itself is red, aswell as giving it curved edges.*/
      padding: 10px 25px;
      background-color: #F0191C;
      color: white;
      border: none;
      border-radius: 10px;
  }
  
  .btnreview:hover{ /*changing the button when hovering and changing the cursor to a pointer*/
      background-color: #8a130b;
      cursor: pointer;
  }
  
  .btnblk{/* padding the button inside its div*/
      padding: 25px;
      text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;article class="productreviews"&gt; &lt;!--list of product reviews--&gt;
    &lt;hr /&gt;
    &lt;h1 id = "productreviewheader"&gt;Product Reviews  &lt;span class="checked"&gt;*****&lt;/span&gt;&lt;/h1&gt;
    &lt;hr /&gt;
    &lt;div class="reviewblk"&gt;
      &lt;div class="preview"&gt;
        &lt;img src="images/robot-juice-images/reviewicon1.jpg" alt="reviewpic" class="revImg" /&gt;
        &lt;div class="stars"&gt;
          &lt;p class = "checked"&gt;*****&lt;/p&gt;
        &lt;/div&gt;
        &lt;h3 class="personName"&gt;Great Greace!!&lt;/h3&gt;
        &lt;div class="revtext"&gt;
          &lt;p&gt;
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam sapiente odit porro in quam eos autem nobis quisquam reiciendis debitis magnam ipsam laboriosam iusto error quasi officia
            voluptates, totam excepturi? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio accusantium, neque vel, rerum illum ipsam tempore quae accusamus voluptates sequi hic
            magni dolores? Eius laboriosam tempora ut molestias consectetur nobis!
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;hr /&gt;
  
      &lt;div class="preview"&gt;
        &lt;img src="images/robot-juice-images/reviewicon1.jpg" alt="reviewpic" class="revImg" /&gt;
        &lt;div class="stars"&gt;
          &lt;p class = "checked"&gt;***&lt;span class="unchecked"&gt;**&lt;/span&gt;&lt;/p&gt;
  
        &lt;/div&gt;
        &lt;h3 class="personName"&gt;Great Greace!!&lt;/h3&gt;
        &lt;div class="revtext"&gt;
          &lt;p&gt;
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam sapiente odit porro in quam eos autem nobis quisquam reiciendis debitis magnam ipsam laboriosam iusto error quasi officia
            voluptates, totam excepturi? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio accusantium, neque vel, rerum illum ipsam tempore quae accusamus voluptates sequi hic
            magni dolores? Eius laboriosam tempora ut molestias consectetur nobis!
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;hr class = "separation line"/&gt;
  
      &lt;div class="preview"&gt;
        &lt;img src="images/robot-juice-images/reviewicon1.jpg" alt="reviewpic" class="revImg" /&gt;
        &lt;div class="stars"&gt;
          &lt;p class = "checked"&gt;****&lt;span class="unchecked"&gt;*&lt;/span&gt;&lt;/p&gt;
        &lt;/div&gt;
        &lt;h3 class="personName"&gt;Great Greace!!&lt;/h3&gt;
        &lt;div class="revtext"&gt;
          &lt;p&gt;
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam sapiente odit porro in quam eos autem nobis quisquam reiciendis debitis magnam ipsam laboriosam iusto error quasi officia
            voluptates, totam excepturi? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio accusantium, neque vel, rerum illum ipsam tempore quae accusamus voluptates sequi hic
            magni dolores? Eius laboriosam tempora ut molestias consectetur nobis!
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;hr class = "separation line"/&gt;
  
      &lt;div class="preview"&gt;
        &lt;img src="images/robot-juice-images/reviewicon2.jpg" alt="reviewpic" class="revImg" /&gt;
        &lt;div class="stars"&gt;
          &lt;p class = "checked"&gt;*****&lt;/p&gt;
        &lt;/div&gt;
        &lt;h3 class="personName"&gt;This juice just keeps me going..&lt;/h3&gt;
        &lt;div class="revtext"&gt;
          &lt;p&gt;
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam sapiente odit porro in quam eos autem nobis quisquam reiciendis debitis magnam ipsam laboriosam iusto error quasi officia
            voluptates, totam excepturi? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio accusantium, neque vel, rerum illum ipsam tempore quae accusamus voluptates sequi hic
            magni dolores? Eius laboriosam tempora ut molestias consectetur nobis!
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;hr class = "separation line"/&gt;
      &lt;/div&gt;
  
    &lt;div class="reviewblk"&gt;
      &lt;div class="preview"&gt;
        &lt;img src="images/robot-juice-images/reviewicon1.jpg" alt="reviewpic" class="revImg" /&gt;
        &lt;div class="stars"&gt;
          &lt;p class = "checked"&gt;*****&lt;/p&gt;
        &lt;/div&gt;
        &lt;h3 class="personName"&gt;Great Greace!!&lt;/h3&gt;
        &lt;div class="revtext"&gt;
          &lt;p&gt;
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam sapiente odit porro in quam eos autem nobis quisquam reiciendis debitis magnam ipsam laboriosam iusto error quasi officia
            voluptates, totam excepturi? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio accusantium, neque vel, rerum illum ipsam tempore quae accusamus voluptates sequi hic
            magni dolores? Eius laboriosam tempora ut molestias consectetur nobis!
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;hr class = "separation line"/&gt;
    &lt;/div&gt;
    &lt;div class="btnblk"&gt;
    &lt;button class="btnreview" id="viewreview"&gt;READ ALL REVIEWS&lt;/button&gt;
      &lt;/div&gt;
  &lt;/article&gt;</code></pre>
  </div>
  </div>
  </p>