feat: improve food preview panel

HtmlUtil.ts

@@ -31,8 +31,5 @@ export const getButtonListByClassName = (name: string): Array<HTMLButtonElement>
 }
 
 export const showFoodPreview = (show: boolean) => {
-  if (!show) {
-    getDivById('food-preview').innerHTML = '';
-  }
   getDivById('food-preview').classList = `add-food-form-item ${show ? 'display-block' : 'display-none'}`;
 }

index.html

@@ -51,7 +51,29 @@
                 </div>
                 <button class="add-btn" id="add-food-btn">Add Food</button>
             </div>
-            <div class="add-food-form-item display-none" id="food-preview">
+            <div class="display-none" id="food-preview">
+                <div class="nutrition-summary">
+                    <div class="nutrition-item">
+                        <div class="nutrition-value" id="calorieValuePreview">0</div>
+                        <div class="nutrition-label">Calories</div>
+                    </div>
+                    <div class="nutrition-item">
+                        <div class="nutrition-value" id="proteinValuePreview">0</div>
+                        <div class="nutrition-label">Protein (g)</div>
+                    </div>
+                    <div class="nutrition-item">
+                        <div class="nutrition-value" id="fatValuePreview">0</div>
+                        <div class="nutrition-label">Fat (g)</div>
+                    </div>
+                    <div class="nutrition-item">
+                        <div class="nutrition-value" id="carboValuePreview">0</div>
+                        <div class="nutrition-label">Carbs (g)</div>
+                    </div>
+                    <div class="nutrition-item">
+                        <div class="nutrition-value" id="fiberValuePreview">0</div>
+                        <div class="nutrition-label">Fiber (g)</div>
+                    </div>
+                </div>
             </div>
         </div>
 

index.ts

@@ -54,14 +54,12 @@ const previewCalories = () => {
   const foodData: FoodItem = getFoodItemByName(foodSelect.value);
   const proportion = getFoodProportion(grams, foodData);
 
-  const textArray: string[] = [];
+  getDivById('calorieValuePreview').textContent = proportion.info.calories.toString();
-  textArray.push(`Calories in ${grams}g: ${proportion.info.calories}; `);
+  getDivById('proteinValuePreview').textContent = (Math.round(proportion.info.protein * 10) / 10).toString ();
-  textArray.push(`Protein: ${proportion.info.protein}g; `);
+  getDivById('fatValuePreview').textContent = (Math.round(proportion.info.fat * 10) / 10).toString ();
-  textArray.push(`Fat: ${proportion.info.fat}g; `);
+  getDivById('carboValuePreview').textContent = (Math.round(proportion.info.carbs * 10) / 10).toString ();
-  textArray.push(`Carbohydrates: ${proportion.info.carbs}g; `);
+  getDivById('fiberValuePreview').textContent = (Math.round(proportion.info.fiber * 10) / 10).toString ();
-  textArray.push(`Fiber: ${proportion.info.fiber}g;`);
 
-  getDivById('food-preview').innerHTML = textArray.join('');
   showFoodPreview(true);
 }
 
@@ -70,7 +68,7 @@ const addEvents = () => {
     previewCalories();
   });
 
-  getInputById('gramAmount')?.addEventListener('change', () => {
+  getInputById('gramAmount').addEventListener('change', () => {
     previewCalories();
   });
 

style.css

@@ -88,11 +88,6 @@ h1 {
     overflow: hidden;
 }
 
-.add-food-form-item {
-  margin-top: 15px;
-  margin-left: 3px;
-}
-
 .display-none {
   display: none;
 }