tag functionality in form, review card changes

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);

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]);
+        })
+      }
+    }
+  });
+
+}

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;
-}
+}