Change background color by number-CodePudding

I have a Wordpress website (a restaurant review page), and on my main page I have a snippet that returns back a number (from 1 to 100) from the post to display the grade of the restaurant.

Current situation

It looks like this:

The code that display this is this one:

<?php
    if ( class_exists( "Lets_Review_API" ) ) {
    $lr_api = new Lets_Review_API();
    $final_score_value = $lr_api->lets_review_get_final_score_only( $post_id );
    echo '<div ><h4>' . $final_score_value . '%</h4></div>';
        }               
?>

The CSS snippet of this particular part looks like this:

.show-score {
    padding: 0.25rem 0.35rem;
    border-radius: var(--cs-category-label-border-radius);
    color: var(--cs-color-category-contrast);
    background-color: var(--cs-color-category);
}

What do I want

I want the background-color of this part to change based on the rating that was given. So for example, if the rating is from 1 to 40 it shows red, from 41 to 80 yellow and from 81 to 100 a green color. I've been searching on Google and here with different keywords (I'm not a native English speaker or a developer of any kind in that matter) but couldn't find the desired result or answer.

Thank you in advance for provided help.

What I did (and didn't work)

I tried adding this:

<?php
    if ( class_exists( "Lets_Review_API" ) ) {
    $lr_api = new Lets_Review_API();
    $final_score_value = $lr_api->lets_review_get_final_score_only( $post_id );
    if ($final_score_value > 1 && $final_score_value < 40) { $score_class = 'red' };
    echo '<div ><h4>' . $final_score_value . '%</h4></div>';
        }               
?>

as I checked around to see what would work, but Wordpress won't let me save the file, as there is an unexpected "}" in this line - if ($final_score_value > 1 && $final_score_value < 40) { $score_class = 'red' };

CodePudding user response：

As you said it, need to add class of color according to score

<?php
if (class_exists("Lets_Review_API")) {
    $lr_api = new Lets_Review_API();
    $final_score_value = $lr_api->lets_review_get_final_score_only($post_id);
    $final_score_value = (int) $final_score_value;
    $className = "red";
    if ($final_score_value > 40) {
        $className = "yellow";
    }

    if ($final_score_value > 80) {
        $className = "green";
    }

    echo '<div ><h4>' . $final_score_value . '%</h4></div>';
}?>

CodePudding user response：

You can write an if/else statement to create a class based on the color on a specific range match and then add that class to div. Here is the php code for that:

if ( class_exists( 'Lets_Review_API' ) ) {
    $lr_api = new Lets_Review_API();

    $final_score_value = $lr_api->lets_review_get_final_score_only( $post_id );

    // Define the array of classes.
    $score_class[] = 'show-score';

    if ( $final_score_value >= 1 && $final_score_value <= 40 ) {
        $score_class[] = 'red';
    } elseif ( $final_score_value >= 41 && $final_score_value <= 80 ) {
        $score_class[] = 'yellow';
    } elseif ( $final_score_value >= 81 && $final_score_value <= 100 ) {
        $score_class[] = 'green';
    }

    echo '<div ><h4>' . $final_score_value . '%</h4></div>';
}

Then you'll write the CSS for each extra classes and set the background color or color, since you're using the css variable we can just change the css variables on specific classes.

.show-score.red {
    --cs-color-category: 'red';
}

.show-score.yellow {
    --cs-color-category: 'yellow';
}

.show-score.green {
    --cs-color-category: 'green';
}

CodePudding user response：

You can easily take advantage of the use of CSS variables, just set the desired values for the element in the style attribute.

<?php
    if ( class_exists( "Lets_Review_API" ) ) {
    $lr_api = new Lets_Review_API();
    $final_score_value = $lr_api->lets_review_get_final_score_only( $post_id );
    $bg_color = 'yellow';
    $color = 'black';
    if($final_score_value <= 40){
      $bg_color = 'red';
      $color = 'white';  
    }
    if($final_score_value >= 80){
      $bg_color = 'green';
      $color = 'white';  
    }
    echo '<div  style="--cs-color-category: '.$bg_color.'; --cs-color-category-contrast: '.$color.';"><h4>' . $final_score_value . '%</h4></div>';
        }               
?>

That should give you output like the following:

body {
  --cs-category-label-border-radius: 0.5em;
  --cs-color-category-contrast: black;
  --cs-color-category: white;
  background-color: black;
}

.show-score {
  padding: 0.25rem 0.35rem;
  border-radius: var(--cs-category-label-border-radius);
  color: var(--cs-color-category-contrast);
  background-color: var(--cs-color-category);
}

<div  style="--cs-color-category: red; --cs-color-category-contrast: white;"><h4>19%</h4></div>

<div  style="--cs-color-category: yellow; --cs-color-category-contrast: black;"><h4>52%</h4></div>

<div  style="--cs-color-category: green; --cs-color-category-contrast: white;"><h4>92%</h4></div>

CodePudding user response：

You could just use a background color gradient in your css like this one:

.show-score {
    background: linear-gradient(to right, #ff0000 0%, #ffff00 40%, #00cc00 100% )
}

And have a child element with white background aligned to the right to take up the remaining space like this:

.child-element{
display: flex;
justify-content: flex-end;
width: `remaining percentage`%;
height: 100%;
background-color: #fffff;
}