tag functionality

index.html

@@ -73,10 +73,10 @@
         Restaurant:
         <input type="text" id="restaurant" name="restaurant" required>
       </label>
-      <label for="tags">
+      <label for="tag-form">
         Tags:
-        <input type="text" id="tags" name="tags" required>
-        <div id="tag-container">
+        <input type="text" id="tag-form" name="tag-form" required>
+        <div class='tag-container' id="tag-container-form">
 
         </div>
         <button type="button" id="tagAdd">Add Tag</button>

source/assets/scripts/ReviewCard.js

@@ -102,6 +102,7 @@ class ReviewCard extends HTMLElement {
    *                          "mealName": "string",
    *                          "restaurant": "string",
    *                          "rating": number
+   *                          "tags": string array
    *                        }
    */
   set data(data) {
@@ -138,10 +139,21 @@ class ReviewCard extends HTMLElement {
     div.append(span1);
     div.append(img2);
 
+    //added tags
+    let tagContainer = document.createElement('div')
+    tagContainer.setAttribute('class', 'tag-container');
+    for (let i = 0; i < data['tags'].length; i++) {
+      let newTag = document.createElement('p');
+      newTag.setAttribute('class','tag');
+      newTag.innerHTML = data['tags'][i]
+      tagContainer.append(newTag)
+    }
+
     articleEl.append(img1)
     articleEl.append(pMeal)
     articleEl.append(pRestaurant)
     articleEl.append(div)
+    articleEl.append(tagContainer)
 
 
   }

source/assets/scripts/localStorage.js

@@ -1,9 +1,10 @@
-module.exports = {getReviewsFromStorage, saveReviewsToStorage};
+//
+//module.exports = {getReviewsFromStorage, saveReviewsToStorage};
 
 /**
  * @returns {Array<Object>} An array of reviews found in localStorage
  */
-function getReviewsFromStorage() {
+export function getReviewsFromStorage() {
 	let result = JSON.parse(localStorage.getItem('reviews'))
 	if (result) {
 		return result;
@@ -16,6 +17,6 @@ function getReviewsFromStorage() {
  * saves that string to 'reviews' in localStorage
  * @param {Array<Object>} reviews An array of reviews
  */
-function saveReviewsToStorage(reviews) {
+export function saveReviewsToStorage(reviews) {
 	localStorage.setItem('reviews', JSON.stringify(reviews));
 }

source/assets/scripts/main.js

@@ -1,5 +1,5 @@
 // main.js
-const {getReviewsFromStorage, saveReviewsToStorage} = require('./localStorage');
+import {getReviewsFromStorage, saveReviewsToStorage} from './localStorage.js';
 
 // Run the init() function when the page has loaded
 window.addEventListener('DOMContentLoaded', init);
@@ -31,14 +31,16 @@ function addReviewsToDocument(reviews) {
  * <button>.
  */
 function initFormHandler() {
-  let tagContainer = document.getElementById('tag-container');
+  //accessing form components
+  let tagContainer = document.getElementById('tag-container-form');
   let theForm = document.querySelector('form')
   let submitButt = document.querySelector('button[type="submit"]')
+  
   submitButt.addEventListener('click', function(){
-    let deleteTags = document.querySelectorAll('.tag')
-    for(let i = 0; i < deleteTags.length; i ++) {
-      tagContainer.removeChild(deleteTags[i]);
-    }
+    /*
+    *  User submits the form for their review.
+    *  We create reviewCard and put in storage
+    */
     let formData = new FormData(theForm);
     let reviewObject = {}
     for (let [key, value] of formData) {
@@ -46,7 +48,14 @@ function initFormHandler() {
       console.log(`${value}`)
       reviewObject[`${key}`] = `${value}`
     }
-    //console.log(reviewObject)
+    reviewObject['tags'] = []
+
+    let deleteTags = document.querySelectorAll('.tag')
+    for(let i = 0; i < deleteTags.length; i ++) {
+      reviewObject['tags'].push(deleteTags[i].innerHTML);
+      tagContainer.removeChild(deleteTags[i]);
+    }
+    
 
     let newReview = document.createElement('review-card')
     newReview.data = reviewObject
@@ -78,10 +87,9 @@ function initFormHandler() {
      
   });
 
-  //allowing for tags selection/creation for user's review card
   let tagAddButton = document.getElementById('tagAdd');
   tagAddButton.addEventListener('click', ()=> {
-    let tagField = document.getElementById('tags');
+    let tagField = document.getElementById('tag-form');
     if (tagField.value.length > 0) {
       let p = document.createElement('p');
       p.innerHTML = tagField.value;

source/reviews.json

@@ -4,13 +4,16 @@
       "imgAlt": "tacos pic",
       "mealName": "Birria Tacos",
       "restaurant": "Mike's Red Tacos",
-      "rating": 5
+      "rating": 5,
+      "tags": ["delicious", "#worthit","omg"]
    },
    {
       "imgSrc": "https://www.redwormcomposting.com/images/worm-burrito.JPG",
       "imgAlt": "wolftown pic",
       "mealName": "Carnitas Burrito",
       "restaurant": "Wolftown UCSD",
-      "rating": 0
+      "rating": 0,
+      "tags": ["gross", "why","no"]
+
    }
 ]

static/ReviewCard.css

@@ -47,6 +47,11 @@
     row-gap: 10px;
     width: 100%;
   }
+
+  .tag-container {
+    display: flex;
+    flex-flow: row wrap;
+  }
   .tag {
   background-color: grey;
   border-radius: 7px;
@@ -66,14 +71,14 @@
   color: white;
   cursor: pointer;
 }
-.tag:hover::before{
+.tag:hover::before {
   color: red;
 }
-  .danger {
-    background-color: rgb(254, 171, 171);
-    border-color: red;
-  }
-  
-  .hidden {
-    display: none;
-  }
+.danger {
+  background-color: rgb(254, 171, 171);
+  border-color: red;
+}
+
+.hidden {
+  display: none;
+}