Add calories color

@@ -12,7 +12,7 @@ searchForm.addEventListener('submit', function(event){
     event.preventDefault();
   }
   else{
-    event.preventDefault(); 
+    event.preventDefault();
     searchQuery = event.target.querySelector('input').value;
     fetchAPI();
   }
@@ -27,6 +27,9 @@ async function fetchAPI(){
 function boxinfo(results){
   let boxsinfo ='';
   results.map(result => {
+  const object = {
+  	  cal: result.recipe.calories.toFixed(0)
+  };
     boxsinfo +=
     `
     <style>
@@ -34,17 +37,17 @@ function boxinfo(results){
       display:flex;
       flex-wrap:wrap;
       margin-left:50px auto;
-    } 
+    }
     .container{
       display:flex;
       flex-wrap:wrap;
       margin-left:50px auto;
 
-    } 
+    }
     <!--검색결과사진,레시피정보 모두 검색창 옆으로 가게하는거까지는 되었고 2열씩 정렬하려 했는데 2열 정렬 부분이 미완성. 우선 사진 옆으로 정보만 수평으로 뜸-->
     <!--검색결과 뜰 시에 검색창 위치가 바뀌는 문제 있음-->
 
-    
+
     </style>
     <div class="item">
       <img src="${result.recipe.image}" alt="">
@@ -52,9 +55,20 @@ function boxinfo(results){
         <h1 class="title">${result.recipe.label}</h1>
         <a href="${result.recipe.url}" target="_blank">View Recipe</a>
       </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>
     `
   })
   searchResultDiv.innerHTML = boxsinfo;
-}
\ No newline at end of file
+}