Change the div element background according to sensor reading-CodePudding

I've been playing with ESP8266 and achieved some good-looking readings via DHT22 and BH1780 sensors to a single HTML page where I can only use HTML, CSS and JavaScript for the frontend. Short story I read the temperature humidity and the light intensity in the tent, where light intensity is mainly to determine if is day or night for example LUX = 0 is night and LUX = 1 is day

My question: How and what to use in order to change each <div role="alert"> according to the sensor readings, or even change the fontawesome icon from <i style="color:#ffef4C;"></i> to <i style="color:#AFE2FE;"></i>

For example, if Temperature readings exceeds 50 degree alert-danger...

Any suggestions welcome, but please note We can't use PHP :(

<!DOCTYPE HTML><html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>
</head>

 <div class="card-body text-center">
  <div class="alert alert-success" role="alert">
    <span class="h4"><i class="fas fa-thermometer-half" style="color:#059e8a;"></i>  Temperature</span> 
    <span class="h4" id="temperature">29</span>
    <sup class="units">&deg;C</sup>
  </div>

Backend Arduino code

 // Replaces placeholder with DHT values
String processor(const String& var){
  //Serial.println(var);
  if(var == "TEMPERATURE"){
    return String(t);
  }
  else if(var == "HUMIDITY"){
    return String(h);
  }
  else if(var == "LUX"){
    return String(lux);
  }
  return String();
}

CodePudding user response：

Something like this?

Replace

document.getElementById("temperature").innerHTML = this.responseText;

with this (change 10 to whatever should be red)

const div = document.getElementById("temperature"), 
     temp =  this.responseText; // cast to number
div.innerHTML = temp;
div.closest(".alert.alert-success").style.backgroundColor= temp>10?"red": "#d4edda";