Adding extra elements on recipe card

- Render ingredients and recipes on click
- Display recipe image on recipe card

Author: Vivi-Vo

src/components/Home.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-app >
+  <v-app class="app">
     <v-container id="home">
       <v-row dense justify="center" alignment="center">
         <v-col cols="12">
@@ -8,8 +8,8 @@
 
           <v-card id="ingredientForm" class="elevation-12">
             <v-card-text>
-              <v-form class="form-group" v-for="(item, index) in ingredients" :key="index">
-                <v-text-field label="Ingredient" v-model="ingredients[index]" />
+              <v-form ref="form" class="form-group" lazy-validation v-for="(item, index) in ingredients" :key="index">
+                <v-text-field label="Ingredient" :rules="formRules" v-model="ingredients[index]" />
               </v-form>
             </v-card-text>
 
@@ -56,7 +56,10 @@ export default {
       api_key: process.env.VUE_APP_API_KEY,
       url_base: "https://api.spoonacular.com/recipes",
       ingredients: ["", "", ""],
-      dishes: []
+      dishes: [],
+      formRules:[
+        v => !!v || 'Ingredient is required'
+      ]
     };
   },
   methods: {
@@ -89,18 +92,14 @@ export default {
 <style>
 @import url("https://fonts.googleapis.com/css2?family=Anton&family=League+Script&display=swap");
 
-.btn-group {
-  justify-content: center;
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-}
 #home {
   display: flex;
   flex-direction: column;
   color: rgb(46, 44, 44);
-  font-family: roboto; 
-  max-width: 512px;}
+  font-family: roboto;
+  max-width: 512px;
+  min-height: 100%;
+}
 #showRecipe {
   background-color: salmon;
   margin-top: 10px;
@@ -126,5 +125,12 @@ export default {
 #ingredientForm {
   flex-basis: 30%;
   flex-grow: 0;
-  }
+}
+
+.btn-group {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+}
 </style>

src/components/RecipeCard.vue

@@ -14,34 +14,38 @@
       </v-card>
     </v-col>
 
-    <v-dialog class="popup" v-model="dialog">
+    <v-dialog id="popup" v-model="dialog">
       <v-card>
-        <v-card-title >
+        <v-card-title id="dishTitle">
           <span class="headline">{{selectedDish.title}}</span>
         </v-card-title>
 
-        <v-card-text>
+        <v-avatar size="200" >
+          <v-img :src="recipeURL" />
+        </v-avatar>        
+
+      <v-card-text>
           <span class="headline">Time Cook: {{timeCook}} minutes</span>
         </v-card-text>
 
-        <v-btn class="btn mb-4" raised color="purple lighten-4">Ingredients</v-btn>
-        <v-spacer></v-spacer>
-        <v-btn raised color="purple lighten-4">Direction</v-btn>
-
-        <v-card-text>
+        <v-btn class="btn mb-4" raised color="purple lighten-4" @click="showIngredient=!showIngredient">Ingredients</v-btn>
+        <v-card-text v-if="showIngredient">
           <ul>
             <li v-for="item in ingredients" :key="item.index">{{item}}</li>
           </ul>
         </v-card-text>
 
-        <v-card-text v-if="instructions.length">
-          <p>Steps: </p>
+        <v-spacer></v-spacer>
+        <v-btn raised color="purple lighten-4" @click="showInstruction=!showInstruction">Direction</v-btn> 
+
+
+        <v-card-text v-if="showInstruction">
           <ol>
             <li v-for="steps in instructions" :key="steps.number">{{steps.step}}</li>
           </ol>
         </v-card-text>
 
-        <v-card-text v-if="instructionURL">
+        <v-card-text v-if="showInstruction && instructionURL">
           <a :href="instructionURL" target="_blank">Recipe URL</a>
           <p></p>
         </v-card-text>
@@ -54,6 +58,7 @@
         </v-card-actions>
       </v-card>
     </v-dialog>
+
   </v-row>
 </template>
 
@@ -72,16 +77,15 @@ export default {
       selectedDish: {},
       ingredients: [],
       instructionURL: "",
-      timeCook: ""
+      timeCook: "",
+      recipeURL: "",
+      showIngredient: false,
+      showInstruction: false
     };
   },
   methods: {
     getRecipeIngredients: function(id) {
-      this.ingredients.length = 0;
-      this.instructions.length = 0;
-      this.instructionURL = "";
-      this.timeCook = "";
-
+      this.resetState(); 
       const url = `${this.url_base}/${id}/information?&apiKey=${this.api_key}`;
       fetch(url)
         .then(res => res.json())
@@ -90,15 +94,25 @@ export default {
             this.ingredients.push(element.name);
           });
           this.timeCook = result.readyInMinutes;
+          this.recipeURL = result.image;
           if (result.analyzedInstructions.length === 0) {
             this.instructionURL = result.sourceUrl;
           } else {
             this.instructions = result.analyzedInstructions[0].steps;
           }
         });
     },
+    resetState: function(){
+      this.ingredients.length = 0;
+      this.instructions.length = 0;
+      this.instructionURL = "";
+      this.timeCook = "";
+      this.showIngredient = false;
+      this.showInstruction = false
+      },
+
     scrollToTop() {
-      document.getElementById("popup").scrollIntoView({
+      document.getElementById("dishTitle").scrollIntoView({
         behavior: "smooth"
       });
     }
@@ -113,9 +127,11 @@ html {
 .title {
   align-self: start;
   text-align: center;
-}
+};
+.dishTitle{
+  align-self: start;
+  text-align: center;
+  font-size: small;
+  }
 
-.popup {
-  
-}
 </style>

src/main.js

@@ -1,5 +1,4 @@
 import Vue from 'vue'
-// import app from './App.vue'
 import home from './components/Home.vue'
 import vuetify from './plugins/vuetify';
 import router from './router'