pseudo code after show me button

app.js

@@ -42,15 +42,24 @@ zeldaApp.getInfo=()=>{
  // .push the food and non_food array in the combine array
  // random generate a value from the answer from the array
  // then alert "select a preference"
-// 2: CREATE A NEW
-
+// 2: CREATE A NEW OBJECT
+ // creat a new empty obj named newObj
+ // grab the content in the food & non_food arraies
+ // loop through newObj
+ // random generate a value from the answer from the newObj
 
+
  // else user selects a submit value as an empty value "pick you preference" because an answer is required
 
 //When users finish the question, click a button “Show me” then display answer section
 
-// Display card with:
-// Img
+ // event listener for the show me button
+ // match selected value with object data's key name(food & non_food &combination of foor & non_food)
+ // loop through food, non_food and the combination 
+ // create 3 <p> tags inside cardContentContainer(ul>li>p) with seperate class name: name, common_location and description; and 1 <img> tag inside imgContainer with class name of image
+
+// Display card with:
+// Img: append a randomly generated image
 // Name
 // Location 
 // description 

index.html

@@ -57,20 +57,20 @@ <h2>Your Zelda Creature is:</h2>
  </div>
  <div class="cardContainer">
  <div class="imgContainer">
- <img src="./assets/48053.gif" alt="">
+ <!-- <img src="./assets/48053.gif" alt=""> -->
  </div>
  <div class="cardContentContainer">
  <ul>
  <li class="name">
- <p>Creature Name</p>
+ <!-- <p>Creature Name</p> -->
  </li> <!-- name end -->
  <li class="location">
- <p>Location</p>
+ <!-- <p>Location</p> -->
  </li> <!-- location end -->
  <li class="decription">
- <p>Description: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam, voluptas! Iste
+ <!-- <p>Description: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam, voluptas! Iste
  tenetur facilis perspiciatis! Adipisci modi exercitationem at dolores quod officia
- consectetur ex laboriosam delectus assumenda distinctio et, perferendis eaque?</p>
+ consectetur ex laboriosam delectus assumenda distinctio et, perferendis eaque?</p> -->
  </li> <!-- decription end -->
  </ul>
  </div> <!-- cardContentContainer end -->