diff --git a/.github/workflows/js-unittest.yml b/.github/workflows/js-unittest.yml
index 4cb1359..918ce70 100644
--- a/.github/workflows/js-unittest.yml
+++ b/.github/workflows/js-unittest.yml
@@ -23,5 +23,7 @@ jobs:
         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 test
\ No newline at end of file
diff --git a/admin/meetings/11822-sprint1day2.md b/admin/meetings/110822-sprint1day2.md
similarity index 100%
rename from admin/meetings/11822-sprint1day2.md
rename to admin/meetings/110822-sprint1day2.md
diff --git a/admin/meetings/111622-checkin6.md b/admin/meetings/111622-checkin6.md
new file mode 100644
index 0000000..0c37037
--- /dev/null
+++ b/admin/meetings/111622-checkin6.md
@@ -0,0 +1,33 @@
+# Meeting Minutes (11/16/2022)
+## Team 29: Hackers1995
+## Meeting Topic: Weekly TA Catchup with Gagan
+We are meeting with Gagan to discuss Checkpoint 1 and Sprint 2 resolutions.
+
+## Attendance
+1. Rhea Bhutada
+2. George Dubinin
+3. Gagan Gopalaiah
+4. Kara Hoagland
+
+## Meeting Details
+- When: 11/16/2022 at 3:30PM
+- Where: Zoom
+
+## Agenda:
+
+## Discussion Points by Gagan
+- Updated Gagan on Sprint 1
+  - looked at Girhub actions
+  - looked at the published page so far
+  - discussed retrospective
+- Upcoming Assignments
+  - we have to come up with a video on the status of our app
+  - ramp up the styling part, so u can brag about the design of the app
+  - this video is supposed to encourage healthy competition
+- Other Concerns
+  - JSDocs - not primary concern right now
+  - GitHub Pages vs. Netlify
+    - Gagan sees Netlify as more professional and not to difficult to implement
+
+## End Time
+- 11/09/2022 at 3:45PM
diff --git a/package.json b/package.json
index bd8a69c..5dfc756 100644
--- a/package.json
+++ b/package.json
@@ -4,16 +4,19 @@
   "type": "module",
   "scripts": {
     "test": "mocha --recursive --require mock-local-storage './{,!(node_modules)/**}/*.test.js'",
-    "lint": "eslint '**/*.js'",
+    "lint": "eslint **/*.js",
     "fix-style": "eslint --fix **/*.js",
     "lintHTML": "htmlhint '**/*.html'",
-    "lintCSS": "stylelint '**/*.css'"
+    "lintCSS": "stylelint '**/*.css'",
+    "http-server": "http-server source"
   },
   "devDependencies": {
     "eslint": "^8.27.0",
     "htmlhint": "1.1.4",
+    "http-server": "",
     "mocha": "10",
     "mock-local-storage": "^1.1.23",
+    "puppeteer": "^18.2.1",
     "stylelint": "14.14.1",
     "stylelint-config-standard": "^29.0.0"
   }
diff --git a/source/CreatePage.html b/source/CreatePage.html
index 64dfe78..99fc09c 100644
--- a/source/CreatePage.html
+++ b/source/CreatePage.html
@@ -14,18 +14,24 @@
   <!-- 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/CreatePage.css" />
-  <script src="assets/scripts/main.js" type="module"></script>
+  <link rel="stylesheet" href="./static/ReviewCard.css" />
+  <script src="./assets/scripts/CreatePage.js" type="module"></script>
 
 </head>
 
 <body>
+  <input type="button" value="Home" id="home-btn" onclick="window.location.assign('./index.html')">
   <form id="new-food-entry">
     <fieldset>
       <legend>Pic:</legend>
-      <label for="mealImage">
+      Choose Input type:
+      <select id="select" name="select">
+        <option value="file">File Upload</option>
+        <option value="url">From an URL</option>
+      </select>
+      <label for="mealImage" id="source">
         Source:
-        <input type="text" id="mealImg" name="mealImg">
+        <input type="file" accept="image/*" id="mealImg" name="mealImg">
       </label>
       <label for="image-alt">
         Alt Text:
@@ -46,11 +52,11 @@
 
     <fieldset class="rating">
       <legend> Rating: </legend>
-      <input type="radio" id="s5" name="rating" value="5"/> <label for="s5"> 5 stars </label>
-      <input type="radio" id="s4" name="rating" value="4"/> <label for="s4"> 4 stars </label>
-      <input type="radio" id="s3" name="rating" value="3"/> <label for="s3"> 3 stars </label>
-      <input type="radio" id="s2" name="rating" value="2"/> <label for="s2"> 2 stars </label>
-      <input type="radio" id="s1" name="rating" value="1"/> <label for="s1"> 1 star </label>
+      <input type="radio" id="s5" name="rating" value="5"/> <label for="s5" id="s5-select"> 5 stars </label>
+      <input type="radio" id="s4" name="rating" value="4"/> <label for="s4" id="s4-select"> 4 stars </label>
+      <input type="radio" id="s3" name="rating" value="3"/> <label for="s3" id="s3-select"> 3 stars </label>
+      <input type="radio" id="s2" name="rating" value="2"/> <label for="s2" id="s2-select"> 2 stars </label>
+      <input type="radio" id="s1" name="rating" value="1"/> <label for="s1" id="s1-select"> 1 star </label>
     </fieldset>
 
     <fieldset>
@@ -65,12 +71,11 @@
         <div class='tag-container' id="tag-container-form">
 
         </div>
-        <button type="button" id="tagAdd">Add Tag</button>
+        <button type="button" id="tag-add-btn">Add Tag</button>
       </label>
 
     </fieldset>
-    <button type="submit" value="Submit">Add Review</button>
-    <button type="button" class="danger">Clear Review Journal</button>
+    <button type="submit" id="save-btn" value="Submit">Save Review</button>
   </form>
 </body>
 
diff --git a/source/ReviewDetails.html b/source/ReviewDetails.html
index 6c1080b..8c457aa 100644
--- a/source/ReviewDetails.html
+++ b/source/ReviewDetails.html
@@ -19,8 +19,9 @@
 </head>
 <body>
   <main>
-    <button type="button" id="update">Update</button>
-    <button type="button" id="delete" class="danger">Delete</button>
+    <input type="button" value="Home" id="home-btn" onclick="window.location.assign('./index.html')">
+    <button type="button" id="update-btn">Update</button>
+    <button type="button" id="delete-btn" class="danger">Delete</button>
   </main>
     <!----> <form id="update-food-entry" class="hidden">
       <fieldset>
@@ -48,11 +49,11 @@
       
       <fieldset class="rating">
         <legend> Rating: </legend>
-        <input type="radio" id="s5" name="rating" value="5"/> <label for="s5"> 5 stars </label>
-        <input type="radio" id="s4" name="rating" value="4"/> <label for="s4"> 4 stars </label>
-        <input type="radio" id="s3" name="rating" value="3"/> <label for="s3"> 3 stars </label>
-        <input type="radio" id="s2" name="rating" value="2"/> <label for="s2"> 2 stars </label>
-        <input type="radio" id="s1" name="rating" value="1"/> <label for="s1"> 1 star </label>
+        <input type="radio" id="s5" name="rating" value="5"/> <label for="s5" id="s5-select"> 5 stars </label>
+        <input type="radio" id="s4" name="rating" value="4"/> <label for="s4" id="s4-select"> 4 stars </label>
+        <input type="radio" id="s3" name="rating" value="3"/> <label for="s3" id="s3-select"> 3 stars </label>
+        <input type="radio" id="s2" name="rating" value="2"/> <label for="s2" id="s2-select"> 2 stars </label>
+        <input type="radio" id="s1" name="rating" value="1"/> <label for="s1" id="s1-select"> 1 star </label>
       </fieldset>
 
       <fieldset>
@@ -67,7 +68,7 @@
           <div class='tag-container' id="tag-container-form">
   
           </div>
-          <button type="button" id="tagAdd">Add Tag</button>
+          <button type="button" id="tag-add-btn">Add Tag</button>
         </label>
   
       </fieldset>
diff --git a/source/assets/images/1_spooky-ghost-cookies.jpeg b/source/assets/images/1_spooky-ghost-cookies.jpeg
deleted file mode 100644
index aa5a1ed..0000000
Binary files a/source/assets/images/1_spooky-ghost-cookies.jpeg and /dev/null differ
diff --git a/source/assets/images/2_frightfully-easy-ghost-cookies.jpeg b/source/assets/images/2_frightfully-easy-ghost-cookies.jpeg
deleted file mode 100644
index 38b34e8..0000000
Binary files a/source/assets/images/2_frightfully-easy-ghost-cookies.jpeg and /dev/null differ
diff --git a/source/assets/images/3_ingredient-ghost-halloween-cookies.jpeg b/source/assets/images/3_ingredient-ghost-halloween-cookies.jpeg
deleted file mode 100644
index 2bca5e0..0000000
Binary files a/source/assets/images/3_ingredient-ghost-halloween-cookies.jpeg and /dev/null differ
diff --git a/source/assets/scripts/CreatePage.js b/source/assets/scripts/CreatePage.js
new file mode 100644
index 0000000..02ddea1
--- /dev/null
+++ b/source/assets/scripts/CreatePage.js
@@ -0,0 +1,106 @@
+import { newReviewToStorage } from "./localStorage.js";
+
+window.addEventListener("DOMContentLoaded", init);
+
+function init() {
+	// get next id
+
+	// creates the key
+	initFormHandler();
+    
+}
+
+function initFormHandler() {
+
+	//accessing 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
+	*/
+	let select = document.getElementById("select");
+	select.addEventListener("change", function() {
+		const input = document.getElementById('source');
+	
+		if (select.value == "file") {
+		  input.innerHTML = `
+		  Source:
+		  <input type="file" accept="image/*" id="mealImg" name="mealImg">
+		  `
+		}
+		//TODO: change to photo taking for sprint 3
+		else {
+		  input.innerHTML = `
+		  Source:
+		  <input type="text" id="mealImg" name="mealImg">
+		  `
+		}
+	});
+
+	//addressing 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
+		reader.addEventListener("load", ()=>{
+			imgDataURL = reader.result;
+		}, false);
+		
+		//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
+    */
+		e.preventDefault();
+		let formData = new FormData(form);
+		let reviewObject = {};
+		for (let [key, value] of formData) {
+			console.log(`${key}`);
+			console.log(`${value}`);
+			if (`${key}` !== "tag-form") {
+				reviewObject[`${key}`] = `${value}`;
+			}
+			if (`${key}` === "mealImg" && select.value == "file") {
+				reviewObject["mealImg"] = imgDataURL;
+			}
+		}
+		reviewObject["tags"] = [];
+
+		let tags = document.querySelectorAll(".tag");
+		for(let i = 0; i < tags.length; i ++) {
+			reviewObject["tags"].push(tags[i].innerHTML);
+			tagContainer.removeChild(tags[i]);
+		}
+
+		let nextReviewId = newReviewToStorage(reviewObject);
+		sessionStorage.setItem("currID", JSON.stringify(nextReviewId));
+
+		window.location.assign("./ReviewDetails.html");
+        
+	});
+
+	let tagAddBtn = document.getElementById("tag-add-btn");
+	tagAddBtn.addEventListener("click", ()=> {
+		let tagField = document.getElementById("tag-form");
+		if (tagField.value.length > 0) {
+			let tagLabel = document.createElement("label");
+			tagLabel.innerHTML = tagField.value;
+			tagLabel.setAttribute("class","tag");
+			tagLabel.addEventListener("click",()=> {
+				tagContainer.removeChild(tagLabel);
+			});
+      
+			tagContainer.append(tagLabel);
+			tagField.value = "";
+
+		}
+	});
+
+}
diff --git a/source/assets/scripts/ReviewCard.js b/source/assets/scripts/ReviewCard.js
index 07df6a6..70a0660 100644
--- a/source/assets/scripts/ReviewCard.js
+++ b/source/assets/scripts/ReviewCard.js
@@ -6,7 +6,6 @@ class ReviewCard extends HTMLElement {
 	constructor() {
 		super(); 
 
-
 		let shadowEl = this.attachShadow({mode:"open"});
 
 		let articleEl = document.createElement("article");
@@ -88,9 +87,9 @@ class ReviewCard extends HTMLElement {
 		//attach event listener to each recipe-card
 		this.addEventListener("click", (event) => {
 			console.log(event.target);
-			console.log(event.target.data);
+			console.log(event.target.reviewId);
 			//Option 1: sending current data to second html page using localStorage (could also just store index)
-			sessionStorage.setItem("current", JSON.stringify(event.target.data));
+			sessionStorage.setItem("currID", JSON.stringify(event.target.data.reviewID));
 			window.location.assign("./ReviewDetails.html");
 			/*
       //Option 2: sending current data to second html page using string query w/ url (currently not storing value)
@@ -133,12 +132,18 @@ class ReviewCard extends HTMLElement {
 		let articleEl = this.shadowEl.querySelector("article");
     
 		// setting the article elements for the review card
+		this.reviewID = data["reviewID"];
 
 		//image setup
 		let mealImg = document.createElement("img");
 		mealImg.setAttribute("id", "a-mealImg");
-		mealImg.setAttribute("src",data["mealImg"]);
 		mealImg.setAttribute("alt",data["imgAlt"]);
+		if(data["mealImg"] != ""){
+			mealImg.setAttribute("src",data["mealImg"]);
+		}
+		else{
+			mealImg.setAttribute("src", "./assets/images/icons/plate_with_cutlery.png");
+		}
 
 		//meal name setup
 		let mealLabel = document.createElement("label");
@@ -147,26 +152,6 @@ class ReviewCard extends HTMLElement {
 		mealLabel.innerHTML = data["mealName"];
 
 		//restaurant name setup
-		/*
-    //review page link
-    //giving it functionality to save the review card's info to session storage for loading the review page
-    let reviewLink = document.createElement('a');
-    reviewLink.setAttribute('href','./review.html')
-    reviewLink.innerHTML = 'review page'
-    reviewLink.addEventListener('click', () => {
-      sessionStorage.clear();
-      let currReview = {
-        "imgSrc": data['imgSrc'],
-        "imgAlt": data['imgAlt'],
-        "mealName": data['mealName'],
-        "restaurant": data['restaurant'],
-        "comments": data['comments'],
-        "rating": data['rating'],
-        "tags": data['tags']                
-      }
-      sessionStorage.setItem('currReview', JSON.stringify(currReview));
-    });
-*/
 		let restaurantLabel = document.createElement("label");
 		restaurantLabel.setAttribute("id", "a-restaurant");
 		restaurantLabel.setAttribute("class","restaurant-name");
@@ -197,14 +182,15 @@ class ReviewCard extends HTMLElement {
 			for (let i = 0; i < data["tags"].length; i++) {
 				let newTag = document.createElement("label");
 				newTag.setAttribute("class","tag");
-				newTag.innerHTML = data["tags"][i] + "   ";
+				newTag.innerHTML = data["tags"][i];
 				tagContainer.append(newTag);
 			}
 		}
 
+		//adding final ID to data!
+
 		articleEl.append(mealImg);
 		articleEl.append(mealLabel);
-		//articleEl.append(reviewLink)
 		articleEl.append(restaurantLabel);
 		articleEl.append(ratingDiv);
 		articleEl.append(tagContainer);
@@ -237,6 +223,7 @@ class ReviewCard extends HTMLElement {
 		let dataContainer = {};
     
 		// getting the article elements for the review card
+		dataContainer["reviewID"] = this.reviewID;
 
 		//get image
 		let mealImg = this.shadowEl.getElementById("a-mealImg");
diff --git a/source/assets/scripts/ReviewDetails.js b/source/assets/scripts/ReviewDetails.js
index 6819bb9..2f560f7 100644
--- a/source/assets/scripts/ReviewDetails.js
+++ b/source/assets/scripts/ReviewDetails.js
@@ -1,5 +1,5 @@
 //reviewDetails.js
-import {getReviewsFromStorage, saveReviewsToStorage} from "./localStorage.js";
+import {deleteReviewFromStorage, getReviewFromStorage, updateReviewToStorage} from "./localStorage.js";
 
 // Run the init() function when the page has loaded
 window.addEventListener("DOMContentLoaded", init);
@@ -10,115 +10,96 @@ function init(){
 }
 
 function setupDelete(){
-	let deleteBtn = document.getElementById("delete");
-	let reviews = getReviewsFromStorage();
-	let current = JSON.parse(sessionStorage.getItem("current"));
+	let deleteBtn = document.getElementById("delete-btn");
+	let currID = JSON.parse(sessionStorage.getItem("currID"));
 	deleteBtn.addEventListener("click", function(){
 		if(window.confirm("Are you sure you want to delete this entry?")){
-			//delete function
-			if(current){
-				console.log(current);
-				for(let i = 0; i < reviews.length; i++){
-					console.log(reviews[i]);
-					if(reviews[i]["mealName"] == current["mealName"] && reviews[i]["restaurant"] == current["restaurant"]){
-						console.log("match found");
-						reviews.splice(i,1);
-						saveReviewsToStorage(reviews);
-						sessionStorage.removeItem("current");
-						window.location.assign("./index.html");
-						break;
-					}
-				}
-			}
+			deleteReviewFromStorage(currID);
+			sessionStorage.removeItem("currID");
+			window.location.assign("./index.html");
 		}
 	});
 }
 
 function setupUpdate(){
-	let updateBtn = document.getElementById("update");
-	let reviews = getReviewsFromStorage();
-	let current = JSON.parse(sessionStorage.getItem("current"));
+	let updateBtn = document.getElementById("update-btn");
+	let currID = JSON.parse(sessionStorage.getItem("currID"));
+	let currReview = getReviewFromStorage(currID);
 	let form = document.getElementById("update-food-entry");
 	updateBtn.addEventListener("click", function(){
 		//update function
-		if(current){
-			console.log(current);
-			form.style.display = "block";
-			let tagContainer = document.getElementById("tag-container-form");
-			console.log(document.querySelectorAll("#update-food-entry input"));
 
-			//Set value of each input element to current's values
-			document.getElementById("mealImg").defaultValue = current["mealImg"];
-			document.getElementById("imgAlt").defaultValue = current["imgAlt"];
-			document.getElementById("mealName").defaultValue = current["mealName"];
-			document.getElementById("comments").textContent = current["comments"];
-			document.getElementById("rating-" + `${current["rating"]}`).checked = true;
-			document.getElementById("restaurant").defaultValue = current["restaurant"];
+		//form.style.display = "block";
+		form.classList.remove("hidden");
+		let tagContainer = document.getElementById("tag-container-form");
 
-			if(current["tags"]){
-				for (let i = 0; i < current["tags"].length; i++) {
-					let newTag = document.createElement("label");
-					newTag.setAttribute("class","tag");
-					newTag.innerHTML = current["tags"][i] + "   ";
-					newTag.addEventListener("click",()=> {
-						tagContainer.removeChild(newTag);
-					});
-					tagContainer.append(newTag);
+		//Set value of each input element to current's values
+		document.getElementById("mealImg").defaultValue = currReview["mealImg"];
+		document.getElementById("imgAlt").defaultValue = currReview["imgAlt"];
+		document.getElementById("mealName").defaultValue = currReview["mealName"];
+		document.getElementById("comments").textContent = currReview["comments"];
+		document.getElementById("s" + `${currReview["rating"]}`).checked = true;
+		document.getElementById("restaurant").defaultValue = currReview["restaurant"];
+
+		if(currReview["tags"]){
+			while (tagContainer.firstChild) {
+				tagContainer.removeChild(tagContainer.firstChild);
+			}
+			for (let i = 0; i < currReview["tags"].length; i++) {
+				let newTag = document.createElement("label");
+				newTag.setAttribute("class","tag");
+				newTag.innerHTML = currReview["tags"][i];
+				newTag.addEventListener("click",()=> {
+					tagContainer.removeChild(newTag);
+				});
+				tagContainer.append(newTag);
+			}
+		}
+		//Take formdata values as newData when submit
+		form.addEventListener("submit", function(){
+			/*
+			*  User submits the form for their review.
+			*  We create reviewCard and put in storage
+			*/
+			let formData = new FormData(form);
+			let newData = {};
+			for (let [key, value] of formData) {
+				console.log(`${key}`);
+				console.log(`${value}`);
+				if (`${key}` !== "tag-form") {
+					newData[`${key}`] = `${value}`;
 				}
 			}
-			//Take formdata values as newData when submit
-			form.addEventListener("submit", function(){
-				/*
-                *  User submits the form for their review.
-                *  We create reviewCard and put in storage
-                */
-				let formData = new FormData(form);
-				let newData = {};
-				for (let [key, value] of formData) {
-					console.log(`${key}`);
-					console.log(`${value}`);
-					if (`${key}` !== "tag-form") {
-						newData[`${key}`] = `${value}`;
-					}
-				}
-				newData["tags"] = [];
-            
-				let tags = document.querySelectorAll(".tag");
-				for(let i = 0; i < tags.length; i ++) {
-					newData["tags"].push(tags[i].innerHTML);
-					tagContainer.removeChild(tags[i]);
-				}
+			newData["tags"] = [];
+		
+			let tags = document.querySelectorAll(".tag");
+			for(let i = 0; i < tags.length; i ++) {
+				newData["tags"].push(tags[i].innerHTML);
+				tagContainer.removeChild(tags[i]);
+			}
 
-				for(let i = 0; i < reviews.length; i++){
-					console.log(reviews[i]);
-					if(reviews[i]["mealName"] == current["mealName"] && reviews[i]["restaurant"] == current["restaurant"]){
-						console.log("match found");
-						reviews.splice(i,1,newData);
-						saveReviewsToStorage(reviews);
-						sessionStorage.setItem("current", JSON.stringify(newData));
-						break;
-					}
-				}
+			newData["reviewID"] = currID;
 
-				form.style.display = "none";
+			updateReviewToStorage(currID, newData);
 
-			});
+			form.style.display = "none";
 
-			let tagAddBtn = document.getElementById("tagAdd");
-			tagAddBtn.addEventListener("click", ()=> {
-				let tagField = document.getElementById("tag-form");
-				if (tagField.value.length > 0) {
-					let tagLabel = document.createElement("label");
-					tagLabel.innerHTML = tagField.value;
-					tagLabel.setAttribute("class","tag");
-					tagLabel.addEventListener("click",()=> {
-						tagContainer.removeChild(tagLabel);
-					});
-                
-					tagContainer.append(tagLabel);
-					tagField.value = "";
-				}
-			});
-		}
+		});
+
+		let tagAddBtn = document.getElementById("tag-add-btn");
+		tagAddBtn.addEventListener("click", ()=> {
+			let tagField = document.getElementById("tag-form");
+			if (tagField.value.length > 0) {
+				let tagLabel = document.createElement("label");
+				tagLabel.innerHTML = tagField.value;
+				tagLabel.setAttribute("class","tag");
+				tagLabel.addEventListener("click",()=> {
+					tagContainer.removeChild(tagLabel);
+				});
+			
+				tagContainer.append(tagLabel);
+				tagField.value = "";
+			}
+		});
 	});
 }
diff --git a/source/assets/scripts/ReviewPage.js b/source/assets/scripts/ReviewPage.js
deleted file mode 100644
index 89cd440..0000000
--- a/source/assets/scripts/ReviewPage.js
+++ /dev/null
@@ -1,13 +0,0 @@
-// Run the init() function when the page has loaded
-window.addEventListener("DOMContentLoaded", init);
-
-function init() {
-	let result = sessionStorage.getItem("currReview");
-
-	let main = document.querySelector("main");
-    
-	main.innerHTML = result;
-	let p = document.createElement("p");
-	p.innerHTML = JSON.parse(result)["comments"];
-	main.append(p);
-}
diff --git a/source/assets/scripts/localStorage.js b/source/assets/scripts/localStorage.js
index 48fc891..20be650 100644
--- a/source/assets/scripts/localStorage.js
+++ b/source/assets/scripts/localStorage.js
@@ -1,19 +1,79 @@
 /**
- * @returns {Array<Object>} An array of reviews found in localStorage
+ * Creates a new review to storage and performs related meta tasks
+ * @param {Object} review to store
+ * @return {number} ID of the newly added review
  */
-export function getReviewsFromStorage() {
-	let result = JSON.parse(localStorage.getItem("reviews"));
-	if (result) {
-		return result;
-	}
-	return new Array(0);
+export function newReviewToStorage(review){
+	//grabbing the nextID, and putting our review object in storage associated with the ID
+	let nextReviewId = JSON.parse(localStorage.getItem("nextID"));
+	review["reviewID"] = nextReviewId;
+
+	// set the review entry to the review object
+	localStorage.setItem(`review${nextReviewId}`, JSON.stringify(review));
+	
+	//updating our activeIDS list
+	let tempIdArr = JSON.parse(localStorage.getItem("activeIDS"));
+	tempIdArr.push(nextReviewId);
+	localStorage.setItem("activeIDS", JSON.stringify(tempIdArr));
+	
+	//increment nextID for next review creation
+	nextReviewId++;
+	localStorage.setItem("nextID", JSON.stringify(nextReviewId));
+
+	return nextReviewId;
 }
 
 /**
- * Takes in an array of reviews, converts it to a string, and then
- * saves that string to 'reviews' in localStorage
- * @param {Array<Object>} reviews An array of reviews
+ * Gets a single review by ID from storage
+ * @param {string} ID of the review to get
+ * @returns {Object} review object corresponding to param ID
  */
-export function saveReviewsToStorage(reviews) {
-	localStorage.setItem("reviews", JSON.stringify(reviews));
+export function getReviewFromStorage(ID){
+	return JSON.parse(localStorage.getItem(`review${ID}`));
 }
+
+/**
+ * Updates a single review by ID to storage
+ * @param {string} ID of review to update
+ * @param {Object} review to store
+ */
+export function updateReviewToStorage(ID, review){
+	// set the review entry with ID to the review object
+	localStorage.setItem(`review${ID}`, JSON.stringify(review));
+}
+
+/**
+ * Deletes a review by ID from storage
+ * @param {string} ID of the review to delete
+ */
+export function deleteReviewFromStorage(ID){
+	let activeIDS = JSON.parse(localStorage.getItem("activeIDS"));
+
+	for (let i in activeIDS) {
+		if (activeIDS[i] == ID) {
+			activeIDS.splice(i,1);
+			localStorage.setItem("activeIDS", JSON.stringify(activeIDS));
+			localStorage.removeItem(`review${ID}`);
+			return;
+		}
+	}
+
+	console.error(`could not find review${ID} in localStorage`);
+}
+
+// legacy function
+export function getAllReviewsFromStorage() {
+	if (!(localStorage.getItem("activeIDS"))) {
+		// we wanna init the active ID array and start the nextID count
+		localStorage.setItem("activeIDS", JSON.stringify([]));
+		localStorage.setItem("nextID",  JSON.stringify(0));
+	}
+	//iterate thru activeIDS
+	let activeIDS = JSON.parse(localStorage.getItem("activeIDS"));
+	let reviews = [];
+	for (let i = 0; i < activeIDS.length; i++) {
+		let currReview = JSON.parse(localStorage.getItem(`review${activeIDS[i]}`));
+		reviews.push(currReview);
+	}
+	return reviews;
+}
\ No newline at end of file
diff --git a/source/assets/scripts/localStorage.test.js b/source/assets/scripts/localStorage.test.js
index 65574b8..8f87ce0 100644
--- a/source/assets/scripts/localStorage.test.js
+++ b/source/assets/scripts/localStorage.test.js
@@ -1,48 +1,106 @@
 import {strict as assert} from "node:assert";
-import {describe, it, beforeEach} from "mocha";
-import {saveReviewsToStorage, getReviewsFromStorage} from "./localStorage.js";
-
-beforeEach(() => {
-	localStorage.clear();
-});
+import {describe, it, before, after} from "mocha";
+import {newReviewToStorage, getReviewFromStorage, updateReviewToStorage, deleteReviewFromStorage, getAllReviewsFromStorage} from "./localStorage.js";
 
 describe("test app localStorage interaction", () => {
-	it("get after init", () => {
-		assert.deepEqual(getReviewsFromStorage(), []);
+	
+	before(() => {
+		localStorage.clear();
 	});
-	it("store one then get", () => {
-		let reviews = [{
+
+	it("test localStorage state after init", () => {
+		assert.deepEqual(getAllReviewsFromStorage(), []);
+		assert.deepEqual(JSON.parse(localStorage.getItem("activeIDS")), []);
+		assert.strictEqual(JSON.parse(localStorage.getItem("nextID")), 0);
+	});
+
+	it("test localStorage state after adding one review", () => {
+		let review = {
 			"imgSrc": "sample src",
 			"imgAlt": "sample alt",
 			"mealName": "sample name",
 			"restaurant": "sample restaurant",
 			"rating": 5,
 			"tags": ["tag 1", "tag  2", "tag 3"]
-		}];
+		};
 
-		saveReviewsToStorage(reviews);
-		assert.deepEqual(getReviewsFromStorage(), reviews);
+		newReviewToStorage(review);
+
+		review.reviewID = 0;
+
+		assert.deepEqual(getAllReviewsFromStorage(), [review]);
+		assert.deepEqual(getReviewFromStorage(0), review);
+		assert.deepEqual(JSON.parse(localStorage.getItem("activeIDS")), [0]);
+		assert.strictEqual(JSON.parse(localStorage.getItem("nextID")), 1);
 	});
-	it("repeated store one more and get", () => {
-		let reviews = [];
 
-		assert.deepEqual(getReviewsFromStorage(), reviews);
+	it("test localStorage state during adding 999 reviews", () => {
+		let reviews = getAllReviewsFromStorage();
+		let ids = [0];
+
+		for(let i = 1; i < 1000; i++){
+			ids.push(i);
+			let new_review = {
+				"imgSrc": `sample src ${i}`,
+				"imgAlt": `sample alt ${i}`,
+				"mealName": `sample name ${i}`,
+				"restaurant": `sample restaurant ${i}`,
+				"rating": i,
+				"tags": [`tag ${3*i}`, `tag ${3*i + 1}`, `tag ${3*i + 2}`]
+			};
+
+			newReviewToStorage(new_review);
+
+			new_review.reviewID = i;
+			reviews.push(new_review);
+
+			assert.deepEqual(getAllReviewsFromStorage(), reviews);
+			assert.deepEqual(getReviewFromStorage(i), new_review);
+			assert.deepEqual(JSON.parse(localStorage.getItem("activeIDS")), ids);
+			assert.strictEqual(JSON.parse(localStorage.getItem("nextID")), (i+1));
+		}
+	}).timeout(5000);
+
+	it("test localStorage state during updating 1000 reviews", () => {
+		let reviews = getAllReviewsFromStorage();
+		let ids = JSON.parse(localStorage.getItem("activeIDS"));
 
 		for(let i = 0; i < 1000; i++){
-			reviews = getReviewsFromStorage();
-			
-			reviews.push(
-				{
-					"imgSrc": `sample src ${i}`,
-					"imgAlt": `sample alt ${i}`,
-					"mealName": `sample name ${i}`,
-					"restaurant": `sample restaurant ${i}`,
-					"rating": i,
-					"tags": [`tag ${3*i}`, `tag ${3*i + 1}`, `tag ${3*i + 2}`]
-				}
-			);
-			saveReviewsToStorage(reviews);
-			assert.deepEqual(getReviewsFromStorage(), reviews);
+			let new_review = {
+				"imgSrc": `updated sample src ${i}`,
+				"imgAlt": `updated sample alt ${i}`,
+				"mealName": `updated sample name ${i}`,
+				"restaurant": `updated sample restaurant ${i}`,
+				"rating": i*2+i,
+				"tags": [`tag ${3*i}`, `tag ${3*i + 1}`, `tag ${3*i + 2}`]
+			};
+			new_review.reviewID = i;
+
+			reviews[i] = new_review;
+
+			updateReviewToStorage(i, new_review);
+
+			assert.deepEqual(getAllReviewsFromStorage(), reviews);
+			assert.deepEqual(getReviewFromStorage(i), new_review);
+			assert.deepEqual(JSON.parse(localStorage.getItem("activeIDS")), ids);
+			assert.strictEqual(JSON.parse(localStorage.getItem("nextID")), 1000);
 		}
-	}).timeout(10000);
+	}).timeout(5000);
+
+	it("test localStorage state during deleting 1000 reviews", () => {
+		let reviews = getAllReviewsFromStorage();
+		let ids = JSON.parse(localStorage.getItem("activeIDS"));
+
+		for(let i = 999; i >= 0; i--){
+			deleteReviewFromStorage(i);
+			ids.pop();
+			reviews.pop();
+
+			assert.deepEqual(getAllReviewsFromStorage(), reviews);
+			assert.deepEqual(JSON.parse(localStorage.getItem("activeIDS")), ids);
+			assert.strictEqual(JSON.parse(localStorage.getItem("nextID")), 1000);
+		}
+	}).timeout(5000);
+
+	after(() => {});
 });
diff --git a/source/assets/scripts/main.e2e.test.js b/source/assets/scripts/main.e2e.test.js
new file mode 100644
index 0000000..482f67c
--- /dev/null
+++ b/source/assets/scripts/main.e2e.test.js
@@ -0,0 +1,384 @@
+import {strict as assert} from "node:assert";
+import {describe, it, before, after} from "mocha";
+import puppeteer from "puppeteer-core";
+import { exit } from "node:process";
+
+describe("test App end to end", async () => {
+
+	let browser;
+	let page;
+
+	before(async () => {
+		let root;
+		try {
+			root =  process.getuid() == 0;
+		}
+		catch (error) {
+			root = false;
+		}
+
+		browser = await puppeteer.launch({args: root ? ['--no-sandbox'] : undefined});
+		page = await browser.newPage();
+		try{
+			await page.goto("http://localhost:8080", {timeout: 1000});
+			await console.log(`✔ connected to localhost webserver as ${root ? "root" : "user"}`);
+		}
+		catch (error) {
+			await console.log("❌ failed to connect to localhost webserver on port 8080");
+			await exit(1);
+		}
+	});
+
+	describe("test simple properties", async () => {
+		it("page should have correct title", async () => {
+			assert.strictEqual(await page.title(), "Food Journal");
+		});
+	});
+
+	describe("test create 1 new review", async () => {
+		it("create 1 new review", async () => {
+			// Click the button to show update form
+			let create_btn = await page.$("#create-btn");
+			await create_btn.click();
+			await page.waitForNavigation();
+
+			// Set text fields
+			await page.$eval("#mealImg", el => el.value = "sample src");
+			await page.$eval("#imgAlt", el => el.value = "sample alt");
+			await page.$eval("#mealName", el => el.value = "sample name");
+			await page.$eval("#comments", el => el.value = "sample comment");
+			await page.$eval("#restaurant", el => el.value = "sample restaurant");
+
+			// Get the button needed to add new tags
+			let tag_btn = await page.$("#tag-add-btn");
+			for(let i = 0; i < 5; i++){
+				await page.$eval("#tag-form", (el, value) => el.value = `tag ${value}`, i);
+				await tag_btn.click();
+			}
+
+			// Select a new rating of 1 star
+			let rating_select = await page.$("#s1-select");
+			await rating_select.click({delay: 100});
+
+			// Click the save button to save updates
+			let save_btn = await page.$("#save-btn");
+			await save_btn.click();
+			await page.waitForNavigation();
+		});
+
+		it("check details page", async () => {
+			// Get the review image and check src and alt
+			let img = await page.$("#d-mealImg");
+			let imgSrc = await img.getProperty("src");
+			let imgAlt = await img.getProperty("alt");
+			// Check src and alt
+			assert.strictEqual(await imgSrc.jsonValue(), "sample src");
+			assert.strictEqual(await imgAlt.jsonValue(), "sample alt");
+
+			// Get the title, comment, and restaurant
+			let title = await page.$("#d-mealName");
+			let title_text = await title.getProperty("innerText");
+			let comment = await page.$("#d-comments");
+			let comment_text = await comment.getProperty("innerText");
+			let restaurant = await page.$("#d-restaurant");
+			let restaurant_text = await restaurant.getProperty("innerText");
+
+			// Check title, comment, and restaurant
+			assert.strictEqual(await title_text.jsonValue(), "sample name");
+			assert.strictEqual(await comment_text.jsonValue(), "sample comment");
+			assert.strictEqual(await restaurant_text.jsonValue(), "sample restaurant");
+
+			// Check tags
+			let tags = page.$(".tag");
+			for(let i = 0; i < tags.length; i++){
+				let tag_text = await tags[i].getProperty("innerText");
+				assert.strictEqual(await tag_text.jsonValue(), `tag -${i}`);
+			}
+
+			// Check stars
+			let stars = await page.$("#d-rating");
+			let stars_src = await stars.getProperty("src");
+			assert.strictEqual(await stars_src.jsonValue(), "./assets/images/icons/5-star.svg");
+		});
+	
+		it("check home page", async () => {
+			// Click the button to return to the home page
+			let home_btn = await page.$("#home-btn");
+			home_btn.click();
+			await page.waitForNavigation();
+
+			// Get the review card again and get its shadowRoot
+			let review_card = await page.$("review-card");
+			let shadowRoot = await review_card.getProperty("shadowRoot");
+
+			// Get the review image and check src and alt
+			let img = await shadowRoot.$("#a-mealImg");
+			let imgSrc = await img.getProperty("src");
+			let imgAlt = await img.getProperty("alt");
+			// Check src and alt
+			assert.strictEqual(await imgSrc.jsonValue(), "sample src");
+			assert.strictEqual(await imgAlt.jsonValue(), "sample alt");
+
+			// Get the title, comment, and restaurant
+			let title = await shadowRoot.$("#a-mealName");
+			let title_text = await title.getProperty("innerText");
+			let comment = await shadowRoot.$("#a-comments");
+			let comment_text = await comment.getProperty("innerText");
+			let restaurant = await shadowRoot.$("#a-restaurant");
+			let restaurant_text = await restaurant.getProperty("innerText");
+			// Check title, comment, and restaurant
+			assert.strictEqual(await title_text.jsonValue(), "sample name");
+			assert.strictEqual(await comment_text.jsonValue(), "sample comment");
+			assert.strictEqual(await restaurant_text.jsonValue(), "sample restaurant");
+			
+			// Check tags
+			let tags = shadowRoot.$(".tag");
+			for(let i = 0; i < tags.length; i++){
+				let tag_text = await tags[i].getProperty("innerText");
+				assert.strictEqual(await tag_text.jsonValue(), `tag -${i}`);
+			}
+
+			// Check stars
+			let stars = await shadowRoot.$("#a-rating");
+			let stars_src = await stars.getProperty("src");
+			assert.strictEqual(await stars_src.jsonValue(), "./assets/images/icons/5-star.svg");
+		});
+	});
+
+	describe("test read 1 review after refresh", async () => {
+		it("refresh page", async () => {
+			// Reload the page
+			await page.reload({ waitUntil: ["networkidle0", "domcontentloaded"] });
+		});
+
+		it("check details page", async () => {
+			// click review card
+			let review_card = await page.$("review-card");
+			console.log(JSON.stringify(review_card));
+			await review_card.click();
+			await page.waitForNavigation();
+
+			// Get the review image and check src and alt
+			let img = await page.$("#d-mealImg");
+			let imgSrc = await img.getProperty("src");
+			let imgAlt = await img.getProperty("alt");
+			// Check src and alt
+			assert.strictEqual(await imgSrc.jsonValue(), "sample src");
+			assert.strictEqual(await imgAlt.jsonValue(), "sample alt");
+
+			// Get the title, comment, and restaurant
+			let title = await page.$("#d-mealName");
+			let title_text = await title.getProperty("innerText");
+			let comment = await page.$("#d-comments");
+			let comment_text = await comment.getProperty("innerText");
+			let restaurant = await page.$("#d-restaurant");
+			let restaurant_text = await restaurant.getProperty("innerText");
+
+			// Check title, comment, and restaurant
+			assert.strictEqual(await title_text.jsonValue(), "sample name");
+			assert.strictEqual(await comment_text.jsonValue(), "sample comment");
+			assert.strictEqual(await restaurant_text.jsonValue(), "sample restaurant");
+
+			// Check tags
+			let tags = page.$(".tag");
+			for(let i = 0; i < tags.length; i++){
+				let tag_text = await tags[i].getProperty("innerText");
+				assert.strictEqual(await tag_text.jsonValue(), `tag -${i}`);
+			}
+
+			// Check stars
+			let stars = await page.$("#d-rating");
+			let stars_src = await stars.getProperty("src");
+			assert.strictEqual(await stars_src.jsonValue(), "./assets/images/icons/5-star.svg");
+		});
+
+		it("check home page", async () => {
+			// Click the button to return to the home page
+			let home_btn = await page.$("#home-btn");
+			home_btn.click();
+			await page.waitForNavigation();
+
+			// Get the review card again and get its shadowRoot
+			let review_card = await page.$("review-card");
+			let shadowRoot = await review_card.getProperty("shadowRoot");
+
+			// Get the review image and check src and alt
+			let img = await shadowRoot.$("#a-mealImg");
+			let imgSrc = await img.getProperty("src");
+			let imgAlt = await img.getProperty("alt");
+			// Check src and alt
+			assert.strictEqual(await imgSrc.jsonValue(), "sample src");
+			assert.strictEqual(await imgAlt.jsonValue(), "sample alt");
+
+			// Get the title, comment, and restaurant
+			let title = await shadowRoot.$("#a-mealName");
+			let title_text = await title.getProperty("innerText");
+			let comment = await shadowRoot.$("#a-comments");
+			let comment_text = await comment.getProperty("innerText");
+			let restaurant = await shadowRoot.$("#a-restaurant");
+			let restaurant_text = await restaurant.getProperty("innerText");
+			// Check title, comment, and restaurant
+			assert.strictEqual(await title_text.jsonValue(), "sample name");
+			assert.strictEqual(await comment_text.jsonValue(), "sample comment");
+			assert.strictEqual(await restaurant_text.jsonValue(), "sample restaurant");
+			
+			// Check tags
+			let tags = shadowRoot.$(".tag");
+			for(let i = 0; i < tags.length; i++){
+				let tag_text = await tags[i].getProperty("innerText");
+				assert.strictEqual(await tag_text.jsonValue(), `tag -${i}`);
+			}
+
+			// Check stars
+			let stars = await shadowRoot.$("#a-rating");
+			let stars_src = await stars.getProperty("src");
+			assert.strictEqual(await stars_src.jsonValue(), "./assets/images/icons/5-star.svg");
+		});
+	});
+
+	describe("test update 1 review", async () => {
+
+		it("update 1 review", async () => {
+
+			// Get the only review card and click it
+			let review_card = await page.$("review-card");
+			console.log(JSON.stringify(review_card));
+			await review_card.click();
+			await page.waitForNavigation();
+
+			// Click the button to show update form
+			let update_btn = await page.$("#update-btn");
+			await update_btn.click();
+
+			// Set text fields
+			await page.$eval("#mealImg", el => el.value = "updated src");
+			await page.$eval("#imgAlt", el => el.value = "updated alt");
+			await page.$eval("#mealName", el => el.value = "updated name");
+			await page.$eval("#comments", el => el.value = "updated comment");
+			await page.$eval("#restaurant", el => el.value = "updated restaurant");
+
+			// Get all tag elements and click them to delete them
+			let tag_items = await page.$$(".tag");
+			for(let i = 0; i < tag_items.length; i++){
+				await tag_items[i].click();
+			}
+
+			// Get the button needed to add new tags
+			let tag_btn = await page.$("#tag-add-btn");
+			for(let i = 0; i < 5; i++){
+				await page.$eval("#tag-form", (el, value) => el.value = `updated tag -${value}`, i);
+				await tag_btn.click();
+			}
+			
+			// Select a new rating of 5 stars
+			let rating_select = await page.$("#s5-select");
+			await rating_selects.click();
+
+			// Click the save button to save updates
+			let save_btn = await page.$("#save-btn");
+			await save_btn.click();
+			await page.waitForNavigation();
+		});
+
+		it("check details page", async () => {
+			// Get the review image and check src and alt
+			let img = await page.$("#d-mealImg");
+			let imgSrc = await img.getProperty("src");
+			let imgAlt = await img.getProperty("alt");
+			// Check src and alt
+			assert.strictEqual(await imgSrc.jsonValue(), "updated src");
+			assert.strictEqual(await imgAlt.jsonValue(), "updated alt");
+
+			// Get the title, comment, and restaurant
+			let title = await page.$("#d-mealName");
+			let title_text = await title.getProperty("innerText");
+			let comment = await page.$("#d-comments");
+			let comment_text = await comment.getProperty("innerText");
+			let restaurant = await page.$("#d-restaurant");
+			let restaurant_text = await restaurant.getProperty("innerText");
+			// Check title, comment, and restaurant
+			assert.strictEqual(await title_text.jsonValue(), "updated name");
+			assert.strictEqual(await comment_text.jsonValue(), "updated comment");
+			assert.strictEqual(await restaurant_text.jsonValue(), "updated restaurant");
+			
+			// Check tags
+			let tags = page.$(".tag");
+			for(let i = 0; i < tags.length; i++){
+				let tag_text = await tags[i].getProperty("innerText");
+				assert.strictEqual(await tag_text.jsonValue(), `updated tag -${i}`);
+			}
+
+			// Check stars
+			let stars = await page.$("#d-rating");
+			let stars_src = await stars.getProperty("src");
+			assert.strictEqual(await stars_src.jsonValue(), "./assets/images/icons/1-star.svg");
+		});
+
+		it("check home page", async () => {
+			// Click the button to return to the home page
+			let home_btn = await page.$("#home-btn");
+			home_btn.click();
+			await page.waitForNavigation();
+
+			// Get the review card again and get its shadowRoot
+			let review_card = await page.$("review-card");
+			let shadowRoot = await review_card.getProperty("shadowRoot");
+
+			// Get the review image and check src and alt
+			let img = await shadowRoot.$("#a-mealImg");
+			let imgSrc = await img.getProperty("src");
+			let imgAlt = await img.getProperty("alt");
+			// Check src and alt
+			assert.strictEqual(await imgSrc.jsonValue(), "updated src");
+			assert.strictEqual(await imgAlt.jsonValue(), "updated alt");
+
+			// Get the title, comment, and restaurant
+			let title = await shadowRoot.$("#a-mealName");
+			let title_text = await title.getProperty("innerText");
+			let comment = await shadowRoot.$("#a-comments");
+			let comment_text = await comment.getProperty("innerText");
+			let restaurant = await shadowRoot.$("#a-restaurant");
+			let restaurant_text = await restaurant.getProperty("innerText");
+			// Check title, comment, and restaurant
+			assert.strictEqual(await title_text.jsonValue(), "updated name");
+			assert.strictEqual(await comment_text.jsonValue(), "updated comment");
+			assert.strictEqual(await restaurant_text.jsonValue(), "updated restaurant");
+			
+			// Check tags
+			let tags = shadowRoot.$(".tag");
+			for(let i = 0; i < tags.length; i++){
+				let tag_text = await tags[i].getProperty("innerText");
+				assert.strictEqual(await tag_text.jsonValue(), `tag -${i}`);
+			}
+
+			// Check stars
+			let stars = await shadowRoot.$("#a-rating");
+			let stars_src = await stars.getProperty("src");
+			assert.strictEqual(await stars_src.jsonValue(), "./assets/images/icons/1-star.svg");
+		});
+
+	});
+
+	describe("test delete 1 review", () => {
+		it("delete 1 review", async () => {
+			// Get the only review card and click it
+			let review_card = await page.$("review-card");
+			await review_card.click();
+			await page.waitForNavigation();
+
+			// Get the delete button and click it
+			let delete_btn = await page.$("#delete-btn");
+			await delete_btn.click();
+			await page.waitForNavigation();
+
+			// Check that the card was correctly removed (there should be no remaining cards)
+			review_card = await page.$("#review-card");
+			assert.strictEqual(review_card, null);
+		});
+	});
+
+	after(async () => {
+		await page.close();
+		await browser.close();
+	});
+});
\ No newline at end of file
diff --git a/source/assets/scripts/main.js b/source/assets/scripts/main.js
index 5fb44a4..c402faf 100644
--- a/source/assets/scripts/main.js
+++ b/source/assets/scripts/main.js
@@ -1,18 +1,19 @@
 // main.js
-import {getReviewsFromStorage, saveReviewsToStorage} from "./localStorage.js";
+import {getAllReviewsFromStorage} from "./localStorage.js";
 
 // Run the init() function when the page has loaded
 window.addEventListener("DOMContentLoaded", init);
 
 function init() {
 	// Get the reviews from localStorage
-	let reviews = getReviewsFromStorage();
+	let reviews = getAllReviewsFromStorage();
 	// Add each reviews to the <main> element
 	addReviewsToDocument(reviews);
 	// Add the event listeners to the form elements
 	initFormHandler();
 }
 
+
 /**
  * @param {Array<Object>} reviews An array of reviews
  */
@@ -33,129 +34,9 @@ function addReviewsToDocument(reviews) {
  */
 function initFormHandler() {
 
-	/*
 	//btn to create form (could be its own function?)
-	let createBtn = document.getElementById("create");
+	let createBtn = document.getElementById("create-btn");
 	createBtn.addEventListener("click", function(){
 		window.location.assign("./CreatePage.html");
-	});*/
-
-	//accessing 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
-	*/
-	let select = document.getElementById("select");
-	select.addEventListener("change", function() {
-		const input = document.getElementById('source');
-	
-		if (select.value == "file") {
-		  input.innerHTML = `
-		  Source:
-		  <input type="file" id="mealImg" name="mealImg">
-		  `
-		}
-		else {
-		  input.innerHTML = `
-		  Source:
-		  <input type="text" id="mealImg" name="mealImg">
-		  `
-		}
 	});
-
-	//addressing 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
-		reader.addEventListener("load", ()=>{
-			imgDataURL = reader.result;
-		}, false);
-		
-		//convert image file into data URL for local storage
-		reader.readAsDataURL(document.getElementById("mealImg").files[0]);
-	})
-
-
-  
-	form.addEventListener("submit", function(){
-	/*
-    *  User submits the form for their review.
-    *  We create reviewCard and put in storage
-    */
-		let formData = new FormData(form);
-		let reviewObject = {};
-
-		for (let [key, value] of formData) {
-			console.log(`${key}`);
-			console.log(`${value}`);
-			if (`${key}` !== "tag-form") {
-				reviewObject[`${key}`] = `${value}`;
-			}
-			if (`${key}` === "mealImg" && select.value == "file") {
-				reviewObject["mealImg"] = imgDataURL;
-			}
-		}
-		reviewObject["tags"] = [];
-
-		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;
-
-		//TODO: want to append it to whatever the box is in layout 
-		let mainEl = document.querySelector("main");
-		mainEl.append(newReview);
-
-		let storedReviews = getReviewsFromStorage();
-		storedReviews.push(reviewObject);
-		saveReviewsToStorage(storedReviews);
-		document.getElementById("new-food-entry").reset();
-	});
-
-	// DEV-MODE: for testing purposes 
-	let clearBtn = document.querySelector(".danger");
-	clearBtn.addEventListener("click", function() {
-		localStorage.clear();
-		let mainEl = document.querySelector("main");
-		while (mainEl.firstChild) {
-			mainEl.removeChild(mainEl.firstChild);
-		}
-		let deleteTags = document.querySelectorAll(".tag");
-		for(let i = 0; i < deleteTags.length; i ++) {
-			tagContainer.removeChild(deleteTags[i]);
-		}
-    
-		//clears reviews AS WELL as resets form
-		document.getElementById("new-food-entry").reset();
-     
-     
-	});
-
-	let tagAddBtn = document.getElementById("tagAdd");
-	tagAddBtn.addEventListener("click", ()=> {
-		let tagField = document.getElementById("tag-form");
-		if (tagField.value.length > 0) {
-			let tagLabel = document.createElement("label");
-			tagLabel.innerHTML = tagField.value;
-			tagLabel.setAttribute("class","tag");
-			tagLabel.addEventListener("click",()=> {
-				tagContainer.removeChild(tagLabel);
-			});
-      
-			tagContainer.append(tagLabel);
-			tagField.value = "";
-
-		}
-	});
-
 }
diff --git a/source/index.html b/source/index.html
index 7708cb0..f273f02 100644
--- a/source/index.html
+++ b/source/index.html
@@ -21,62 +21,6 @@
   <main>
     <!-- Add Food Entries Here -->
   </main>
-  <!--<button type="button" id="create">CREATE</button>-->
-  <!----> <form id="new-food-entry">
-    <fieldset>
-      <legend>Pic:</legend>
-      Choose Input type:
-      <select id="select" name="select">
-        <option value="file">File Upload</option>
-        <option value="url">From an URL</option>
-      </select>
-      <label for="mealImage" id="source">
-        Source:
-        <input type="file" id="mealImg" name="mealImg">
-      </label>
-      <label for="image-alt">
-        Alt Text:
-        <input type="text" id="imgAlt" name="imgAlt">
-      </label>
-    </fieldset>
-    <fieldset>
-      <legend> Meal: </legend>
-      <label for="Meal: ">Meal:
-        <input type="text" id="mealName" name="mealName" required>
-      </label>
-      <label for="comments">Comments: 
-        <br>
-        <textarea name="comments" id="comments"></textarea>
-      </label>
-    </fieldset>
-    
-    <fieldset class="rating">
-      <legend> Rating: </legend>
-      <input type="radio" id="s5" name="rating" value="5"/> <label for="s5"> 5 stars </label>
-      <input type="radio" id="s4" name="rating" value="4"/> <label for="s4"> 4 stars </label>
-      <input type="radio" id="s3" name="rating" value="3"/> <label for="s3"> 3 stars </label>
-      <input type="radio" id="s2" name="rating" value="2"/> <label for="s2"> 2 stars </label>
-      <input type="radio" id="s1" name="rating" value="1"/> <label for="s1"> 1 star </label>
-    </fieldset>
-
-    <fieldset>
-      <legend>Other Info:</legend>
-      <label for="restaurant">
-        Restaurant:
-        <input type="text" id="restaurant" name="restaurant" required>
-      </label>
-      <label for="tag-form">
-        Tags:
-        <input type="text" id="tag-form" name="tag-form">
-        <div class='tag-container' id="tag-container-form">
-
-        </div>
-        <button type="button" id="tagAdd">Add Tag</button>
-      </label>
-
-    </fieldset>
-    <button type="submit" value="Submit">Add Review</button>
-    <button type="button" class="danger">Clear Review Journal</button>
-  </form> <!---->
+  <button type="button" id="create-btn"><a href='./CreatePage.html'></a>CREATE</button>
 </body>
 </html>
diff --git a/source/review.html b/source/review.html
deleted file mode 100644
index b9894ad..0000000
--- a/source/review.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Food Journal</title>
-    
-    <script src="assets/scripts/reviewpage.js" type="module"></script>
-</head>
-<body>
-    <h1>Current Review:</h1>
-    <main>
-    </main>
-</body>
-</html>
\ No newline at end of file
diff --git a/source/reviews.json b/source/reviews.json
deleted file mode 100644
index 0f36b32..0000000
--- a/source/reviews.json
+++ /dev/null
@@ -1,19 +0,0 @@
-[
-   {
-      "imgSrc": "https://cdn.vox-cdn.com/thumbor/Cj5J-5WqSCjlC2tWCOXEB536CJY=/0x0:1810x1182/1200x800/filters:focal(761x447:1049x735)/cdn.vox-cdn.com/uploads/chorus_image/image/69422966/Tacos_Lined_Up.0.png",
-      "imgAlt": "tacos pic",
-      "mealName": "Birria Tacos",
-      "restaurant": "Mike's Red Tacos",
-      "rating": 5,
-      "tags": ["delicious", "#worthit","omg"]
-   },
-   {
-      "imgSrc": "https://www.redwormcomposting.com/images/worm-burrito.JPG",
-      "imgAlt": "wolftown pic",
-      "mealName": "Carnitas Burrito",
-      "restaurant": "Wolftown UCSD",
-      "rating": 0,
-      "tags": ["gross", "why","no"]
-
-   }
-]
diff --git a/source/static/ReviewCard.css b/source/static/ReviewCard.css
index 2c69f0b..87b5958 100644
--- a/source/static/ReviewCard.css
+++ b/source/static/ReviewCard.css
@@ -81,3 +81,50 @@ main {
   background-color: rgb(254 171 171);
   border-color: red;
 }
+
+.hidden,
+.rating:not(:checked) > input { /* Hide radio circles while star rating */
+  display: none;
+}
+
+/* Unchecked stars */
+.rating:not(:checked) > label {
+  /* Make stars line up sideways and not vertically */
+  float: right;
+
+  /* Hide label text */
+  width: 1em;
+  overflow: hidden;
+  white-space: nowrap;
+
+  /* Star default color and size */
+  font-size: 200%;
+  line-height: 1.2;
+  color: #b3b3cc;
+}
+
+.rating > label:active {
+  position: relative;
+}
+
+.rating:not(:checked) > label::before {
+  content: "★";
+}
+
+/* Checked star color */
+.rating > input:checked ~ label {
+  color: #ffbf00;
+}
+
+.rating:not(:checked) > label:hover,
+.rating:not(:checked) > label:hover ~ label {
+  color: orangered;
+}
+
+.rating > input:checked + label:hover,
+.rating > input:checked ~ label:hover,
+.rating > input:checked + label:hover ~ label,
+.rating > input:checked ~ label:hover ~ label,
+.rating > label:hover ~ input:checked ~ label {
+  color: orangered;
+}
diff --git a/specs/adrs/111622-e2etesting-puppeteer.md b/specs/adrs/111622-e2etesting-puppeteer.md
new file mode 100644
index 0000000..4a1d3ce
--- /dev/null
+++ b/specs/adrs/111622-e2etesting-puppeteer.md
@@ -0,0 +1,19 @@
+# Use puppeteer for JS unit testing framework
+
+- Status: accept
+- Deciders: Arthur Lu, Marc Reta
+- Date: 11 / 16 / 22
+
+## Decision Drivers
+
+- Need end to end testing framework which runs headlessly and quickly
+- Framework should integrate well with Mocha, the existing unit testing framework
+- Framework should be easy to implement end to end tests with
+
+## Considered Options
+- puppeteer
+- selenium-webdriver
+
+## Decision Outcome
+
+Chosen Option: Puppeteer for its ease of use with mocha. 
\ No newline at end of file
