CODEWITHSUNDEEP
phpcss
M375
M375

Reputation: 139

style echo output different

I need to style my echo output. Fx

if the number is 1 it should be blue

if the number is 6 it should be green

I am not quite sure to do it, because if I style my div tag, it is all the numbers, and I need to style some specifik numbers.As it is now some of the numbers have a different padding. I am think if it should be

if($number == 1) {
   //some code
}

or is that totally wrong?

HTML:

<div id="show" >
            <div class="numberheader">
                <p>Tal</p>
            </div>
            <ul class="latestnumbers" style="list-style:none;padding-top: 60px;">
                <?php include('response.php');?>
            </ul>           
        </div>

PHP:

<?php 
//echo "kuagdjagd";
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
//include('session.php');

// Selecting Database
include 'dbconfic.inc.php';
$pad_left_values = array(0 => 19, 1 => -1, 2 => 20, 3 => -1, 4 => 38, 5 => -1, 6 => 40, 7 => 20, 8 => 20, 9 => 40, 10 => 20, 11 => 20, 12 => 20);

    // '?' er placeholders for variabler
    $stmt = $mysqli->prepare("SELECT * FROM numbertable ORDER BY num_id DESC LIMIT 9;");

    // execute prepared statement 
    $stmt->execute();

    // gør variabler klar:    
    $number = null;    
    $n_id = null;

    /* bind result variabler */
    $stmt->bind_result($n_id, $number);

    /* fetch values for hver row, her kun 1 row dog: */
    while ($stmt->fetch()) {
        $pad = ($number >= 1 && $number <= 12? $pad_left_values[$number]: $pad_left_values[0]);

         echo "<li><div style='padding-left: ".$pad."px;'>$number</div></li>";

    }    

    // luk statement                        
    $stmt->close();

    // luk connection
    $mysqli->close();                   

?>

Upvotes: 1

Views: 123

Answers (2)

Ankit vadariya
Ankit vadariya

Reputation: 1263

Replace 

 echo "<li><div style='padding-left: ".$pad."px;'>$number</div></li>";

With 

 echo '<li><div class="color_'.$number.'" style='padding-left: ".$pad."px;'>$number</div></li>';

And write CSS forr that case

 .color_1{
     color:blue;
  }
.color_6{
     color:green;
  }

Upvotes: 0

Tobias Baumeister
Tobias Baumeister

Reputation: 2147

You can do it just like you did it with the Paddings already: By using an Array.

$colorArr = Array(0=>"black", 1=>"blue", 2=>"yellow", /** ... **/, 6=>"green" /** ... **/);
/** ... **/
while ($stmt->fetch()) {
    $pad = ($number >= 1 && $number <= 12? $pad_left_values[$number]: $pad_left_values[0]);
    $col = ($number >= 1 && $number <= 12? $colorArr[$number]: $colorArr[0]);

    echo "<li><div style='padding-left: ".$pad."px; color: ".$col."'>$number</div></li>";

}

Also to make your code a little more dynamic, you should replace the $number <= 12 condition by $number < count($pad_left_values). This way you can add more padding/color values and don't have to worry about setting the correct number down there in the code.

Upvotes: 1

Related Questions