Merge pull request #114 from CODE-REFINARY/main

Aesthetic Adjustments, Name adjusted to "My Meal Journal"

.github/workflows/deploy-githubpages.yml

@@ -38,8 +38,8 @@ jobs:
             - name: Checkout
               uses: actions/checkout@v3
             - name: Install dependencies
-              run: sudo npm install
-            - name: Run tests
+              run: sudo npm install -g jsdoc
+            - name: Run js-doc
               run: sudo npm run js-doc
             - name: Setup Pages
               uses: actions/configure-pages@v2

.github/workflows/js-unittest.yml

@@ -22,8 +22,8 @@ jobs:
             - name: Checkout
               uses: actions/checkout@v3
             - name: Install dependencies
-              run: sudo npm install
+              run: npm install
             - name: Start local http server
-              run: sudo npm run http-server &
-            - name: Run tests
-              run: sudo npm test
+              run: npm run http-server &
+            - name: Run tests with coverage
+              run: npm run coverage

.gitignore

@@ -1,4 +1,6 @@
 **/.devcontainer/*
 **/node_modules/*
 **/package-lock.json
-**/*.vscode/*
+**/.vscode/*
+**/.nyc_output/*
+**/coverage/*

README.md

@@ -1,5 +1,14 @@
-# cse110-fa22-group29
+# My Meal Journal
 
+My Meal Journal is a local-first journaling application on the web designed for recording your standout meal experiences. The app utilizes local storage in the browser to store invidual journal entries with support for tagging, filtering, image posting, and more!<br>
+
+The site is completely static with no front-end or back-end libraries employed. As such cross browser support is relatively strong and site performance is very reliable.
+
+Access the Site Here:<br>
+[My Meal Journal](https://cse110-fa22-group29.github.io/cse110-fa22-group29/)
+
+Meet the Team:<br>
 [Team Page Link](https://github.com/cse110-fa22-group29/cse110-fa22-group29/blob/main/admin/team.md)
 
-[Food Journal](https://cse110-fa22-group29.github.io/cse110-fa22-group29/)
+If you enjoyed the site or have suggestion for how we can improve it don't hesitate to reach out to the developers!<br>
+Crafted with ❤️ and care by students of the University of California San Diego.

admin/team.md

@@ -26,7 +26,7 @@
 
 -   #### About Me:
     -   Hello World! I'm a fifth year (3rd year transfer) computer science major from the North Bay Area. Web development has been a big focus of mine since taking Prof Powell's 134B last winter and I'm stoked to be back in the "full stack" developer seat for 110. I am the second the team lead and in addition to my love for leading and working on team projects I am also fascinated by web development technologies including containerization, infrastructure as code (IaC), software as a service (SAAS), and web-based encryption (security). I am also an avid DJ and the traininer manmager for the DJ club on campus. This quarter is shaping up to be a memorable one!
--   #### Link to Github: https://github.com/look-its-ashton
+-   #### Link to Github: https://github.com/CODE-REFINARY
 
 ### **Gavyn Ezell**
 

admin/videos/final-videos.md

@@ -0,0 +1,6 @@
+# Final Video Links
+## Link to Public Video:
+https://www.youtube.com/watch?v=6o8SH_964Fo
+
+## Link to Private Video:
+https://www.youtube.com/watch?v=-iu8kXFZnCw

package.json

@@ -4,6 +4,7 @@
 	"type": "module",
 	"scripts": {
 		"test": "mocha --recursive --require mock-local-storage './{,!(node_modules)/**}/*.test.js'",
+		"coverage": "c8 --check-coverage --lines 90 --functions 90 --branches 90 npm run test",
 		"lint-js": "eslint **/*.js",
 		"fix-js": "eslint --fix **/*.js",
 		"lint-html": "htmlhint **/*.html",
@@ -11,9 +12,11 @@
 		"fix-css": "stylelint --fix **/*.css",
 		"http-server": "http-server source",
 		"lint-prettier": "prettier --check .",
-		"fix-prettier": "prettier --write ."
+		"fix-prettier": "prettier --write .",
+		"js-doc": "jsdoc -d source/docs/ -r source/"
 	},
 	"devDependencies": {
+		"c8": "^7.12.0",
 		"eslint": "^8.27.0",
 		"htmlhint": "1.1.4",
 		"http-server": "",

source/CreatePage.html

@@ -22,7 +22,7 @@
 		<!-- 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>
+			<h1>My Meal Journal</h1>
 			<img src="./assets/images/Logo.png" alt="logo" />
 		</div>
 	</header>

source/ReviewDetails.html

@@ -13,8 +13,6 @@
 		<script src="assets/scripts/ReviewCard.js" type="module"></script>
 
 		<!-- Main Stylesheets & Scripts -->
-		<!-- Temporarily commented out reset.css due to furthur discussion needed on the values of the default config-->
-		<!-- <link rel="stylesheet" href="/static/reset.css" /> -->
 		<link rel="stylesheet" href="./static/ReviewDetails.css" />
 		<link rel="stylesheet" href="./static/Form.css" />
 		<script src="assets/scripts/ReviewDetails.js" type="module"></script>
@@ -23,7 +21,7 @@
 		<header>
 			<div class="top-bar">
 				<img src="./assets/images/Logo.png" alt="logo" />
-				<h1>Food Journal</h1>
+				<h1>My Meal Journal</h1>
 				<img src="./assets/images/Logo.png" alt="logo" />
 			</div>
 		</header>
@@ -139,7 +137,7 @@
 				</fieldset>
 
 				<button type="submit" id="save-btn" value="Submit">Save</button>
-				<input type="button" value="Cancel" id="home-btn" onclick="window.location.assign('./index.html')" />
+				<input type="button" value="Cancel" id="cancel-btn" />
 			</form>
 		</div>
 	</body>

source/assets/scripts/CreatePage.js

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

source/assets/scripts/ReviewCard.js

@@ -109,8 +109,6 @@ class ReviewCard extends HTMLElement {
 
 		// Attach event listener to each review-card
 		this.addEventListener("click", (event) => {
-			console.log(event.target);
-			console.log(event.target.reviewId);
 			// Saves the ID for corresponding review on new page (for data retrieval)
 			sessionStorage.setItem("currID", JSON.stringify(event.target.data.reviewID));
 			// Goes to the new page for the review
@@ -251,7 +249,6 @@ class ReviewCard extends HTMLElement {
 
 		// Get comment section
 		let comments = this.shadowEl.getElementById("a-comments");
-		console.log(comments);
 		dataContainer["comments"] = comments.innerText;
 
 		// Get rating

source/assets/scripts/ReviewDetails.js

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

source/assets/scripts/homepage.js

@@ -1,4 +1,4 @@
-// main.js
+// homepage.js
 import { getIDsByTag, getIDsFromStorage, getReviewFromStorage, getTopIDsFromStorage } from "./localStorage.js";
 
 // Run the init() function when the page has loaded
@@ -32,8 +32,6 @@ function initFormHandler() {
 	let searchBtn = document.getElementById("search-btn");
 	let searchTag = null;
 	//adding search functionality
-	//TODO: Add ability to enter without refresh of search bar
-	//filter by selected tag when button clicked
 	searchBtn.addEventListener("click", function () {
 		searchTag = searchField.value;
 		sortAndFilter(searchTag);
@@ -101,6 +99,7 @@ function sortAndFilter(searchTag) {
  */
 function loadReviews(index, reviewIDs) {
 	let reviewBox = document.getElementById("review-container");
+	let footer = document.querySelector("footer");
 	// label if there are no reviews to display
 	if (reviewIDs.length == 0) {
 		let emptyLabel = document.createElement("label");
@@ -116,7 +115,7 @@ function loadReviews(index, reviewIDs) {
 	let moreBtn = document.getElementById("more-btn");
 	//delete load more button if exists
 	if (moreBtn) {
-		reviewBox.removeChild(moreBtn);
+		footer.removeChild(moreBtn);
 	}
 	let reviewArr = [];
 	//check if there are more than 9 reviews left
@@ -140,10 +139,11 @@ function loadReviews(index, reviewIDs) {
 		moreBtn.addEventListener("click", function () {
 			loadReviews(index + 9, reviewIDs);
 		});
-		reviewBox.append(moreBtn);
+		footer.append(moreBtn);
 	}
 }
 
+//setting up service worker
 const registerServiceWorker = async () => {
 	if ("serviceWorker" in navigator) {
 		try {

source/assets/scripts/main.e2e.test.js

@@ -15,7 +15,6 @@ describe("test App end to end", async () => {
 			root = false;
 		}
 
-		//browser = await puppeteer.launch({headless: false, slowMo: 250, args: root ? ['--no-sandbox'] : undefined});
 		browser = await puppeteer.launch({ args: root ? ["--no-sandbox"] : undefined });
 		page = await browser.newPage();
 		try {

source/index.html

@@ -13,17 +13,15 @@
 		<script src="assets/scripts/ReviewCard.js" type="module"></script>
 
 		<!-- Main Stylesheets & Scripts -->
-		<!-- Temporarily commented out reset.css due to furthur discussion needed on the values of the default config-->
-		<!-- <link rel="stylesheet" href="/static/reset.css" /> -->
 		<link rel="stylesheet" href="./static/homepage.css" />
-		<script src="assets/scripts/main.js" type="module"></script>
+		<script src="assets/scripts/homepage.js" type="module"></script>
 	</head>
 
 	<body>
 		<header>
 			<div class="top-bar">
 				<img src="./assets/images/Logo.png" alt="logo" />
-				<h1>Food Journal</h1>
+				<h1>My Meal Journal</h1>
 				<img src="./assets/images/Logo.png" alt="logo" />
 			</div>
 		</header>
@@ -38,7 +36,7 @@
 								<option value="recent">Most Recent</option>
 								<option value="top">Top Rated</option>
 							</select>
-							<input type="search" id="search-bar" name="searchBar" placeholder="Search tags..." />
+							<input type="search" id="search-bar" name="searchBar" placeholder="Search by tags..." />
 							<button id="clear-search">Clear Search</button>
 						</form>
 						<img src="./assets/images/search_button.png" alt="SEARCH BTN" id="search-btn" />
@@ -61,5 +59,6 @@
 				<div style="width: 20%"></div>
 			</div>
 		</main>
+		<footer></footer>
 	</body>
 </html>

source/static/CreatePage.css

@@ -19,6 +19,8 @@ body {
 	align-self: center;
 	padding-left: 2.5%;
 	padding-right: 2.5%;
+	width: 7.5%;
+	height: 7.5%;
 }
 
 .top-bar > h1 {

source/static/ReviewDetails.css

@@ -23,6 +23,8 @@ h1 {
 	align-self: center;
 	padding-left: 2.5%;
 	padding-right: 2.5%;
+	width: 7.5%;
+	height: 7.5%;
 }
 
 .top-bar > h1 {

source/static/homepage.css

@@ -23,6 +23,8 @@ body {
 	align-self: center;
 	padding-left: 2.5%;
 	padding-right: 2.5%;
+	width: 7.5%;
+	height: 7.5%;
 }
 
 .top-bar > h1 {
@@ -118,3 +120,8 @@ img#create-btn-invis {
 	background-color: #f1f1f1;
 	text-align: center;
 }
+
+footer {
+	display: flex;
+	justify-content: center;
+}

source/sw.js

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