Utilizing Awesome Tables (AT), I am extracting data from a Google Sheets document to display on a website. The HTML template in the sheets is used for formatting the data, specifically focusing on the table output with inline CSS styling. Since the template only includes the <body> element, access to other sections like <head> is restricted.
One particular piece of data (${"Status"}) retrieved from Google Sheets can have three potential values: Active, Delivered, or Cancelled. The output is presented as:
<div style="display:inline-block;color:rgb(87, 87, 87);font-size:14px;padding:10px 10px 10px 0;flex-shrink:0;margin-right:auto;text-transform:capitalize;">
<p><b>Name:</b> ${"Name"}</p>
<p><b>Start Date:</b> ${"Start Date"}</p>
<p><b>Completed Date:</b> ${"Completed Date"}</p>
<p><b>Status:</b> ${"Status"}</p>
</div>
The goal is to color code the text based on the value of ${"Status"} - "Active" = orange, "Cancelled" = red, and "Delivered" = green. While considering using JavaScript for this task, guidance on how to proceed is requested.
Any assistance would be greatly appreciated.
Based on the feedback received, here is an initial attempt at writing JavaScript following some research. Is this approach heading in the right direction?
var jobStatus = "${"Status"}";
if (jobStatus === "Delivered") {
document.getElementById("status").style.color = "green";
} else if (jobStatus === "Active") {
document.getElementById("status").style.color = "orange";
} else {
document.getElementById("status").style.color = "red";
}