Improve my status page (HTML/CSS/JS)

Job ID: 33603347

Budget: ₹1,500 – ₹12,500 INR

I have a simple status page (see screenshot), built from scratch using HTML, JS and CSS. The page shows a tree growing based on the energy consumption rate of a building. The growth of the tree is simulated by advancing through a set of JPGs (starting from a small tree growing all the way to a large tree). I am looking for someone who can make the following changes:

1. Call an API every 15 minutes that gets the energy consumption of the last quarter
2. Based on the energy consumption rate and the average consumption of the same 15 block, do the following
* If the quarter's consumption rate greater than average, don't grow tree
* If it is upto 5% less than average, grow tree by 1 frame
* If it is upto 15% less than average, grow tree by 2 frames
* If it is more than 15% less than average, grow tree by 3 frames
3. Show a vertical progress bar (possibly a light green bar) that indicates how much the tree has grown
4. Show a power consumption meter (like a speed-o-meter) that indicates the consumption rate of the last quarter
5. Show an image carousel (automatic slide show) on the right side instead of the "Turn off computer text"
6. Improve the aesthetics of the page
Related categories: JavaScript Website Design CSS HTML Bootstrap