tag functionality

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;