Dynamic background color of an web object (in a web page) depending a reading value from a CVS file

Question

Firstly, I want to thank you to take your time to read and help me.

This question is related to my previous question, however, I want to place separately, due that I think it could be done by different means.

Previous question if you want to read it (not necessary): Presenting a yearly data from a CVS/XLSX on a WEB PAGE (html) and simulate a Real-Time

I am not familiar with web developing (but I have to); I know basic Python and SQL.

Hands on:

Objective: The object (imagine a circle or rectangle in a web page HTML) has to present or show (in the middle) a value and change his color according to this value.

1. This object has to read this value every 15 minutes from a CVS or Excel file. (to simulate a real-time).

2. This reading is a number from 1 to 100.

3. The background of this object has to change accordingly with this number. For example. If the value is 0, the background has to be red; if the value is 100, the background is green. And, in between the color could be degraded from red to green.

I really appreciate your help guys, I am in a huge hurry to show make this and I do not have any clue for where to start.

I have written some basics HTML codes for basic web pages. But nothing related to PHP, JS, CSS etc. Also, it could be a third party application.

Answer 1

The solution I did was: 1. Used Bootstrap 4.0 and MDBootstrap for making a card. 2. I printed an echo with php where it goes the background color class type of the card:

 <div class="card-subtitle narrower <?php echo($period1[0]) ?>">

3. I evaluated the variable $period1[0] before in PHP, for having the value of that variable as "bg-success", "bg-warning", "bg-danger" or the color you want, depending on my considtions.

4. For reading the web page every 15 minutes, I only made an autorefresh in PHP as:

   $page = $_SERVER['PHP_SELF']; $sec = "10";