Trying to create a score balk with php-CodePudding

<li >Rank: <?php echo createBalk($rank['procenten']); ?></li>
<li >leven: <?php echo createBalk($leven); ?></li>

function createBalk($score) {

    if($score >= 100) {
        return "<div class='progress-bar'>
            <div class='pfull' width='$score'>{$score}%</div>
        </div>";
    } elseif($score >= 50 && $score < 100) {
        return "<div class='progress-bar'>
            <div class='pfull' width='$score'>{$score}%</div>
            <div class='pempty' width='100 - $score'></div>
        </div>";
    } elseif($score < 50 && $score > 0) {
        return "";
    } elseif($score == 0) {
        return "";
    }
}

.pbar {
    display: flex;
    width: 100%;
}

.progress-bar {
    max-width: 100px;
    width: 100%;
    display: flex;
}

.pfull {
    background-color: #00ff00;
    height: 100%; 
}

.pempty {
    background-color: #008000;
    height: 100%;
}

If i try make a balk for my website but somehow the balk never show up in the right way. From the function createBalk.

Lets say $score is 60. then balk must be 60 light green 40 dark green. This normally gives me a balk off 100% width.

Somehow that doesnt happen if i dont give it any text it wont show up at all. For some reason the div width doesnt work.

Can someone help me thx for having look/crack at it.

CodePudding user response：

100 - $score won’t work. Try instead:

“ . (100 - $score) . “%

Also add the % in the pfull div. Here the two lines to change:

<div class='pfull' width='$score%'>{$score}%</div>
<div class='pempty' width='”. (100 - $score) . “%'></div>

CodePudding user response：

So i figured it out whats wrong. here new code that works the way it suppose to be.

function createBalk($score) {

$minscore = 100 - $score;

if($score >= 100) {
    return "<div class='progress-bar'>
        <div class='pfull' style='width:$score%;'>{$score}%</div>
    </div>";
} elseif($score >= 50 && $score < 100) {
    return "<div class='progress-bar'>
        <div class='pfull' style='width:$score%;'></div>
        <div class='pempty' style='width:$minscore%;'></div>
    </div>";
} elseif($score < 50 && $score > 0) {
    return "";
} elseif($score == 0) {
    return "";
}

}