Merge branch 'main' into sprint-3

.github/workflows/deploy-githubpages.yml

@@ -29,8 +29,18 @@ jobs:
       url: ${{ steps.deployment.outputs.page_url }}
     runs-on: ubuntu-latest
     steps:
+      - name: Install apt updates
+        run: sudo apt -y update; sudo apt -y upgrade;
+      - name: Install prerequisites
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
       - name: Checkout
         uses: actions/checkout@v3
+      - name: Install dependencies
+        run: sudo npm install
+      - name: Run tests
+        run: sudo npm run js-doc
       - name: Setup Pages
         uses: actions/configure-pages@v2
       - name: Upload artifact

.github/workflows/prettier.yml

@@ -0,0 +1,29 @@
+name: Prettier
+
+on:
+  pull_request:
+    branches:
+    - main
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+jobs:
+  # Single deploy job since we're just deploying
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Install apt updates
+        run: sudo apt -y update; sudo apt -y upgrade;
+      - name: Install prerequisites
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Install dependencies
+        run: sudo npm install
+      - name: Start local http server
+        run: sudo npm run http-server & 
+      - name: Run tests
+        run: sudo npm lint-prettier

.gitignore

@@ -1,3 +1,4 @@
 **/.devcontainer/*
 **/node_modules/*
-**/package-lock.json
+**/package-lock.json
+**/*.vscode/*

.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-    "liveServer.settings.port": 5501
-}

110722-sprint1.md

@@ -1,41 +1,41 @@
-# Meeting Minutes (11/07/2022)
-## Team 29: Hackers1995
-## Meeting Topic: First Sprint
-Meeting notes for the first sprint
-
-## Attendance
-1. Rhea Bhutada
-2. George Dubinin
-3. Gavyn Ezell
-4. Henry Feng
-5. Kara Hoagland
-6. Marc Reta
-7. Sanjit Joseph
-8. Daniel Hernandez
-9. Arthur Lu
-
-## Absentees
-1. Isaac Otero
-
-## Meeting Details
-- When: 11/07/2022 at 6:00PM
-- Where: CSE Building Second Floor
-
-## Agenda:
-- ### Old/Unresolved Business
-  - N/A
-- ### New Business
-  - The first sprint:
-    - Create more Gitflows and automation. Verify current workflows and actions
-    - Determine interface details for the app (user experience)
-    - Start on the backend
-- ### Next Meeting's Business
-
-## Decisions Made
-- Linting details decided (TABS NOT SPACES)
-
-## End Time
-- 11/07/2022 at 8:00PM
-
-
-
+# Meeting Minutes (11/07/2022)
+## Team 29: Hackers1995
+## Meeting Topic: First Sprint
+Meeting notes for the first sprint
+
+## Attendance
+1. Rhea Bhutada
+2. George Dubinin
+3. Gavyn Ezell
+4. Henry Feng
+5. Kara Hoagland
+6. Marc Reta
+7. Sanjit Joseph
+8. Daniel Hernandez
+9. Arthur Lu
+
+## Absentees
+1. Isaac Otero
+
+## Meeting Details
+- When: 11/07/2022 at 6:00PM
+- Where: CSE Building Second Floor
+
+## Agenda:
+- ### Old/Unresolved Business
+  - N/A
+- ### New Business
+  - The first sprint:
+    - Create more Gitflows and automation. Verify current workflows and actions
+    - Determine interface details for the app (user experience)
+    - Start on the backend
+- ### Next Meeting's Business
+
+## Decisions Made
+- Linting details decided (TABS NOT SPACES)
+
+## End Time
+- 11/07/2022 at 8:00PM
+
+
+

admin/cipipeline/phase2.md

@@ -0,0 +1,47 @@
+# CI/CD Phase 2
+
+## Overall Pipeline Architecture
+
+Rather than create one large pipeline with many steps which increases complexity, we decided to create many small independent pipelines which work in parallel to conduct code quality checking. Using this strategy, if any one pipeline has issues, we can still continue development without delay, and the quality of code is likely to remain high. 
+
+## Overview of Pipeline Features
+
+We've identified 5 major features which we definitely want to implement in the CI/CD pipeline. 
+
+- Deployment
+- Unit Testing 
+- Linting
+- End To End Validation
+- Manual Validation
+
+We also identified some features which are nice to have:
+- Automatic documentation publishing
+- Minification
+- HTML Validation and accessibility scoring
+
+We created this diagram to demonstrate our strategy of multiple simple pipelines.
+
+![Pipeline Diagram](phase2.drawio.png)
+
+## Finished Features and Implementation
+
+So far the features listed below have been completed to some degree:
+
+- Deployment
+	- Implemented: action triggered on any push to main, uses the github pages action to publish the app
+	- Implemented: uses JSDoc to generate documentation on the same site at [docs](https://cse110-fa22-group29.github.io/cse110-fa22-group29/docs/)
+	- ToDo: Add minification step between trigger and github pages action
+- Unit Testing
+	- Implemented: action triggers on PR to main, uses mocha to perform unit testing on core components
+- End to end testing
+	- Implemented: action triggers on PR to main, uses mocha and puppeteer to perform end to end testing
+- Linting (JS)
+	- Implemented: action triggers on PR to main, uses eslint to perform style enforcement on all JS components
+- Linting (HTML)
+	- Implemented: action triggers on PR to main, uses HTMLhint to perform style enforcement on all HTML components
+- Linting (CSS)
+	- Implemented: action triggers on PR to main, uses Stylelint to perform style enforcement on all CSS components
+- Linting (general)
+	- Implemented: action triggers on PR to main, uses Prettier to perform style checking on all file types
+
+## Planned Features and Timeline

admin/meetings/112722-sprint-2-review.md

@@ -0,0 +1,63 @@
+# Sprint 2 Review Meeting Minutes (11/27/2022)
+## Team 29: Hackers1995
+## Meeting Topic: Sprint 2 Review
+We are reviewing the second sprint 2 progress made and highlights 
+
+## Attendance
+1. Rhea Bhutada
+2. George Dubinin
+3. Sanjit Joseph
+4. Kara Hoagland
+5. Arthur Lu
+6. Mark Rheta
+7. Henry Feng
+8. Gavyn Etzel
+9. Sanjit Joseph
+10. Isaac Otero
+
+## Meeting Details
+- When: 11/27/2022 at 4:30PM
+- Where: Zoom
+
+## Agenda:
+Review the second sprint and discuss assiget the writeup for the Agile review assignemnt
+
+## Sprint 2 REVIEW
+In collecting feedback for the sprint the leads decided to ask members individually about their experience during sprint 2 to then summarize these responses. Each member was asked 4 questions with their summarized responses below:
+
+### ➼ What do you think worked well in the first sprint?
+Communication within the group was improved and our joint study sessions where more productive. The design team got the support they needed to accomplish the majority of their work on the project. The push to emphasize the sub-teams responsible for different tasks turned out to be a great idea and everyone put in a good effort. 
+
+### ➼ What can we improve on for the next sprint?
+With the vast majority of feature implementation underway the rapid progress created a lot of bugs which otherwise could have been avoid with more careful planning. Some members felt that even though they made a great effort they weren't able to contribute as much as they wanted to. Some of the code documentation fell behind and some design discussions were circumvented because some members where busy. One consequence was that relatively few ADRs were created even though we made many important design decisions during sprint 2.
+
+### ➼ What was your contribution to the sprint?
+* Rhea Bhutada: I mainly helped implement the backend for the CRUD features of the app and documentation related to this. This mainly entailed changing the way that we were storing user data in local storage. Additionally, I helped design the form and homepage.
+* Gavyn Etzel: Helped with JavaScript functionality (CRUD Features), and also did a lot of the documentation for the script files
+Helped work through the storage revamp for our review cards
+Also helped integrate our first design/style setup with functionality
+* Henry Feng: Worked on implementing local image uploading and storing features for updating and creating profiles.
+* Sanjit: I reimplemented the star ratings since they had some issues and weren’t merged with sprint 1. I fixed a bunch of linting issues that popped up from that as well. I did a fair bit of color palette brainstorming with the team. I also went over our app design for the sprint video and edited that together. Most importantly I put a chef hat on the raccoon
+* Daniel: Helped in initial CreatePage and HomePage design which improved through feedback from the rest of the group. 
+Helped in styling suggestions.  
+* Arthur Lu: Worked on fixing some CI/CD pipeline issues
+Implemented e2e testing for basic update and delete functionality
+Helped with fixing the homepage and review page layout 
+Helped with fixing the article tag overflow issue
+* Marc Rheta: Implemented the e2e testing for reading and create
+Allowed tabs for CSS/HTML linters
+* Isaac Otero: I was able to help out with the sprint video for the last sprint and thought of how our page will look like, Started working on homepage.html
+* George Dubinin: Meeting notes, Repo organization, Front-end (a little), Project Status Review video.
+* Kara Hoagland: I helped set up the new local storage design, reimplemented the CRUD features using the new local storage design, contributed to the styling, added a default img, backend on the details page 
+
+### ➼ Was there anything blocking your progress in the sprint?
+A few members got sick over the break and with midterms picking up for other classes some members had trouble dedicting time for the project but everyone still put in a great effort overall.
+
+## Next Sprint Goals
+    - Resolve the 4 issues open on GitHub right now
+    - Make the project "local first" by creating a cache 
+    - Bug fixes and final product adjustments possibly pushed to sprint 4
+    - We aim to keep sprint 3 short (a few days max)
+    - JS docs (we can potentially leave this out with an explanation of where our documentation is)
+## End Time
+- 11/27/2022 at 5:00PM

admin/meetings/112822-retrospective.md

@@ -0,0 +1,71 @@
+# Sprint 1 Retrospective (11/28/2022)
+## Team 29: Hackers1995
+## Meeting Topic: Sprint 1 Retrospective
+
+## Attendance
+1. Rhea Bhutada
+2. George Dubinin
+3. Sanjit Joseph
+4. Kara Hoagland
+5. Arthur Lu
+6. Mark Rheta
+7. Henry Feng
+8. Gavyn Etzel
+9. Sanjit Joseph
+10. Isaac Otero
+
+## Meeting Details
+- When: 11/28/2022 at 4:00PM
+- Where: Zoom
+
+## Agenda:
+Discuss the review, share more detailed thoughts on sprint 2, and create some resolutions for sprint 3
+
+## Sprint 3 Review Below (for convenience)
+In collecting feedback for the sprint the leads decided to ask members individually about their experience during sprint 2 to then summarize these responses. Each member was asked 4 questions with their summarized responses below:
+
+### ➼ What do you think worked well in the first sprint?
+Communication within the group was improved and our joint study sessions where more productive. The design team got the support they needed to accomplish the majority of their work on the project. The push to emphasize the sub-teams responsible for different tasks turned out to be a great idea and everyone put in a good effort. 
+
+### ➼ What can we improve on for the next sprint?
+With the vast majority of feature implementation underway the rapid progress created a lot of bugs which otherwise could have been avoid with more careful planning. Some members felt that even though they made a great effort they weren't able to contribute as much as they wanted to. Some of the code documentation fell behind and some design discussions were circumvented because some members where busy. One consequence was that relatively few ADRs were created even though we made many important design decisions during sprint 2.
+
+### ➼ What was your contribution to the sprint?
+* Rhea Bhutada: I mainly helped implement the backend for the CRUD features of the app and documentation related to this. This mainly entailed changing the way that we were storing user data in local storage. Additionally, I helped design the form and homepage.
+* Gavyn Etzel: Helped with JavaScript functionality (CRUD Features), and also did a lot of the documentation for the script files
+Helped work through the storage revamp for our review cards
+Also helped integrate our first design/style setup with functionality
+* Henry Feng: Worked on implementing local image uploading and storing features for updating and creating profiles.
+* Sanjit: I reimplemented the star ratings since they had some issues and weren’t merged with sprint 1. I fixed a bunch of linting issues that popped up from that as well. I did a fair bit of color palette brainstorming with the team. I also went over our app design for the sprint video and edited that together. Most importantly I put a chef hat on the raccoon
+* Daniel: Helped in initial CreatePage and HomePage design which improved through feedback from the rest of the group. 
+Helped in styling suggestions.  
+* Arthur Lu: Worked on fixing some CI/CD pipeline issues
+Implemented e2e testing for basic update and delete functionality
+Helped with fixing the homepage and review page layout 
+Helped with fixing the article tag overflow issue
+* Marc Rheta: Implemented the e2e testing for reading and create
+Allowed tabs for CSS/HTML linters
+* Isaac Otero: I was able to help out with the sprint video for the last sprint and thought of how our page will look like, Started working on homepage.html
+* George Dubinin: Meeting notes, Repo organization, Front-end (a little), Project Status Review video.
+* Kara Hoagland: I helped set up the new local storage design, reimplemented the CRUD features using the new local storage design, contributed to the styling, added a default img, backend on the details page 
+
+### ➼ Was there anything blocking your progress in the sprint?
+A few members got sick over the break and with midterms picking up for other classes some members had trouble dedicting time for the project but everyone still put in a great effort overall.
+
+## Next Sprint Goals
+    - Resolve the 4 issues open on GitHub right now
+    - Make the project "local first" by creating a cache 
+    - Bug fixes and final product adjustments possibly pushed to sprint 4
+    - We aim to keep sprint 3 short (a few days max)
+    - JS docs (we can potentially leave this out with an explanation of where our documentation is)
+
+## Resolutions
+* Sprint 3 first meeting happening 11-29 at 5:00PM
+* Make sure that there's enough communication between front-end and back-end 
+* Focus on meeting with your subgroup and then touch base with the main group
+* Keep documentation up to date with the rest of the project
+* We need to finalize the home page design (this has been open for a while). 
+* Fix image sizing issues by focusing on supporting 300x300 pixel images with sizes of around 2-5 megabytes
+
+## End Time
+- 11/14/2022 at 5:00PM

admin/meetings/112922-Sprint3Opener.md

@@ -0,0 +1,35 @@
+# Meeting Minutes (11/29/2022)
+## Team 29: Hackers1995
+## Meeting Topic: Sprint 3 Debut Meeting
+
+## Attendance
+1. Rhea Bhutada
+2. George Dubinin
+3. Gavyn Ezell
+4. Henry Feng
+5. Kara Hoagland
+6. Marc Reta (remote)
+7. Sanjit Joseph
+8. Daniel Hernandez
+9. Arthur Lu (remote)
+
+## Meeting Details
+- When: 11/29/2022 at 5:00PM
+- Where: Design and Innovation Building 
+
+## Agenda:
+- ### Old/Unresolved Business
+  - Resolve pretty print linting PR
+  - Resolve documentation not being merged to main PR 
+- ### New Business
+    - Create ADR for image storage
+    - Review sorting defaults (recent or top rated)
+    - Adding lists of reviewIDs corresponding to reviews which share specific star ratings
+    - Create function for retrieving top 20 reviews organized by decreasing star ratings
+    - Implement search for for flitering tags
+    - Frontend checked out new branch for alternate home page designs
+- ### Next Meeting's Business
+  - Creation of team status video
+
+## End Time
+- 11/20/2022 at 3:00PM

admin/meetings/113022-Sprint3Cont.md

@@ -0,0 +1,30 @@
+# Meeting Minutes (11/30/2022)
+## Team 29: Hackers1995
+## Meeting Topic: Sprint 3 Continued
+
+## Attendance
+1. Rhea Bhutada
+2. George Dubinin
+4. Henry Feng
+5. Kara Hoagland
+7. Sanjit Joseph
+9. Arthur Lu 
+
+## Meeting Details
+- When: 11/30/2022 at 2:00PM
+- Where: Design and Innovation Building 
+
+## Agenda:
+- ### Old/Unresolved Business
+    - Fix empty page for no-tag search
+    - Catch testing up with what we implemented yesterday
+- ### New Business
+    - Cache the site for local first (high priority)
+    - Implement editing form "in place" (optional for this sprint)
+    - Change icon for "add review" entry
+    - Overcoming UI test challenges
+- ### Next Meeting's Business
+  - Creation of team status video
+
+## End Time
+- 11/30/2022 at 2:00PM

admin/meetings/1212022-check10.md

@@ -0,0 +1,22 @@
+# Meeting Minutes (12/1/2022)
+## Team 29: Hackers1995
+## Meeting Topic: Weekly TA Catchup with Gagan
+We are meeting with Gagan to discuss status video and general updates on project.
+
+## Attendance
+1. Rhea Bhutada
+2. George Dubinin
+3. Gagan Gopalaiah
+
+## Meeting Details
+- When: 12/1/2022 at 12:00PM
+- Where: Zoom
+
+## Discussion Points by Gagan
+- Don't code up anything after Sunday. Reserve the time for bug fixes
+- Final Interview is a 4-5 minute interview about general course specific topics
+- Live demo of the app for Gagan
+- Gagan asks us to evaluate instructional assistants
+
+## End Time
+- 12/1/2022 at 12:20PM

package.json

@@ -23,5 +23,4 @@
 		"puppeteer": "^18.2.1",
 		"stylelint": "14.14.1",
 		"stylelint-config-standard": "^29.0.0"
-	}
-}
+	}

source/CreatePage.html

@@ -10,19 +10,18 @@
 		<!--Add Favicon-->
 		<link rel="icon" type="image/x-icon" href="./assets/images/favicon.ico">
 
-		<!-- Recipe Card Custom Element -->
+		<!-- Review Card Custom Element -->
 		<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" /> -->
+		<!-- Create Page Stylesheets & Scripts -->
 		<link rel="stylesheet" href="./static/CreatePage.css" />
 		<link rel="stylesheet" href="./static/Form.css" />
 		<script src="./assets/scripts/CreatePage.js" type="module"></script>
 	</head>
 
 	<header>
+		<!-- Setting up logo and site name at the top of the website -->
 		<div class="top-bar">
 			<img src ="./assets/images/Logo.png" alt="logo" />
 			<h1> Food Journal </h1>
@@ -85,6 +84,8 @@
 				</fieldset>
 
 			<button type="submit" id="save-btn" value="Submit">Save</button>
+
+			<!-- Button that allows user to go back to the homepage -->
 			<input type="button" value="Cancel" id="home-btn" onclick="window.location.assign('./index.html')">
 			</form>
 		</div> 

source/ReviewDetails.html

@@ -9,7 +9,7 @@
 		<!--Add Favicon-->
 		<link rel="icon" type="image/x-icon" href="./assets/images/favicon.ico">
 
-		<!-- Recipe Card Custom Element -->
+		<!-- Review Card Custom Element -->
 		<script src="assets/scripts/ReviewCard.js" type="module"></script>
 
 		<!-- Main Stylesheets & Scripts --> 

source/assets/scripts/CreatePage.js

@@ -2,31 +2,36 @@ import { newReviewToStorage } from "./localStorage.js";
 
 window.addEventListener("DOMContentLoaded", init);
 
+/**
+ * Delegates the functionality for creating review cards.
+ */
 function init() {
 	initFormHandler();
 }
 
+/**
+ * Creates a form and associates a new ID with the new review card.
+ */
 function initFormHandler() {
 
-	//accessing form components
+	// Accesses form components
 	let tagContainer = document.getElementById("tag-container-form");
 	let form = document.querySelector("form");
 
-	/*
-	* change the input source of the image between local file and URL 
-	* depending on user's selection
-	*/
+	// Event listener for reading form data
 	let select = document.getElementById("select");
 	select.addEventListener("change", function() {
 		const input = document.getElementById("source");
 	
+		// Select a photo with HTML file selector
 		if (select.value == "file") {
 			input.innerHTML = `
 			Source:
 			<input type="file" accept="image/*" id="mealImg" name="mealImg">
 			`;
 		}
-		//TODO: change to photo taking for sprint 3
+
+		// Upload text URL input
 		else {
 			input.innerHTML = `
 			Source:
@@ -35,28 +40,28 @@ function initFormHandler() {
 		}
 	});
 
-	//addressing sourcing image from local file
+	// Addresses sourcing image from local file
 	let imgDataURL = "";
 	document.getElementById("mealImg").addEventListener("change", function() {
 		const reader = new FileReader();
 		
-		//store image data URL after successful image load
+		// Store image data URL after successful image load
 		reader.addEventListener("load", ()=>{
 			imgDataURL = reader.result;
 		}, false);
 		
-		//convert image file into data URL for local storage
+		// Convert image file into data URL for local storage
 		reader.readAsDataURL(document.getElementById("mealImg").files[0]);
 	});
 		
 	form.addEventListener("submit", function(e){
-	/*
-    *  User submits the form for their review.
-    *  We create reviewCard and put in storage
-    */
+
+		// Create reviewObject and put in storage
 		e.preventDefault();
 		let formData = new FormData(form);
 		let reviewObject = {};
+
+		// Adds data to the reviewObject from form data
 		for (let [key, value] of formData) {
 			console.log(`${key}`);
 			console.log(`${value}`);
@@ -67,30 +72,42 @@ function initFormHandler() {
 				reviewObject["mealImg"] = imgDataURL;
 			}
 		}
+
+		// Makes sure that ratings is filled
 		if(reviewObject["rating"] != null){
+
+			//Adds rags separately as an array
 			reviewObject["tags"] = [];
 
+			// Grabs tags
 			let tags = document.querySelectorAll(".tag");
 			for(let i = 0; i < tags.length; i ++) {
 				reviewObject["tags"].push(tags[i].innerHTML);
 				tagContainer.removeChild(tags[i]);
 			}
 
+			// Assigns the new review with a new ID
 			let nextReviewId = newReviewToStorage(reviewObject);
 			sessionStorage.setItem("currID", JSON.stringify(nextReviewId));
-
+			
+			// Redirects to a page that shows the newly created review
 			window.location.assign("./ReviewDetails.html");
-		} else{
+		} 
+		// Does not let user proceed if rating is not complete
+		else{
 			window.alert("NO! FILL IN STARS");
 		}
         
 	});
 
+	// Event listener for tag functionality
 	let tagAddBtn = document.getElementById("tag-add-btn");
 	//Set used to track tags and ensure no duplicates
 	let tagSet = new Set();
 	tagAddBtn.addEventListener("click", ()=> {
 		let tagField = document.getElementById("tag-form");
+
+		// If there is a tag, it'll display the tag
 		if (tagField.value.length > 0) {
 			let tagSetVal = tagField.value.toLowerCase();
 			if (!tagSet.has(tagSetVal)){

source/assets/scripts/ReviewCard.js

@@ -107,45 +107,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 <review-card>, 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 <review-card>, 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;
@@ -153,10 +145,10 @@ class ReviewCard extends HTMLElement {
 		// Select the <article> 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-meal-img");
 		mealImg.setAttribute("alt","Meal Photo Corrupted");
@@ -166,7 +158,7 @@ class ReviewCard extends HTMLElement {
 			e.onerror = null;
 		});
 
-		//meal name setup
+		// Meal name setup
 		let meallabelDiv = document.createElement("div");
 		meallabelDiv.setAttribute("class", "meal-name-div");
 		let mealLabel = document.createElement("label");
@@ -175,19 +167,19 @@ class ReviewCard extends HTMLElement {
 		mealLabel.innerHTML = data["mealName"];
 		meallabelDiv.append(mealLabel);
 
-		//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");
@@ -197,13 +189,15 @@ class ReviewCard extends HTMLElement {
 		starsImg.setAttribute("num", data["rating"]);
 		ratingDiv.append(starsImg);
 
-		//added tags
+		// Tags setup
 		let tagContainerDiv = document.createElement("div"); 
 		tagContainerDiv.setAttribute("class", "tag-container-div");
 		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");
@@ -214,8 +208,7 @@ class ReviewCard extends HTMLElement {
 		}
 		tagContainerDiv.append(tagContainer);
 
-		//adding final ID to data!
-
+		// Setting all the data to the review card
 		articleEl.append(mealImg);
 		articleEl.append(meallabelDiv);
 		articleEl.append(restaurantLabel);
@@ -227,28 +220,29 @@ 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 <review-card>, 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 <review-card>, 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
@@ -259,20 +253,20 @@ class ReviewCard extends HTMLElement {
 		let mealLabel = this.shadowEl.getElementById("a-meal-name");
 		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(",");
 

source/assets/scripts/ReviewDetails.js

@@ -4,6 +4,9 @@ import {deleteReviewFromStorage, getReviewFromStorage, updateReviewToStorage} fr
 // Run the init() function when the page has loaded
 window.addEventListener("DOMContentLoaded", init);
 
+/**
+ * Populates the relevant data to the details from local storage review.
+ */
 function init(){
 	setupInfo();
 	setupDelete();
@@ -55,7 +58,7 @@ function setupInfo(){
 }
 
 /**
- * Sets up delete button to delete review from storage and switch to homepage
+ * Sets up delete button to delete reveiw from storage and switch to homepage.
  */
 function setupDelete(){
 	let deleteBtn = document.getElementById("delete-btn");
@@ -70,7 +73,7 @@ function setupDelete(){
 }
 
 /**
- * Sets up update button to reveal form and update info in storage and the current page 
+ * Sets up update button to reveal form and update info in storage and the current page.
  */
 function setupUpdate(){
 	let updateBtn = document.getElementById("update-btn");
@@ -169,7 +172,7 @@ function setupUpdate(){
 				if (`${key}` !== "tag-form") {
 					newData[`${key}`] = `${value}`;
 				}
-				//Account for the case where image is not updated
+				// Account for the case where image is not updated
 				if (`${key}` === "mealImg" && document.getElementById("mealImg").value === "") {
 					newData["mealImg"] = currReview["mealImg"];
 				}
@@ -193,7 +196,7 @@ function setupUpdate(){
 
 		});
 
-		//adding tag to form functionality
+		// Adding tag to form functionality
 		let tagAddBtn = document.getElementById("tag-add-btn");
 		tagAddBtn.addEventListener("click", ()=> {
 			let tagField = document.getElementById("tag-form");

source/index.html

@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
 	<meta charset="UTF-8" />
 	<meta http-equiv="X-UA-Compatible" content="IE=edge" />

specs/adrs/112922-documentation-jsdoc.md

@@ -0,0 +1,17 @@
+# Use JSDoc for JS documentation
+
+- Status: accept
+- Deciders: Arthur Lu, Marc Reta
+- Date: 11 / 29 / 22
+
+## Decision Drivers
+
+- Need simple way to publish documentation for code
+- Already documentating infile using JSDoc style
+
+## Considered Options
+- JSDoc
+
+## Decision Outcome
+
+Chosen Option: JSDoc. Will run by generating docs in /source/docs/ before publishing /source/ so users can enter the URI /docs/ to see documentation. 

specs/adrs/112922-prettier.md

@@ -0,0 +1,17 @@
+# Use Prettier for generic style enforcement
+
+- Status: accept
+- Deciders: Arthur Lu, Marc Reta
+- Date: 11 / 29 / 22
+
+## Decision Drivers
+
+- Other linters (HTML, CSS, JS) are sometimes too permissive
+- Need to enforce style on other files like markdown, json
+
+## Considered Options
+- Prettier
+
+## Decision Outcome
+
+Chosen Option: Prettier

specs/adrs/112922-review-storage.md

@@ -0,0 +1,16 @@
+# Backend Storage Structure
+- Status: Accept
+- Deciders: Rhea Bhutada, Kara Hoagland, Gavyn Ezell, George Dubinin, Henry Feng 
+- Date: 11/29/2022
+
+## Decision Drivers
+- Needed more efficient way of storing reviews that are created, for more efficient testing, updating, accessing, and deleting.
+
+## Considered Options
+- localStorage
+
+## Decision Outcome
+Using local storage to maintain the "local first" requirement.
+Moved away from array of objects for storing reviews, reviews are stored individually as keys in localStorage, under the "review{id}" format. Each key 
+corresponds to object containing review data. We also have an array stored in local storage, named "activeIDs" which keeps track of id numbers that are attached
+to created reviews.

specs/adrs/112922-reviewpage-session.md

@@ -0,0 +1,15 @@
+# Opening Specific Reviews
+- Status: Accept
+- Deciders: Rhea Bhutada, Kara Hoagland, Gavyn Ezell, George Dubinin, Henry Feng 
+- Date: 11/29/2022
+
+## Decision Drivers
+- When opening up a review, browser needs to know what review ID to use for loading the review page data
+
+## Considered Options
+- sessionStorage
+
+## Decision Outcome
+Review cards have event listeners that will add their associated review ID number to session storage so
+when the review loads, the browser will use the id stored to pull exact data corresponding to the review.
+

specs/adrs/112922-tag-review-collision-fix.md

@@ -0,0 +1,13 @@
+# Organizing Review Under Tags
+- Status: Accept
+- Deciders: Rhea Bhutada, Kara Hoagland, Gavyn Ezell, George Dubinin, Henry Feng 
+- Date: 11/29/2022
+
+## Decision Drivers
+- Needed to keep track of reviews under certain given tags for filtering feature.
+
+## Considered Options
+- localStorage
+
+## Decision Outcome
+For every tag create a key under that tag name in localStorage. They will store an array of IDs that correspond to reviews that contain that tag.