Air Quality Visualizer

import Handlebars from "https://esm.sh/handlebars";

Handlebars.registerHelper("AQI", function(aqi){
  if(aqi > 50){
    return 'moderate';
  } else if (aqi > 100){
    return 'unhealthy-sensitive';
  } else if (aqi > 150){
    return 'unhealthy';
  } else if (aqi > 200){
    return 'very-unhealthy';
  } else if (aqi > 300){
    return 'hazardous';
  }
  return 'good'
})

const template = Handlebars.compile(`
<style>
  body{
    font-family: arial;
    font-size: small;
  }
  .hazardous {
    background-color:rgb(126, 0, 35);
  }
  .good {
    background-color:rgb(0, 224, 0);
  }
  .moderate{
    background-color: rgb(255, 255, 0);
  }
  .unhealthy-sensitive {
    background-color:rgb(255, 118, 0);
  }
  .unhealthy {
    background-color:rgb(255, 0, 0);
  }
  .very-unhealthy{
    background-color: rgb(153, 0, 73);
  }
  .box {
    border-radius:10px;
    padding: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
  }
  .title {
    font-weight: bolder;
  }

  .main {
    font-size: x-large;
  }
</style>
<span class="main title"> Overall </span>
<div class="main box {{#AQI data.overall_aqi}}{{/AQI}}">
AQI: {{data.overall_aqi}}
</div>

<span class="title">Carbon Dioxide (CO)</span>
<div class="box {{#AQI data.CO.aqi}}{{/AQI}}">
AQI: {{data.CO.aqi}}<br/>
Concentration: {{data.CO.concentration}}
</div>
<span class="title">Nitrogen Dioxide (NO2)</span>
<div class="box {{#AQI data.NO2.aqi}}{{/AQI}}">
AQI: {{data.NO2.aqi}}<br/>
Concentration: {{data.NO2.concentration}}
</div>

<span class="title">Ozone (O3)</span>
<div class="box {{#AQI data.O3.aqi}}{{/AQI}}">
AQI: {{data.O3.aqi}}<br/>
Concentration: {{data.O3.concentration}}
</div>

<span class="title">Sulfur Dioxide (SO2)</span>
<div class="box {{#AQI data.SO2.aqi}}{{/AQI}}">
AQI: {{data.SO2.aqi}}<br/>
Concentration: {{data.SO2.concentration}}
</div>

<span class="title">Fine partical pollution (PM2.5)</span>
<div class="box {{#AQI data.[PM2.5].aqi}}{{/AQI}}">
AQI: {{data.[PM2.5].aqi}}<br/>
Concentration: {{data.[PM2.5].concentration}}
</div>

<span class="title">Fine partical pollution (PM10)</span>
<div class="box {{#AQI data.[PM10].aqi}}{{/AQI}}">
AQI: {{data.[PM10].aqi}}<br/>
Concentration: {{data.[PM10].concentration}}
</div>
`);

const onResponse = async (res) => {
  const main = document.querySelector("main");
  if (!res) {
    main.innerHTML = "<pre>Response is empty</pre>";
    return;
  }
  const json = await res.json();
  
  main.innerHTML = template({ data:  json });
};

Rapid.onResponse(onResponse);