Partially fix the star rating in results

Stars are displaying but the color/qty isn't correct. CSS on them is off
still

README.md

@@ -4,14 +4,12 @@ Thinkful- Async Programming- capstone project
 # Pending:
 
 ## Page 1
-  1. search footer anchor is not centered on page when clicked, due to margin-top
+  1. search footer anchor is not centered on page when clicked, due to margin-top. Add footer back
 
 ## Page 2
   1. Yelp pic results are different sizes
-      *Having difficulty with setting height*
-  1. Can't get star rating to display in search results
-  1. Search results are displaying default of 20 even though my request object has another value
-
+      *Having difficulty with setting height* Need to set it to set values then toggle the formatting around it
+  1. Stars aren't displaying properly (inline & qty of stars)
   1. Map box needs to appear with business details when clicked
 
 

public/app.js

@@ -21,7 +21,7 @@ function getDataFromYelp(term, location, callback) {
     data: {
       location: location,
       term: term,
-      limit: 10
+      limit: 20
     },
     dataType: "json",
     type: "GET",
@@ -50,6 +50,8 @@ function displaySearchData(data) {
 
 //function to render the data results to HTML
 function renderQueryResults(results) {
+  let starRating = createStarRating(results.rating);
+  console.log(starRating);
   return `
 <div class="results-data-card" id="repeat">
   <div class="business-img-container">
@@ -60,9 +62,7 @@ function renderQueryResults(results) {
     <p class="business business-desc">${results.location.address1}</p>
     <p class="business business-phone">${results.display_phone}</p>
     <span class="business business-rating-qty">${results.rating}</span>
-    <span class="business business-rating-stars" onload="createStarRating(${
-      results.rating
-    });"></span>
+    <span class="business business-rating-stars">${starRating}</span>
     <a class="business business-review-qty">${results.review_count} reviews</a>
     <button role="button" type="button" class="airbnb-button" value="${results.location.city}--${results.location.state}-${results.location.zip_code}">Find Airbnb's Nearby</button>
   </div>
@@ -79,13 +79,13 @@ function createStarRating(rating) {
   console.log(whiteStars);
 
   output = '<div title="' + rating + '">';
-  output += '<i class="fa fa-star" style="color: gold;">'.repeat(yellowStars);
-  output += '<i class="fa fa-star-half-o" style="color: gold;">'.repeat(
+  output += '<i class="fa fa-star" style="color: gold;"></i>'.repeat(yellowStars);
+  output += '<i class="fa fa-star-half-o" style="color: gold;"></i>'.repeat(
     whiteStars
   );
-  output += '<i class="fa fa-star-o" style="color: gold;">'.repeat(whiteStars);
-  //return output + '</div>';
-  $('.business-rating-stars').text = output;
+  output += '<i class="fa fa-star-o" style="color: gold;"></i>'.repeat(whiteStars);
+  return output + '</div>';
+  // $('.business-rating-stars').text = output;
 }
 
 //google API required constructor function to create map object and center it

public/main.css

@@ -264,6 +264,7 @@ div[class^="info-sec-text-"] {
 
 .business-rating-stars {
   width: 50px;
+  display: inline-block;;
 }
 
 .business-rating-qty {

server.js

@@ -28,7 +28,8 @@ app.get("/yelp", function(req, res) {
   client
     .search({
       location: req.query.location,
-      term: req.query.term
+      term: req.query.term,
+      limit: 20
     })
     .then(response => {
       console.log(response.jsonBody);