Add calories color

@@ -27,6 +27,9 @@ async function fetchAPI(){
 function boxinfo(results){
 function boxinfo(results){
   let boxsinfo ='';
   let boxsinfo ='';
   results.map(result => {
   results.map(result => {
+  const object = {
+  	  cal: result.recipe.calories.toFixed(0)
+  };
     boxsinfo +=
     boxsinfo +=
     `
     `
     <style>
     <style>
@@ -52,7 +55,18 @@ function boxinfo(results){
         <h1 class="title">${result.recipe.label}</h1>
         <h1 class="title">${result.recipe.label}</h1>
         <a href="${result.recipe.url}" target="_blank">View Recipe</a>
         <a href="${result.recipe.url}" target="_blank">View Recipe</a>
       </div>
       </div>
-      <p class="item-data">Calories: ${result.recipe.calories.toFixed(0)}</p>
+      ${(cal => {
+        if (cal >= 2000) {
+          return `<p style="color:red">${cal}</p>`;
+        }
+        else if(cal >= 1000 && cal < 2000){
+          return `<p style="color:yellow">${cal}</p>`;
+        }
+        else {
+          return `<p style="color:green">${cal}</p>`;
+        }
+          })(object.cal)
+         }
     </div>
     </div>
     `
     `
   })
   })