diff --git a/source/assets/scripts/CreatePage.js b/source/assets/scripts/CreatePage.js index 1717104..5141e87 100644 --- a/source/assets/scripts/CreatePage.js +++ b/source/assets/scripts/CreatePage.js @@ -117,7 +117,7 @@ function initFormHandler() { tagLabel.addEventListener("click",()=> { tagContainer.removeChild(tagLabel); }); - + // Adds the tag tagContainer.append(tagLabel); tagField.value = ""; diff --git a/source/assets/scripts/ReviewCard.js b/source/assets/scripts/ReviewCard.js index cb60ccf..53924c7 100644 --- a/source/assets/scripts/ReviewCard.js +++ b/source/assets/scripts/ReviewCard.js @@ -102,45 +102,37 @@ class ReviewCard extends HTMLElement { articleEl.append(styleEl); shadowEl.append(articleEl); this.shadowEl = shadowEl; - //attach event listener to each recipe-card + + // Attach event listener to each review-card this.addEventListener("click", (event) => { console.log(event.target); console.log(event.target.reviewId); - //Option 1: sending current data to second html page using localStorage (could also just store index) + // Saves the ID for corresponding review on new page (for data retrieval) sessionStorage.setItem("currID", JSON.stringify(event.target.data.reviewID)); + // Goes to the new page for the review window.location.assign("./ReviewDetails.html"); - /* - //Option 2: sending current data to second html page using string query w/ url (currently not storing value) - let reviewFields = window.location.search.slice(1).split("&"); - for(let i = 0; i < reviewFields.length; i++) { - let kv = reviewFields[i].split("="); - let key = kv[0]; - let value = kv[1]; - console.log(key); - console.log(value); - // What you want to do with name and value... - }*/ }); } /** - * Called when the .data property is set on this element. - * - * For Example: - * let reviewCard = document.createElement('review-card'); - * reviewCard.data = { foo: 'bar' } - * - * @param {Object} data - The data to pass into the , must be of the - * following format: - * { - * "mealImg": "string", - * "mealName": "string", - * "comments": "string", - * "rating": number, - * "restaurant": "string", - * "tags": string array - * } - */ + * Called when the .data property is set on this element. + * + * For Example: + * let reviewCard = document.createElement('review-card'); + * reviewCard.data = { foo: 'bar' } + * + * @param {Object} data - The data to pass into the , must be of the + * following format: + * { + * "mealImg": string, + * "mealName": string, + * "comments": string, + * "rating": number, + * "restaurant": string, + * "reviewID": number, + * "tags": string array + * } + */ set data(data) { // If nothing was passed in, return if (!data) return; @@ -148,10 +140,10 @@ class ReviewCard extends HTMLElement { // Select the
we added to the Shadow DOM in the constructor let articleEl = this.shadowEl.querySelector("article"); - // setting the article elements for the review card + // Setting the article elements for the review card this.reviewID = data["reviewID"]; - //image setup + // Image setup let mealImg = document.createElement("img"); mealImg.setAttribute("id", "a-mealImg"); mealImg.setAttribute("alt","Meal Photo Corrupted"); @@ -161,25 +153,25 @@ class ReviewCard extends HTMLElement { e.onerror = null; }); - //meal name setup + // Meal name setup let mealLabel = document.createElement("label"); mealLabel.setAttribute("id", "a-mealName"); mealLabel.setAttribute("class","meal-name"); mealLabel.innerHTML = data["mealName"]; - //restaurant name setup + // Restaurant name setup let restaurantLabel = document.createElement("label"); restaurantLabel.setAttribute("id", "a-restaurant"); restaurantLabel.setAttribute("class","restaurant-name"); restaurantLabel.innerHTML = data["restaurant"]; - //comment section setup (display set to none) + // Comment section setup (display set to none) let comments = document.createElement("p"); comments.setAttribute("id", "a-comments"); comments.style.display = "none"; comments.innerText = data["comments"]; - //other info: rating + // Rating setup let ratingDiv = document.createElement("div"); ratingDiv.setAttribute("class", "rating"); let starsImg = document.createElement("img"); @@ -189,11 +181,13 @@ class ReviewCard extends HTMLElement { starsImg.setAttribute("num", data["rating"]); ratingDiv.append(starsImg); - //added tags + // Tags setup let tagContainer = document.createElement("div"); tagContainer.setAttribute("class", "tag-container"); tagContainer.setAttribute("id", "a-tags"); tagContainer.setAttribute("list", data["tags"]); + + // Checks if user gave tags, if so added to review card if(data["tags"]){ for (let i = 0; i < data["tags"].length; i++) { let newTag = document.createElement("label"); @@ -203,8 +197,7 @@ class ReviewCard extends HTMLElement { } } - //adding final ID to data! - + // Setting all the data to the review card articleEl.append(mealImg); articleEl.append(mealLabel); articleEl.append(restaurantLabel); @@ -216,52 +209,53 @@ class ReviewCard extends HTMLElement { } /** - * Called when getting the .data property of this element. - * - * For Example: - * let reviewCard = document.createElement('review-card'); - * reviewCard.data = { foo: 'bar' } - * - * @return {Object} data - The data from the , of the - * following format: - * { - * "mealImg": "string", - * "mealName": "string", - * "comments": "string", - * "rating": number, - * "restaurant": "string", - * "tags": string array - * } - */ + * Called when getting the .data property of this element. + * + * For Example: + * let reviewCard = document.createElement('review-card'); + * reviewCard.data = { foo: 'bar' } + * + * @return {Object} data - The data from the , of the + * following format: + * { + * "mealImg": string, + * "mealName": string, + * "comments": string, + * "rating": number, + * "restaurant": string, + * "reviewID": number, + * "tags": string array + * } + */ get data() { let dataContainer = {}; - // getting the article elements for the review card + // Getting the article elements for the review card dataContainer["reviewID"] = this.reviewID; - //get image + // Get image let mealImg = this.shadowEl.getElementById("a-mealImg"); dataContainer["mealImg"] = mealImg.getAttribute("src"); - //get meal name + // Get meal name let mealLabel = this.shadowEl.getElementById("a-mealName"); dataContainer["mealName"] = mealLabel.innerHTML; - //get comment section + // Get comment section let comments = this.shadowEl.getElementById("a-comments"); console.log(comments); dataContainer["comments"] = comments.innerText; - //get other info: rating + // Get rating let starsImg = this.shadowEl.getElementById("a-rating"); dataContainer["rating"] = starsImg.getAttribute("num"); - //get restaurant name + //Get restaurant name let restaurantLabel = this.shadowEl.getElementById("a-restaurant"); dataContainer["restaurant"] = restaurantLabel.innerHTML; - //get tags + // Get tags let tagContainer = this.shadowEl.getElementById("a-tags"); dataContainer["tags"] = tagContainer.getAttribute("list").split(",");