From 8263aa608235fd9d925b2d7cddc5eb44f8a0d6bf Mon Sep 17 00:00:00 2001
From: Kara Hoagland <khoaglan@ucsd.edu>
Date: Fri, 11 Nov 2022 00:03:56 -0800
Subject: [PATCH] newWindow/cleaning/miniFixes

---
 index.html                          | 18 +++---
 source/assets/scripts/ReviewCard.js | 57 +++++++++---------
 source/assets/scripts/main.js       | 91 +++++++++++++++--------------
 static/reset.css                    | 12 ++--
 4 files changed, 89 insertions(+), 89 deletions(-)

diff --git a/index.html b/index.html
index 0f04301..32c5023 100644
--- a/index.html
+++ b/index.html
@@ -12,8 +12,9 @@
 
 
   <!-- Main Stylesheets & Scripts --> 
-  <link rel="stylesheet" href="/static/ReviewCard.css" />
-  <link rel="stylesheet" href="/static/reset.css" />
+  <!-- Temporarily commented out reset.css due to furthur discussion needed on the values of the default config-->
+  <!-- <link rel="stylesheet" href="/static/reset.css" /> -->
+  <link rel="stylesheet" href="./static/ReviewCard.css" />
   <script src="/source/assets/scripts/main.js" type="module"></script>
 
 </head>
@@ -23,15 +24,14 @@
   </main>
   <form id="new-food-entry">
     <fieldset>
-
       <legend>Photo:</legend>
       <label for="image-src">
         Source:
-        <input type="text" id="imgSrc" name="imgSrc" required>
+        <input type="text" id="imgSrc" name="imgSrc">
       </label>
       <label for="image-alt">
         Alt Text:
-        <input type="text" id="imgAlt" name="imgAlt" required>
+        <input type="text" id="imgAlt" name="imgAlt">
       </label>
     </fieldset>
     <fieldset>
@@ -40,15 +40,15 @@
       <label for="Meal: ">Meal:
         <input type="text" id="mealName" name="mealName" required>
       </label>
-      <label for="review">Description: 
+      <label for="comments">Description: 
         <br>
-        <textarea id="review"></textarea>
+        <textarea name="comments" id="comments"></textarea>
       </label>
     </fieldset>
     <fieldset>
       <legend>Rating</legend>
       <label for="rating-0">
-        0<input type="radio" id="rating-0" value="0" name="rating">
+        0<input type="radio" id="rating-0" value="0" name="rating" required>
       </label>
       <label for="rating-1">
         1<input type="radio" id="rating-1" value="1" name="rating">
@@ -75,7 +75,7 @@
       </label>
       <label for="tag-form">
         Tags:
-        <input type="text" id="tag-form" name="tag-form" required>
+        <input type="text" id="tag-form" name="tag-form">
         <div class='tag-container' id="tag-container-form">
 
         </div>
diff --git a/source/assets/scripts/ReviewCard.js b/source/assets/scripts/ReviewCard.js
index 7f5806f..39a08cd 100644
--- a/source/assets/scripts/ReviewCard.js
+++ b/source/assets/scripts/ReviewCard.js
@@ -61,11 +61,11 @@ class ReviewCard extends HTMLElement {
         width: calc(100% + 32px);
       }
     
-      p.restaurant-name {
+      label.restaurant-name {
         color: black !important;
       }
     
-      p.meal-name {
+      label.meal-name {
         display: -webkit-box;
         font-size: 16px;
         height: 36px;
@@ -75,7 +75,7 @@ class ReviewCard extends HTMLElement {
         -webkit-box-orient: vertical;
       }
     
-      p:not(.meal-name),
+      label:not(.meal-name),
       span,
       time {
         color: #70757A;
@@ -84,7 +84,7 @@ class ReviewCard extends HTMLElement {
     `;
     articleEl.append(styleEl);
     shadowEl.append(articleEl);
-    this.shadowEl = shadowEl
+    this.shadowEl = shadowEl;
   }
 
   /**
@@ -115,45 +115,42 @@ class ReviewCard extends HTMLElement {
     // 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']);
+    let mealImg = document.createElement('img');
+    mealImg.setAttribute('src',data['imgSrc']);
+    mealImg.setAttribute('alt',data['imgAlt']);
 
     //meal name setup
-    let pMeal = document.createElement('p');
-    pMeal.setAttribute('class','meal-name');
-    pMeal.innerHTML = data["mealName"];
+    let mealLabel = document.createElement('label');
+    mealLabel.setAttribute('class','meal-name');
+    mealLabel.innerHTML = data['mealName'];
 
-    let pRestaurant = document.createElement('p');
-    pRestaurant.setAttribute('class','restaurant-name');
-    pRestaurant.innerHTML = data["restaurant"];
+    let restaurantLabel = document.createElement('label');
+    restaurantLabel.setAttribute('class','restaurant-name');
+    restaurantLabel.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);
+    let ratingDiv = document.createElement('div');
+    ratingDiv.setAttribute('class', 'rating');
+    let starsImg = document.createElement('img');
+    starsImg.setAttribute('src', './source/assets/images/icons/'+data['rating']+'-star.svg');
+    starsImg.setAttribute('alt', data['rating'] +' stars');
+    ratingDiv.append(starsImg);
 
     //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');
+      let newTag = document.createElement('label');
       newTag.setAttribute('class','tag');
-      newTag.innerHTML = data['tags'][i]
-      tagContainer.append(newTag)
+      newTag.innerHTML = data['tags'][i] + " ";
+      tagContainer.append(newTag);
     }
 
-    articleEl.append(img1)
-    articleEl.append(pMeal)
-    articleEl.append(pRestaurant)
-    articleEl.append(div)
-    articleEl.append(tagContainer)
+    articleEl.append(mealImg);
+    articleEl.append(mealLabel);
+    articleEl.append(restaurantLabel);
+    articleEl.append(ratingDiv);
+    articleEl.append(tagContainer);
 
 
   }
diff --git a/source/assets/scripts/main.js b/source/assets/scripts/main.js
index 28f9d83..6451347 100644
--- a/source/assets/scripts/main.js
+++ b/source/assets/scripts/main.js
@@ -7,7 +7,7 @@ window.addEventListener('DOMContentLoaded', init);
 function init() {
   // Get the reviews from localStorage
   let reviews = getReviewsFromStorage();
-  // Add each recipe to the <main> element
+  // Add each reviews to the <main> element
   addReviewsToDocument(reviews);
   // Add the event listeners to the form elements
   initFormHandler();
@@ -17,66 +17,74 @@ function init() {
  * @param {Array<Object>} reviews An array of reviews
  */
 function addReviewsToDocument(reviews) {
-  let mainEl = document.querySelector('main')
+  let mainEl = document.querySelector('main');
   reviews.forEach(review=> {
-    let newReview = document.createElement('review-card')
-    newReview.data = review
+    let newReview = document.createElement('review-card');
+    newReview.data = review;
+    newReview.addEventListener('click', function(){
+      //TODO: create a separate file for specs - frontend
+      var newWin = window.open('about:blank','_self');
+    });
+    //TODO: want to append it to whatever the box is in layout 
     mainEl.append(newReview);
-  })
+  });
 
 }
 
 /**
- * Adds the necesarry event handlers to <form> and the clear storage
+ * Adds the necessary event handlers to <form> and the clear storage
  * <button>.
  */
 function initFormHandler() {
   //accessing form components
   let tagContainer = document.getElementById('tag-container-form');
-  let theForm = document.querySelector('form')
-  let submitButt = document.querySelector('button[type="submit"]')
+  let form = document.querySelector('form');
   
-  submitButt.addEventListener('click', function(){
+  form.addEventListener('submit', function(){
     /*
     *  User submits the form for their review.
     *  We create reviewCard and put in storage
     */
-    let formData = new FormData(theForm);
-    let reviewObject = {}
+    let formData = new FormData(form);
+    let reviewObject = {};
     for (let [key, value] of formData) {
-      console.log(`${key}`)
-      console.log(`${value}`)
-      reviewObject[`${key}`] = `${value}`
+      console.log(`${key}`);
+      console.log(`${value}`);
+      if (`${key}` !== "tag-form") {
+        reviewObject[`${key}`] = `${value}`;
+      }
     }
-    reviewObject['tags'] = []
+    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 tags = document.querySelectorAll('.tag');
+    for(let i = 0; i < tags.length; i ++) {
+      reviewObject['tags'].push(tags[i].innerHTML);
+      tagContainer.removeChild(tags[i]);
     }
     
 
-    let newReview = document.createElement('review-card')
-    newReview.data = reviewObject
+    let newReview = document.createElement('review-card');
+    newReview.data = reviewObject;
 
-    let mainEl = document.querySelector('main')
-    mainEl.append(newReview)
+    //TODO: want to append it to whatever the box is in layout 
+    let mainEl = document.querySelector('main');
+    mainEl.append(newReview);
 
-    let aList = getReviewsFromStorage()
-    aList.push(reviewObject)
-    saveReviewsToStorage(aList)
+    let storedReviews = getReviewsFromStorage();
+    storedReviews.push(reviewObject);
+    saveReviewsToStorage(storedReviews);
     document.getElementById("new-food-entry").reset();
   });
 
-  let clearButt = document.querySelector('.danger')
-  clearButt.addEventListener('click', function() {
+  // DEV-MODE: for testing purposes 
+  let clearBtn = document.querySelector('.danger');
+  clearBtn.addEventListener('click', function() {
     localStorage.clear();
-    let mainEl = document.querySelector('main')
+    let mainEl = document.querySelector('main');
     while (mainEl.firstChild) {
       mainEl.removeChild(mainEl.firstChild);
     }
-    let deleteTags = document.querySelectorAll('.tag')
+    let deleteTags = document.querySelectorAll('.tag');
     for(let i = 0; i < deleteTags.length; i ++) {
       tagContainer.removeChild(deleteTags[i]);
     }
@@ -87,25 +95,20 @@ function initFormHandler() {
      
   });
 
-  let tagAddButton = document.getElementById('tagAdd');
-  tagAddButton.addEventListener('click', ()=> {
+  let tagAddBtn = document.getElementById('tagAdd');
+  tagAddBtn.addEventListener('click', ()=> {
     let tagField = document.getElementById('tag-form');
     if (tagField.value.length > 0) {
-      let p = document.createElement('p');
-      p.innerHTML = tagField.value;
-      p.setAttribute('class','tag')
+      let tagLabel = document.createElement('label');
+      tagLabel.innerHTML = tagField.value;
+      tagLabel.setAttribute('class','tag');
+      tagLabel.addEventListener('click',()=> {
+        tagContainer.removeChild(tagLabel);
+      });
       
-      tagContainer.append(p);
+      tagContainer.append(tagLabel);
       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]);
-        })
-      }
     }
   });
 
diff --git a/static/reset.css b/static/reset.css
index 92a7b68..a34cda6 100644
--- a/static/reset.css
+++ b/static/reset.css
@@ -58,25 +58,25 @@ table {
 }
 
 input, select {
-  vertical-align :middle;
+  vertical-align: middle;
 }
 
 img, fieldset, object {
-  border:none;
+  border: none;
 }
 
 *, *:after, *:before {
-  box-sizing:border-box;
+  box-sizing: border-box;
 }
 
 button, label {
-  cursor:pointer;
+  cursor: pointer;
 }
 
 html, body {
-  height:100%;
+  height: 100%;
 }
 
 form {
-  border
+  border: solid;
 }
\ No newline at end of file