From 3e4ae68e2e52ca9acad8269816df152f8e1bd69c Mon Sep 17 00:00:00 2001
From: Gavyn Ezell <72951570+gavyn-ezell@users.noreply.github.com>
Date: Tue, 8 Nov 2022 21:51:03 -0800
Subject: [PATCH] tag functionality in form, review card changes

---
 index.html                          | 32 ++++++------
 source/assets/scripts/ReviewCard.js | 14 ++----
 source/assets/scripts/main.js       | 76 +++++++++++++++++++++--------
 source/assets/styles/main.css       | 29 ++++++++++-
 source/reviews.json                 |  7 +++
 5 files changed, 109 insertions(+), 49 deletions(-)
diff --git a/index.html b/index.html
index d8c205a..23e49e1 100644
--- a/index.html
+++ b/index.html
@@ -12,8 +12,8 @@
 
 
   <!-- Main Stylesheets & Scripts --> 
-  <link rel="stylesheet" href="assets/styles/main.css" />
-  <script src="assets/scripts/main.js" type="module"></script>
+  <link rel="stylesheet" href="/source/assets/styles/main.css" />
+  <script src="/source/assets/scripts/main.js" type="module"></script>
 
 </head>
 <body>
@@ -23,7 +23,7 @@
   <form id="new-food-entry">
     <fieldset>
 
-      <legend>Image:</legend>
+      <legend>Photo:</legend>
       <label for="image-src">
         Source:
         <input type="text" id="imgSrc" name="imgSrc" required>
@@ -36,14 +36,12 @@
     <fieldset>
 
       <legend> Meal: </legend>
-      /* TODO: change parameters */ 
-      <label for="Meal: "> Meal:
-        <input type="text" id="titleTxt" name="titleTxt" required>
+      <label for="Meal: ">Meal:
+        <input type="text" id="mealName" name="mealName" required>
       </label>
-      /* navigate to review page */ 
-      <label for="title-lnk">Link:
-        <input type="url" id="titleLnk" name="titleLnk" required>
-
+      <label for="review">Description: 
+        <br>
+        <textarea id="review"></textarea>
       </label>
     </fieldset>
     <fieldset>
@@ -74,18 +72,18 @@
         Restaurant:
         <input type="text" id="restaurant" name="restaurant" required>
       </label>
-      <label for="comments">
-        Comments:
-        <input type="text" id="comments" name="comments" required>
-      </label>
-      <label for="comments">
+      <label for="tags">
         Tags:
-        <input type="text" id="comments" name="comments" required>
+        <input type="text" id="tags" name="tags" required>
+        <div id="tag-container">
+
+        </div>
+        <button type="button" id="tagAdd">Add Tag</button>
       </label>
 
     </fieldset>
     <button type="submit">Add Review</button>
-    <button type="button" class="danger">Clear Local Storage</button>
+    <button type="button" class="danger">Clear Review Journal</button>
   </form>
 </body>
 </html>
\ No newline at end of file
diff --git a/source/assets/scripts/ReviewCard.js b/source/assets/scripts/ReviewCard.js
index 98a9344..1b66a88 100644
--- a/source/assets/scripts/ReviewCard.js
+++ b/source/assets/scripts/ReviewCard.js
@@ -61,18 +61,11 @@ class ReviewCard extends HTMLElement {
         width: calc(100% + 32px);
       }
     
-      p.ingredients {
-        height: 32px;
-        line-height: 16px;
-        padding-top: 4px;
-        overflow: hidden;
-      }
-    
-      p.organization {
+      p.restaurant-name {
         color: black !important;
       }
     
-      p.title {
+      p.meal-name {
         display: -webkit-box;
         font-size: 16px;
         height: 36px;
@@ -82,7 +75,7 @@ class ReviewCard extends HTMLElement {
         -webkit-box-orient: vertical;
       }
     
-      p:not(.title),
+      p:not(.meal-name),
       span,
       time {
         color: #70757A;
@@ -150,6 +143,7 @@ class ReviewCard extends HTMLElement {
     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 06a5d05..3073fb6 100644
--- a/source/assets/scripts/main.js
+++ b/source/assets/scripts/main.js
@@ -41,7 +41,7 @@ function addReviewsToDocument(reviews) {
  * saves that string to 'reviews' in localStorage
  * @param {Array<Object>} reviews An array of reviews
  */
-function saveRecipesToStorage(reviews) {
+function saveReviewsToStorage(reviews) {
   localStorage.setItem('reviews', JSON.stringify(reviews));
 }
 
@@ -50,40 +50,74 @@ function saveRecipesToStorage(reviews) {
  * <button>.
  */
 function initFormHandler() {
-
+  let tagContainer = document.getElementById('tag-container');
   let theForm = document.querySelector('form')
-  
   let submitButt = document.querySelector('button[type="submit"]')
   submitButt.addEventListener('click', function(){
-
-    let formData = new FormData(theForm);
-    let recipeObject = {}
-
-    for (let [key, value] of formData) {
-      
-      recipeObject[`${key}`] = `${value}`
+    let deleteTags = document.querySelectorAll('.tag')
+    for(let i = 0; i < deleteTags.length; i ++) {
+      tagContainer.removeChild(deleteTags[i]);
     }
+    let formData = new FormData(theForm);
+    let reviewObject = {}
+    for (let [key, value] of formData) {
+      console.log(`${key}`)
+      console.log(`${value}`)
+      reviewObject[`${key}`] = `${value}`
+    }
+    //console.log(reviewObject)
 
-    let newRecipe = document.createElement('recipe-card')
-    newRecipe.data = recipeObject
+    let newReview = document.createElement('review-card')
+    newReview.data = reviewObject
 
     let mainEl = document.querySelector('main')
-    mainEl.append(newRecipe)
+    mainEl.append(newReview)
 
-    let aList = getRecipesFromStorage()
-    //console.log(typeof(aList))
-    //console.log(aList)
-    aList.push(recipeObject)
-    saveRecipesToStorage(aList)
+    let aList = getReviewsFromStorage()
+    aList.push(reviewObject)
+    saveReviewsToStorage(aList)
+    document.getElementById("new-food-entry").reset();
   });
 
   let clearButt = document.querySelector('.danger')
   clearButt.addEventListener('click', function() {
     localStorage.clear();
     let mainEl = document.querySelector('main')
-     while (mainEl.firstChild) {
+    while (mainEl.firstChild) {
       mainEl.removeChild(mainEl.firstChild);
-     }
+    }
+    let deleteTags = document.querySelectorAll('.tag')
+    for(let i = 0; i < deleteTags.length; i ++) {
+      tagContainer.removeChild(deleteTags[i]);
+    }
+    
+    //clears reviews AS WELL as resets form
+    document.getElementById("new-food-entry").reset();
+     
+     
   });
 
-}
+  //allowing for tags selection/creation for user's review card
+  let tagAddButton = document.getElementById('tagAdd');
+  tagAddButton.addEventListener('click', ()=> {
+    let tagField = document.getElementById('tags');
+    if (tagField.value.length > 0) {
+      let p = document.createElement('p');
+      p.innerHTML = tagField.value;
+      p.setAttribute('class','tag')
+      
+      tagContainer.append(p);
+      tagField.value = '';
+
+      //adding deletion feature to each individual tag
+      let deleteTags = document.querySelectorAll('.tag')
+
+      for(let i = 0; i < deleteTags.length; i ++) {
+        deleteTags[i].addEventListener('click',()=> {
+          tagContainer.removeChild(deleteTags[i]);
+        })
+      }
+    }
+  });
+
+}
\ No newline at end of file
diff --git a/source/assets/styles/main.css b/source/assets/styles/main.css
index d8ba748..aac2f21 100644
--- a/source/assets/styles/main.css
+++ b/source/assets/styles/main.css
@@ -48,6 +48,33 @@ main {
   width: 100%;
 }
 
+#tag-container {
+  display: flex;
+  flex-flow: row wrap;
+}
+
+.tag {
+  background-color: grey;
+  border-radius: 7px;
+  color: white;
+  padding-right: 7px;
+  padding-left: 7px;
+  margin: 3px;
+}
+
+.tag::before {
+  display: inline-block;
+  content: 'x';
+  height: 15px;
+  width: 15px;
+  margin-right: 4px;
+  text-align: center;
+  color: white;
+  cursor: pointer;
+}
+.tag:hover::before{
+  color: red;
+}
 .danger {
   background-color: rgb(254, 171, 171);
   border-color: red;
@@ -55,4 +82,4 @@ main {
 
 .hidden {
   display: none;
-}
\ No newline at end of file
+}
diff --git a/source/reviews.json b/source/reviews.json
index 33ef6fc..a0a12ee 100644
--- a/source/reviews.json
+++ b/source/reviews.json
@@ -5,5 +5,12 @@
       "mealName": "Birria Tacos",
       "restaurant": "Mike's Red Tacos",
       "rating": 5
+   },
+   {
+      "imgSrc": "https://www.redwormcomposting.com/images/worm-burrito.JPG",
+      "imgAlt": "wolftown pic",
+      "mealName": "Carnitas Burrito",
+      "restaurant": "Wolftown UCSD",
+      "rating": 0
    }
 ]
\ No newline at end of file
