Color change of a button on condition based on value from my database-CodePudding

I made a web page for my project, where I need to change a button background color based on value from database.Like if the value below 10 then it will be green, 10~20 then yellow, 20 then turns into red. Is it possible to do?

already the button works to fetch data from data base.enter image description here

CodePudding user response：

You don't give enough information. Maybe, you can create a color column in your sql table, then with jinja or other you can do somethings like this:

Jinja:

<div style="background-color:{{ data['color_ref'] }};">Hello World</div>

PHP:

<div style="background-color:<?=$color_ref?>;">Hello World</div>

Javascript:

    if (qtt <= 10) {
        result = document.getElementById("happyday")
        result.style.backgroundColor = red;
    }

CodePudding user response：

                <table >
                    <?php
                        if(array_key_exists('test', $_POST)) 
                        {button();}
                        function button()
                        {
                            $conn = mysqli_connect('localhost','root','','asimdb');
                            $sql= "SELECT * FROM atmdata WHERE atm_id = 'ATM_01'";
                            $result = mysqli_query($conn,$sql);
                            While ($row =mysqli_fetch_assoc($result))
                        {
                        echo "
                        <tr><th>ATM ID</th> <td>".$row["atm_id"]."</td></tr>
                        <tr><th>ATM Name</th><td>".$row["ATM_Name"]."</td></tr>
                        <tr><th>ATM Location</th><td>".$row["ATM_Location"]."</td></tr>
                        <tr><th>Contact No.</th><td>".$row["Contact_No"]."</td></tr>
                        <tr><th>View CCTV</th><td>".$row["CCTV"]."</td></tr>
                        <tr><th>Current Temerature</th><td>N/A</td></tr>";
                        }
                        echo"</table>";
                        }
                        ?>

<style>
                    .button {
                    border: none;
                    color: #2F4F4F;
                    padding: 12px 30px;
                    border-radius: 20px;
                    text-align: center;
                    display: inline-block;
                    font-size: 16px;
                    font-weight: bold;
                    margin: 5px 5px;
                    cursor: pointer;
                    transition: transform .2s;
                    box-shadow:
                    0 1px 2px rgba(0,0,0,0.07), 
                    0 2px 4px rgba(0,0,0,0.07), 
                    0 4px 8px rgba(0,0,0,0.07), 
                    0 8px 16px rgba(0,0,0,0.07),
                    0 16px 32px rgba(0,0,0,0.07), 
                    0 32px 64px rgba(0,0,0,0.07);}
                    .button:hover {
                    transform: scale(1.1);
                    border: 1px solid black}
      </style>
      <form method="post">
                <input type="submit"class= "button" name="test" value="ATM 01">
</form>