Updated code

console.log('Hello TrustPilot!');
// THE REVIEWS DATA
getReviews(processReviews);
// tell js where is the widget
var widget = $('#widget');

function processReviews(reviews) {
    // total number of reviewers
    var total = reviews.length;
    // initialize reviewSum variable to add all review ratings in it
    var reviewSum = 0;
    var carousalHtml = '';
    // loop through each review
    $(reviews).each(function(index, value) {
        // add current review's rating in global reviewSum variable
        reviewSum = reviewSum + parseInt(value.starRating);
        // review Body if text is bigger then 200 characters then add more functionality
        var reviewBody = value.reviewBody.length > 180 ? value.reviewBody.substr(0, 180) + '... <span class="showFullReview" onclick="javascript: showFullReviewBody($(this) ,' + index + ');">more</span>' : value.reviewBody;
        // create class for Bad, Middle and good review for styling purposes
        var reviewStarsClass = '';
        if (parseInt(value.starRating) > 2 && parseInt(value.starRating) <= 3) {
            reviewStarsClass = 'middle';
        } else if (parseInt(value.starRating) >= 0 && parseInt(value.starRating) <= 2) {
            reviewStarsClass = 'bad';
        } else {
            reviewStarsClass = 'good';
        }
        // Create HTML for carousal
        carousalHtml += `
        <div class="testimonial">
          <div class="top">
            <span class="name">` + value.fullName + `</span>
            <div class="star-rating ` + reviewStarsClass + `">
                    <span style="width:` + 20 * parseInt(value.starRating) + '%' + '" id="starRatingPresenter"><strong>' + value.starRating + `</strong> out of 5</span>
                 </div>
          </div>
          <div class="content">
            <span class="firstQuote fa fa-quote-left"></span>
            <span class="main">
            ` + reviewBody + `
            </span>
            <span class="lastQuote fa fa-quote-right"></span>
          </div>
          <div class="footer">
          ` + value.location + `
          </div>
        </div>
          `;
    });
    // calculate average rating
    var averageRating = reviewSum / total;
    // Calculate happiness percentage
    var averageRatePercentage = 20 * averageRating;
    // calculate average rating's class for styling purposes
    var reviewStarsClass = '';
    if (parseInt(averageRating) > 2 && parseInt(averageRating) <= 3) {
        reviewStarsClass = 'middle';
    } else if (parseInt(averageRating) >= 0 && parseInt(averageRating) <= 2) {
        reviewStarsClass = 'bad';
    } else {
        reviewStarsClass = 'good';
    }
    // Set dynamic text for banner
    var bannerText = '';
    if(reviewStarsClass == 'good') {
      bannerText = 'We\'ve got our customers happy !';
    } else if(reviewStarsClass == 'middle') {
      bannerText = 'Sometimes we\'re unable to fullfil needs of our customers';
    } else {
      bannerText = 'Customers blame us for everything';
    }
    // Create HTML for widget
    var html = `
       <div class="half first">
          <span class="widgetTitle `+reviewStarsClass+`">
            `+bannerText+`
          </span>
          <div class="averageRatingInfo">
             <div class="star-rating ` + reviewStarsClass + `">
                <span style="width:` + averageRatePercentage + '%' + '" id="starRatingPresenter"><strong>' + averageRating + `</strong> out of 5</span>
             </div><br>
             <div class="averageRatingWrap">
                <span class="averageRating">` + averageRating + ` <span class="light">Rating</span></span>
             </div>
             <div class="reviewersWrap">
                <span class="reviewers">` + total + ` <span class="light">Reviewers</span></span>
             </div>
             <div class="clear"></div>
             <hr />
             <div class="reviewFooterIndicator">
                <span class="fa fa-star ` + reviewStarsClass + `"></span> Reviews
             </div>
          </div>
       </div>
       <div class="half second">
            <div class="owl-carousel testimonials">` + carousalHtml + `</div>
       </div>
          `;
    // Apply widget html
    widget.html(html);
    // Initialize Carousel
    $('.owl-carousel').owlCarousel({
        loop: true,
        margin: 20,
        autoplay: true,
        autoplayTimeout: 5000,
        nav: true,
        navText: [
            '<i class="fa fa-chevron-left"></i>',
            '<i class="fa fa-chevron-right"></i>'
        ],
        autoplayHoverPause: true,
        responsive: {
            0: {
                items: 1
            },
            480: {
                items: 1
            },
            600: {
                items: 2
            },
            1000: {
                items: 2
            }
        }
    });
}

// Function to show all review text when clicked on more button
function showFullReviewBody(e, id) {
    console.log(id);
    var contentPlace = e.closest('span.main');
    var fullText = reviews[id].reviewBody+' <span class=\'showFullReview\' onclick=\'javascript: showLessReviewBody($(this),' + id + ');\'\'>less</span>';
    contentPlace.html(fullText);
}
function showLessReviewBody(e, id) {
    console.log(id);
    var contentPlace = e.closest('span.main');
    var reviewBody = reviews[id].reviewBody.substr(0, 180) + '... <span class="showFullReview" onclick="javascript: showFullReviewBody($(this) ,' + id + ');">more</span>';
    contentPlace.html(reviewBody);
}
// Function to get reviews
function getReviews(cb) {
  $.ajax({
      url: 'API/reviews.json'
  }).done(cb);
}