phphtmlcakephpcakephp-3.0htk

Array of accounts with diffrent color backgrounds


I have a CakePHP web app that has the following code for the top of the page:

<section class="content">

<style>.center {text-align: center;}</style>
  <!-- Small boxes (Stat box) -->

    <div class="row normaluserdash">
    <?php 
    $colors = array('', 'green','aqua','purple','orange');
    foreach( $user->accounts as $account ) {
    ?>

        <div class="normaluserdash col-xl-3 col-md-4 col-sm-6 col-12">

                            <!-- Card -->
                            <div class="card text-white bg-info">

                                <!-- Card Header -->
                                <h4 class="card-header text-white"><?=$account->title?></h4>
                                <!-- /card header -->

                                <!-- Card Body -->
                                <div class="card-body">

                                    <!-- Card Title-->
                                    <h2 class="card-title text-white center"><?=$this->Format->currency($account->balance)?></h2>
                                    <!-- Card Title-->

                                </div>
                                <!-- /card body -->

                                <!-- Card Footer -->

                                <!-- /card footer -->

                            </div>
                            <!-- /card -->

        </div>
    <?php } ?>

    </div>

the above code displays the account balances for 4 of the account balances for the user since the above code is duplicated 4 times. Right now, the color for all 4 of the above blocks is blue. I would like to make something where I echo a different color for each one and feed that into the CSS classes. Then, I can make a CSS stylesheet that has the coloring for all 4 colors. I want the colors to be different from all 4 blocks, but I want them to stay the same after refreshing. Random generation with JS does not work before anyone suggests it.

Thanks in advance for any help you can provide. In case you are wondering, the website is https://bank.northwatchbank.com and you can sign up to view it. Long story short, it is a fake bank to mess with scammers.

EDIT FIXED:

    <?php 
    function getCalorBykey($key, $colors){
         $colors_count = count($colors);
        // get reminder
        $reminder =  ($key)%$colors_count;
        return $colors[$reminder];
    }

    $colors = array('info','warning','danger','success');
    foreach( $user->accounts as $key => $account ) {
    ?>

        <div class="normaluserdash col-xl-3 col-md-4 col-sm-6 col-12">

            <!-- Card -->
            <div class="card text-white bg-info card-<?= getCalorBykey($key, $colors) ?>">


                                <!-- Card Header -->
                                <h4 class="card-header text-white"><?=$account->title?></h4>
                                <!-- /card header -->

                                <!-- Card Body -->
                                <div class="card-body">

                                    <!-- Card Title-->
                                    <h2 class="card-title text-white center"><?=$this->Format->currency($account->balance)?></h2>
                                    <!-- Card Title-->

                                </div>
                                <!-- /card body -->

                                <!-- Card Footer -->

                                <!-- /card footer -->

                            </div>
                            <!-- /card -->

        </div>
    <?php } ?>

    </div>

thanks Jasco for the help, I only had to make a minor modification to your code to get it working with my theme!


Solution

  • Here is one idea. You should count your colors and get reminder based on your key and with the reminder you can get color from your $colors. if there are more account balances than your colors, the function will repeat the sequence.

    function getCalorBykey($key, $colors){
        $colors_count = count($colors);
        // get reminder
        $reminder =  ($key)%$colors_count;
        return $colors[$reminder];
    }
    

    on your template you can use it like following:

     <div class="row normaluserdash">
        <?php 
        function getCalorBykey($key, $colors){
             $colors_count = count($colors);
            // get reminder
            $reminder =  ($key)%$colors_count;
            return $colors[$reminder];
        }
    
        $colors = array('default', 'green','aqua','purple','orange');
        foreach( $user->accounts as $key => $account ) {
        ?>
    
            <div class="normaluserdash col-xl-3 col-md-4 col-sm-6 col-12">
    
                <!-- Card -->
                <div class="card text-white bg-info card-<?= getCalorBykey($key, $colors) ?>">
    ...