Change background color by number

userjxbn 0
Viewed 38

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:

enter image description here

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 class="show-score"><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 class="show-score ' + . $score_class . +'"><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' };

wordpress
3 Answers

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 class="show-score '.$className.'"><h4>' . $final_score_value . '%</h4></div>';
}?>
IT goldman0

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 class="' . join( ' ', $score_class ) . '"><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';
}
Vijay Hardaha0

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 class="show-score" 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 class="show-score" style="--cs-color-category: red; --cs-color-category-contrast: white;"><h4>19%</h4></div>

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

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

Arleigh Hix0
Related