From d8ed4d24a8120dcc0412c3cc0fb32efc3498a9e9 Mon Sep 17 00:00:00 2001
From: Gavyn Ezell <72951570+gavyn-ezell@users.noreply.github.com>
Date: Tue, 8 Nov 2022 15:57:02 -0800
Subject: [PATCH] started review cards, form change

---
 index.html                          |   8 +-
 source/assets/scripts/RecipeCard.js | 180 ----------------------------
 source/assets/scripts/ReviewCard.js | 155 ++++++++++++++++++++++++
 source/assets/scripts/main.js       |  77 +++---------
 source/reviews.json                 |   9 ++
 5 files changed, 188 insertions(+), 241 deletions(-)
 delete mode 100644 source/assets/scripts/RecipeCard.js
 create mode 100644 source/assets/scripts/ReviewCard.js
 create mode 100644 source/reviews.json
diff --git a/index.html b/index.html
index 49445be..d8c205a 100644
--- a/index.html
+++ b/index.html
@@ -8,11 +8,13 @@
   <title>Food Journal</title>
 
   <!-- Recipe Card Custom Element -->
-  <script src="assets/scripts/RecipeCard.js" type="module"></script>
+  <script src="/source/assets/scripts/ReviewCard.js" type="module"></script>
+
 
   <!-- Main Stylesheets & Scripts --> 
   <link rel="stylesheet" href="assets/styles/main.css" />
   <script src="assets/scripts/main.js" type="module"></script>
+
 </head>
 <body>
   <main>
@@ -32,6 +34,7 @@
       </label>
     </fieldset>
     <fieldset>
+
       <legend> Meal: </legend>
       /* TODO: change parameters */ 
       <label for="Meal: "> Meal:
@@ -40,6 +43,7 @@
       /* navigate to review page */ 
       <label for="title-lnk">Link:
         <input type="url" id="titleLnk" name="titleLnk" required>
+
       </label>
     </fieldset>
     <fieldset>
@@ -62,6 +66,7 @@
       <label for="rating-5">
         5<input type="radio" id="rating-5" value="5" name="rating">
       </label>
+
     </fieldset>
     <fieldset>
       <legend>Other Info:</legend>
@@ -77,6 +82,7 @@
         Tags:
         <input type="text" id="comments" name="comments" required>
       </label>
+
     </fieldset>
     <button type="submit">Add Review</button>
     <button type="button" class="danger">Clear Local Storage</button>
diff --git a/source/assets/scripts/RecipeCard.js b/source/assets/scripts/RecipeCard.js
deleted file mode 100644
index a677861..0000000
--- a/source/assets/scripts/RecipeCard.js
+++ /dev/null
@@ -1,180 +0,0 @@
-// RecipeCard.js
-
-class RecipeCard extends HTMLElement {
-  // Called once when document.createElement('recipe-card') is called, or
-  // the element is written into the DOM directly as <recipe-card>
-  constructor() {
-    super(); // Inheret everything from HTMLElement
-
-    // EXPOSE - START (All expose numbers start with A)
-    // A1. TODO - Attach the shadow DOM to this Web Component (leave the mode open)
-    let shadowEl = this.attachShadow({mode:'open'});
-    // A2. TODO - Create an <article> element - This will hold our markup once our data is set
-    let articleEl = document.createElement('article');
-    // A3. TODO - Create a style element - This will hold all of the styles for the Web Component
-    let styleEl = document.createElement('style');
-    // A4. TODO - Insert all of the styles from cardTemplate.html into the <style> element you just made
-    styleEl.textContent = `
-      * {
-        font-family: sans-serif;
-        margin: 0;
-        padding: 0;
-      }
-    
-      a {
-        text-decoration: none;
-      }
-    
-      a:hover {
-        text-decoration: underline;
-      }
-    
-      article {
-        align-items: center;
-        border: 1px solid rgb(223, 225, 229);
-        border-radius: 8px;
-        display: grid;
-        grid-template-rows: 118px 56px 14px 18px 15px 36px;
-        height: auto;
-        row-gap: 5px;
-        padding: 0 16px 16px 16px;
-        width: 178px;
-      }
-    
-      div.rating {
-        align-items: center;
-        column-gap: 5px;
-        display: flex;
-      }
-    
-      div.rating>img {
-        height: auto;
-        display: inline-block;
-        object-fit: scale-down;
-        width: 78px;
-      }
-    
-      article>img {
-        border-top-left-radius: 8px;
-        border-top-right-radius: 8px;
-        height: 118px;
-        object-fit: cover;
-        margin-left: -16px;
-        width: calc(100% + 32px);
-      }
-    
-      p.ingredients {
-        height: 32px;
-        line-height: 16px;
-        padding-top: 4px;
-        overflow: hidden;
-      }
-    
-      p.organization {
-        color: black !important;
-      }
-    
-      p.title {
-        display: -webkit-box;
-        font-size: 16px;
-        height: 36px;
-        line-height: 18px;
-        overflow: hidden;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-      }
-    
-      p:not(.title),
-      span,
-      time {
-        color: #70757A;
-        font-size: 12px;
-      }
-    `;
-    // A5. TODO - Append the <style> and <article> elements to the Shadow DOM
-    articleEl.append(styleEl);
-    shadowEl.append(articleEl);
-    this.shadowEl = shadowEl
-  }
-
-  /**
-   * Called when the .data property is set on this element.
-   *
-   * For Example:
-   * let recipeCard = document.createElement('recipe-card'); // Calls constructor()
-   * recipeCard.data = { foo: 'bar' } // Calls set data({ foo: 'bar' })
-   *
-   * @param {Object} data - The data to pass into the <recipe-card>, must be of the
-   *                        following format:
-   *                        {
-   *                          "imgSrc": "string",
-   *                          "imgAlt": "string",
-   *                          "titleLnk": "string",
-   *                          "titleTxt": "string",
-   *                          "organization": "string",
-   *                          "rating": number,
-   *                          "numRatings": number,
-   *                          "lengthTime": "string",
-   *                          "ingredients": "string"
-   *                        }
-   */
-  set data(data) {
-    // If nothing was passed in, return
-    if (!data) return;
-
-    // A6. TODO - Select the <article> we added to the Shadow DOM in the constructor
-    let articleEl = this.shadowEl.querySelector('article');
-    // A7. TODO - Set the contents of the <article> with the <article> template given in
-    //           cardTemplate.html and the data passed in (You should only have one <article>,
-    //           do not nest an <article> inside another <article>). You should use Template
-    //           literals (tempalte strings) and element.innerHTML for this.
-    
-    let img1 = document.createElement('img');
-    img1.setAttribute('src',data['imgSrc']);
-    img1.setAttribute('alt',data['imgAlt']);
-
-    let pTitle = document.createElement('p');
-    let aTitle = document.createElement('a');
-    pTitle.setAttribute('class','title');
-    aTitle.setAttribute('href', data['titleLnk']);
-    aTitle.innerHTML = data['titleTxt'];
-    pTitle.append(aTitle)
-
-    let pOrg = document.createElement('p');
-    pOrg.setAttribute('class','organization');
-    pOrg.innerHTML = data["organization"];
-
-    let div = document.createElement('div')
-    div.setAttribute('class', 'rating')
-    let span1 = document.createElement('span')
-    span1.innerHTML = data["rating"];
-    let img2 = document.createElement('img')
-    img2.setAttribute('src', './assets/images/icons/'+data['rating']+'-star.svg');
-    img2.setAttribute('alt', data['rating'] +' stars');
-    let span2 = document.createElement('span')
-    span2.innerHTML = '('+data['numRatings']+')';
-    div.append(span1);
-    div.append(img2);
-    div.append(span2);
-
-    let timeEl = document.createElement('time')
-    timeEl.innerHTML = data['lengthTime']
-
-    let pIngred = document.createElement('p');
-    pIngred.setAttribute('class','ingredients')
-    pIngred.innerHTML = data['ingredients'];
-
-    articleEl.append(img1)
-    articleEl.append(pTitle)
-    articleEl.append(pOrg)
-    articleEl.append(div)
-    articleEl.append(timeEl)
-    articleEl.append(pIngred)
-
-  }
-}
-
-// A8. TODO - Define the Class as a customElement so that you can create
-//           'recipe-card' elements
-
-customElements.define('recipe-card', RecipeCard);
diff --git a/source/assets/scripts/ReviewCard.js b/source/assets/scripts/ReviewCard.js
new file mode 100644
index 0000000..98a9344
--- /dev/null
+++ b/source/assets/scripts/ReviewCard.js
@@ -0,0 +1,155 @@
+// ReviewCard.js
+
+class ReviewCard extends HTMLElement {
+  // Called once when document.createElement('review-card') is called, or
+  // the element is written into the DOM directly as <review-card>
+  constructor() {
+    super(); 
+
+
+    let shadowEl = this.attachShadow({mode:'open'});
+
+    let articleEl = document.createElement('article');
+
+    let styleEl = document.createElement('style');
+    styleEl.textContent = `
+      * {
+        font-family: sans-serif;
+        margin: 0;
+        padding: 0;
+      }
+    
+      a {
+        text-decoration: none;
+      }
+    
+      a:hover {
+        text-decoration: underline;
+      }
+    
+      article {
+        align-items: center;
+        border: 1px solid rgb(223, 225, 229);
+        border-radius: 8px;
+        display: grid;
+        grid-template-rows: 118px 56px 14px 18px 15px 36px;
+        height: auto;
+        row-gap: 5px;
+        padding: 0 16px 16px 16px;
+        width: 178px;
+      }
+    
+      div.rating {
+        align-items: center;
+        column-gap: 5px;
+        display: flex;
+      }
+    
+      div.rating>img {
+        height: auto;
+        display: inline-block;
+        object-fit: scale-down;
+        width: 78px;
+      }
+    
+      article>img {
+        border-top-left-radius: 8px;
+        border-top-right-radius: 8px;
+        height: 118px;
+        object-fit: cover;
+        margin-left: -16px;
+        width: calc(100% + 32px);
+      }
+    
+      p.ingredients {
+        height: 32px;
+        line-height: 16px;
+        padding-top: 4px;
+        overflow: hidden;
+      }
+    
+      p.organization {
+        color: black !important;
+      }
+    
+      p.title {
+        display: -webkit-box;
+        font-size: 16px;
+        height: 36px;
+        line-height: 18px;
+        overflow: hidden;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+    
+      p:not(.title),
+      span,
+      time {
+        color: #70757A;
+        font-size: 12px;
+      }
+    `;
+    articleEl.append(styleEl);
+    shadowEl.append(articleEl);
+    this.shadowEl = shadowEl
+  }
+
+  /**
+   * Called when the .data property is set on this element.
+   *
+   * For Example:
+   * let reviewCard = document.createElement('review-card'); 
+   * reviewCard.data = { foo: 'bar' } 
+   *
+   * @param {Object} data - The data to pass into the <review-card>, must be of the
+   *                        following format:
+   *                        {
+   *                          "imgSrc": "string",
+   *                          "imgAlt": "string",
+   *                          "mealName": "string",
+   *                          "restaurant": "string",
+   *                          "rating": number
+   *                        }
+   */
+  set data(data) {
+    // If nothing was passed in, return
+    if (!data) return;
+
+    // Select the <article> we added to the Shadow DOM in the constructor
+    let articleEl = this.shadowEl.querySelector('article');
+    
+    // setting the article elements for the review card
+
+    //image setup
+    let img1 = document.createElement('img');
+    img1.setAttribute('src',data['imgSrc']);
+    img1.setAttribute('alt',data['imgAlt']);
+
+    //meal name setup
+    let pMeal = document.createElement('p');
+    pMeal.setAttribute('class','meal-name');
+    pMeal.innerHTML = data["mealName"];
+
+    let pRestaurant = document.createElement('p');
+    pRestaurant.setAttribute('class','restaurant-name');
+    pRestaurant.innerHTML = data["restaurant"];
+
+    //other info: rating
+    let div = document.createElement('div')
+    div.setAttribute('class', 'rating')
+    let span1 = document.createElement('span')
+    span1.innerHTML = data["rating"];
+    let img2 = document.createElement('img')
+    img2.setAttribute('src', './source/assets/images/icons/'+data['rating']+'-star.svg');
+    img2.setAttribute('alt', data['rating'] +' stars');
+    div.append(span1);
+    div.append(img2);
+
+    articleEl.append(img1)
+    articleEl.append(pMeal)
+    articleEl.append(pRestaurant)
+    articleEl.append(div)
+
+  }
+}
+customElements.define('review-card', ReviewCard);
diff --git a/source/assets/scripts/main.js b/source/assets/scripts/main.js
index b999dee..06a5d05 100644
--- a/source/assets/scripts/main.js
+++ b/source/assets/scripts/main.js
@@ -3,28 +3,20 @@
 // Run the init() function when the page has loaded
 window.addEventListener('DOMContentLoaded', init);
 
-// Starts the program, all function calls trace back here
 function init() {
-  // Get the recipes from localStorage
-  let recipes = getRecipesFromStorage();
+  // Get the reviews from localStorage
+  let reviews = getReviewsFromStorage();
   // Add each recipe to the <main> element
-  addRecipesToDocument(recipes);
+  addReviewsToDocument(reviews);
   // Add the event listeners to the form elements
   initFormHandler();
 }
 
 /**
- * Reads 'recipes' from localStorage and returns an array of
- * all of the recipes found (parsed, not in string form). If
- * nothing is found in localStorage for 'recipes', an empty array
- * is returned.
- * @returns {Array<Object>} An array of recipes found in localStorage
+ * @returns {Array<Object>} An array of reviews found in localStorage
  */
-function getRecipesFromStorage() {
-  // A9. TODO - Complete the functionality as described in this function
-  //           header. It is possible in only a single line, but should
-  //           be no more than a few lines.
-  let result = JSON.parse(localStorage.getItem('recipes'))
+function getReviewsFromStorage() {
+  let result = JSON.parse(localStorage.getItem('reviews'))
   if (result) {
     return result;
   }
@@ -32,38 +24,25 @@ function getRecipesFromStorage() {
 }
 
 /**
- * Takes in an array of recipes and for each recipe creates a
- * new <recipe-card> element, adds the recipe data to that card
- * using element.data = {...}, and then appends that new recipe
- * to <main>
- * @param {Array<Object>} recipes An array of recipes
+ * @param {Array<Object>} reviews An array of reviews
  */
-function addRecipesToDocument(recipes) {
-  // A10. TODO - Get a reference to the <main> element
+function addReviewsToDocument(reviews) {
   let mainEl = document.querySelector('main')
-  recipes.forEach(recipe=> {
-    let newRecipe = document.createElement('recipe-card')
-    newRecipe.data = recipe
-    mainEl.append(newRecipe);
+  reviews.forEach(review=> {
+    let newReview = document.createElement('review-card')
+    newReview.data = review
+    mainEl.append(newReview);
   })
-  // A11. TODO - Loop through each of the recipes in the passed in array,
-  //            create a <recipe-card> element for each one, and populate
-  //            each <recipe-card> with that recipe data using element.data = ...
-  //            Append each element to <main>
 
 }
 
 /**
- * Takes in an array of recipes, converts it to a string, and then
- * saves that string to 'recipes' in localStorage
- * @param {Array<Object>} recipes An array of recipes
+ * Takes in an array of reviews, converts it to a string, and then
+ * saves that string to 'reviews' in localStorage
+ * @param {Array<Object>} reviews An array of reviews
  */
-function saveRecipesToStorage(recipes) {
-  // EXPLORE - START (All explore numbers start with B)
-  // B1. TODO - Complete the functionality as described in this function
-  //            header. It is possible in only a single line, but should
-  //            be no more than a few lines.
-  localStorage.setItem('recipes', JSON.stringify(recipes));
+function saveRecipesToStorage(reviews) {
+  localStorage.setItem('reviews', JSON.stringify(reviews));
 }
 
 /**
@@ -72,11 +51,8 @@ function saveRecipesToStorage(recipes) {
  */
 function initFormHandler() {
 
-  // B2. TODO - Get a reference to the <form> element
   let theForm = document.querySelector('form')
   
-  // B3. TODO - Add an event listener for the 'submit' event, which fires when the
-  //            submit button is clicked
   let submitButt = document.querySelector('button[type="submit"]')
   submitButt.addEventListener('click', function(){
 
@@ -110,23 +86,4 @@ function initFormHandler() {
      }
   });
 
-  // Steps B4-B9 will occur inside the event listener from step B3
-  // B4. TODO - Create a new FormData object from the <form> element reference above
-  // B5. TODO - Create an empty object (I'll refer to this object as recipeObject to
-  //            make this easier to read), and then extract the keys and corresponding
-  //            values from the FormData object and insert them into recipeObject
-  
-  // B6. TODO - Create a new <recipe-card> element
-  // B7. TODO - Add the recipeObject data to <recipe-card> using element.data
-  // B8. TODO - Append this new <recipe-card> to <main>
-  // B9. TODO - Get the recipes array from localStorage, add this new recipe to it, and
-  //            then save the recipes array back to localStorage
-
-  // B10. TODO - Get a reference to the "Clear Local Storage" button
-  // B11. TODO - Add a click event listener to clear local storage button
-  
-  // Steps B12 & B13 will occur inside the event listener from step B11
-  // B12. TODO - Clear the local storage
-  // B13. TODO - Delete the contents of <main>
-
 }
diff --git a/source/reviews.json b/source/reviews.json
new file mode 100644
index 0000000..33ef6fc
--- /dev/null
+++ b/source/reviews.json
@@ -0,0 +1,9 @@
+[
+   {
+      "imgSrc": "https://cdn.vox-cdn.com/thumbor/Cj5J-5WqSCjlC2tWCOXEB536CJY=/0x0:1810x1182/1200x800/filters:focal(761x447:1049x735)/cdn.vox-cdn.com/uploads/chorus_image/image/69422966/Tacos_Lined_Up.0.png",
+      "imgAlt": "tacos pic",
+      "mealName": "Birria Tacos",
+      "restaurant": "Mike's Red Tacos",
+      "rating": 5
+   }
+]
\ No newline at end of file
