-Req Star Message

-Load More Position
-Cancel Update Form

source/ReviewDetails.html

@@ -13,8 +13,6 @@
 		<script src="assets/scripts/ReviewCard.js" type="module"></script>
 
 		<!-- Main Stylesheets & Scripts -->
-		<!-- 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/ReviewDetails.css" />
 		<link rel="stylesheet" href="./static/Form.css" />
 		<script src="assets/scripts/ReviewDetails.js" type="module"></script>
@@ -139,7 +137,7 @@
 				</fieldset>
 
 				<button type="submit" id="save-btn" value="Submit">Save</button>
-				<input type="button" value="Cancel" id="home-btn" onclick="window.location.assign('./index.html')" />
+				<input type="button" value="Cancel" id="cancel-btn"/>
 			</form>
 		</div>
 	</body>

source/assets/scripts/CreatePage.js

@@ -110,8 +110,6 @@ function initFormHandler() {
 
 		// Adds data to the reviewObject from form data
 		for (let [key, value] of formData) {
-			console.log(`${key}`);
-			console.log(`${value}`);
 			if (`${key}` !== "tag-form") {
 				reviewObject[`${key}`] = `${value}`;
 			}
@@ -141,7 +139,7 @@ function initFormHandler() {
 		}
 		// Does not let user proceed if rating is not complete
 		else {
-			window.alert("NO! FILL IN STARS");
+			window.alert("Please fill in rating by selecting the stars :)");
 		}
 	});
 

source/assets/scripts/ReviewCard.js

@@ -109,8 +109,6 @@ class ReviewCard extends HTMLElement {
 
 		// Attach event listener to each review-card
 		this.addEventListener("click", (event) => {
-			console.log(event.target);
-			console.log(event.target.reviewId);
 			// 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
@@ -251,7 +249,6 @@ class ReviewCard extends HTMLElement {
 
 		// Get comment section
 		let comments = this.shadowEl.getElementById("a-comments");
-		console.log(comments);
 		dataContainer["comments"] = comments.innerText;
 
 		// Get rating

source/assets/scripts/ReviewDetails.js

@@ -161,7 +161,6 @@ function setupUpdate() {
 		let select = document.getElementById("select");
 		const input = document.getElementById("mealImg");
 		select.addEventListener("change", function () {
-			console.log("1");
 			// Select a photo with HTML file selector
 			if (select.value == "file") {
 				// enabling file upload components and hiding photo taking components
@@ -192,7 +191,6 @@ function setupUpdate() {
 
 		//addressing sourcing image from local file
 		document.getElementById("mealImg").addEventListener("change", function () {
-			console.log("reading used");
 			const reader = new FileReader();
 
 			//store image data URL after successful image load
@@ -208,6 +206,12 @@ function setupUpdate() {
 			reader.readAsDataURL(document.getElementById("mealImg").files[0]);
 		});
 
+		//cancel button on update form hids form not making any changes
+		let cancelBtn = document.getElementById("cancel-btn");
+		cancelBtn.addEventListener("click", function(){
+			updateDiv.classList.add("hidden");
+		})
+
 		//Take formdata values as newData when submit
 		form.addEventListener("submit", function () {
 			/*
@@ -218,8 +222,6 @@ function setupUpdate() {
 			let newData = {};
 			//iterate through formData and add to newData
 			for (let [key, value] of formData) {
-				console.log(`${key}`);
-				console.log(`${value}`);
 				if (`${key}` !== "tag-form") {
 					newData[`${key}`] = `${value}`;
 				}

source/assets/scripts/homepage.js

@@ -1,4 +1,4 @@
-// main.js
+// homepage.js
 import { getIDsByTag, getIDsFromStorage, getReviewFromStorage, getTopIDsFromStorage } from "./localStorage.js";
 
 // Run the init() function when the page has loaded
@@ -101,6 +101,7 @@ function sortAndFilter(searchTag) {
  */
 function loadReviews(index, reviewIDs) {
 	let reviewBox = document.getElementById("review-container");
+	let footer = document.querySelector("footer");
 	// label if there are no reviews to display
 	if (reviewIDs.length == 0) {
 		let emptyLabel = document.createElement("label");
@@ -116,7 +117,7 @@ function loadReviews(index, reviewIDs) {
 	let moreBtn = document.getElementById("more-btn");
 	//delete load more button if exists
 	if (moreBtn) {
-		reviewBox.removeChild(moreBtn);
+		footer.removeChild(moreBtn);
 	}
 	let reviewArr = [];
 	//check if there are more than 9 reviews left
@@ -140,7 +141,7 @@ function loadReviews(index, reviewIDs) {
 		moreBtn.addEventListener("click", function () {
 			loadReviews(index + 9, reviewIDs);
 		});
-		reviewBox.append(moreBtn);
+		footer.append(moreBtn);
 	}
 }
 

source/index.html

@@ -13,10 +13,8 @@
 		<script src="assets/scripts/ReviewCard.js" type="module"></script>
 
 		<!-- Main Stylesheets & Scripts -->
-		<!-- 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/homepage.css" />
-		<script src="assets/scripts/main.js" type="module"></script>
+		<script src="assets/scripts/homepage.js" type="module"></script>
 	</head>
 
 	<body>
@@ -61,5 +59,6 @@
 				<div style="width: 20%"></div>
 			</div>
 		</main>
+		<footer></footer>
 	</body>
 </html>

source/static/homepage.css

@@ -118,3 +118,8 @@ img#create-btn-invis {
 	background-color: #f1f1f1;
 	text-align: center;
 }
+
+footer {
+	display: flex;
+	justify-content: center;
+}

source/sw.js

@@ -24,7 +24,7 @@ const ASSETS = [
 	"assets/images/search_button.png",
 	"assets/scripts/CreatePage.js",
 	"assets/scripts/localStorage.js",
-	"assets/scripts/main.js",
+	"assets/scripts/homepage.js",
 	"assets/scripts/ReviewCard.js",
 	"assets/scripts/ReviewDetails.js",
 ];