JSFiddle - React, Tailwind, and code Playground

by mtenschert

JavaScript

setTimeout(function(){ 

// Nächster Schritte: Sprache-Variablen,

$( "div.ratingWrapperDetail" ).each(function( index ) {

// Convert inputs into variables for Part 1 and 2!
var rating = $(this).attr("data-ratinginput");
var ratingForRound = $(this).attr("data-ratinginput");
var ratingInput = $(this).attr("data-ratinginput");
var ratingTotalInput = $(this).attr("data-ratingtotalinput");
var ratingWord 

//
// PART1, generate rating word, rating stars, show ratingTotal, show rating
//

// Less than 5 ratings, dont´t show feature
if (ratingTotalInput > 5.0) {

	// Convert numbers into ratingWording. PAY ATTENTION (!!!) in the next function we use math.round (0.5 steps, which manipulate the rating-variable!)
     				 if (rating < 3.80) {
      					ratingWord = "Bewertungen";
      } else if (rating < 4.25) {
           			ratingWord = "Gut";
      } else if (rating < 4.50) {
              	ratingWord = "Sehr gut";
      } else if (rating < 4.75) {
                ratingWord = "Exzellent";
      } else if (rating < 5.0) {
                ratingWord = "Außergewöhnlich";
      } 

// Stars: Convert numbers into stars
// Stars: round numbers for stars
ratingForRound = Math.round(ratingForRound * 2) / 2;
let output = [];

// Stars: Append all the filled whole stars
for (var i = ratingForRound; i >= 1; i--)
output.push('<i class="fa fa-star checked"></i>');

// Stars: If there is a half a star, append it
if (i == .5) output.push('<i class="fa fa-star-half-o checked"></i>');

// Stars: Fill the empty stars
for (let i = (5 - ratingForRound); i >= 1; i--)
output.push('<i class="fa fa-star-o checked"></i>');


//
// PART1 END
//



//
// PART2 generate ratingBar-width, ratingBar color for later output
//

// Convert inputs into variables
var ratingShopName = $(this).attr("data-ratingshopname");
var ratingShopAddress = $(this).attr("data-ratingshopaddress");
var ratingPriceInput = $(this).attr("data-ratingpriceinput");
var ratingSelectionInput =...