alu/cse110-fa22-group29
1
0
Fork 0
mirror of https://github.com/cse110-fa22-group29/cse110-fa22-group29.git synced 2024-11-13 22:36:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix js linting

Browse Source 
Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
Arthur Lu 2022-11-15 00:53:07 +00:00
parent 8354e561e5
commit 66dd92f0dc
6 changed files with 297 additions and 299 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
source/assets/scripts/ReviewCard.js
View File

@ -7,11 +7,11 @@ class ReviewCard extends HTMLElement {
super(); super();
let shadowEl = this.attachShadow({mode:'open'}); let shadowEl = this.attachShadow({mode:"open"});
let articleEl = document.createElement('article'); let articleEl = document.createElement("article");
let styleEl = document.createElement('style'); let styleEl = document.createElement("style");
styleEl.textContent = ` styleEl.textContent = `
* { * {
font-family: sans-serif; font-family: sans-serif;
@ -86,11 +86,11 @@ class ReviewCard extends HTMLElement {
shadowEl.append(articleEl); shadowEl.append(articleEl);
this.shadowEl = shadowEl; this.shadowEl = shadowEl;
//attach event listener to each recipe-card //attach event listener to each recipe-card
this.addEventListener('click', (event) => { this.addEventListener("click", (event) => {
console.log(event.target); console.log(event.target);
console.log(event.target.data); console.log(event.target.data);
//Option 1: sending current data to second html page using localStorage (could also just store index) //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("current", JSON.stringify(event.target.data));
window.location.assign("./ReviewDetails.html"); window.location.assign("./ReviewDetails.html");
/* /*
//Option 2: sending current data to second html page using string query w/ url (currently not storing value) //Option 2: sending current data to second html page using string query w/ url (currently not storing value)
@ -130,24 +130,24 @@ class ReviewCard extends HTMLElement {
if (!data) return; if (!data) return;
// Select the <article> we added to the Shadow DOM in the constructor // Select the <article> we added to the Shadow DOM in the constructor
let articleEl = this.shadowEl.querySelector('article'); let articleEl = this.shadowEl.querySelector("article");
// setting the article elements for the review card // setting the article elements for the review card
//image setup //image setup
let mealImg = document.createElement('img'); let mealImg = document.createElement("img");
mealImg.setAttribute('id', 'a-mealImg'); mealImg.setAttribute("id", "a-mealImg");
mealImg.setAttribute('src',data['mealImg']); mealImg.setAttribute("src",data["mealImg"]);
mealImg.setAttribute('alt',data['imgAlt']); mealImg.setAttribute("alt",data["imgAlt"]);
//meal name setup //meal name setup
let mealLabel = document.createElement('label'); let mealLabel = document.createElement("label");
mealLabel.setAttribute('id', 'a-mealName'); mealLabel.setAttribute("id", "a-mealName");
mealLabel.setAttribute('class','meal-name'); mealLabel.setAttribute("class","meal-name");
mealLabel.innerHTML = data['mealName']; mealLabel.innerHTML = data["mealName"];
//restaurant name setup //restaurant name setup
/* /*
//review page link //review page link
//giving it functionality to save the review card's info to session storage for loading the review page //giving it functionality to save the review card's info to session storage for loading the review page
let reviewLink = document.createElement('a'); let reviewLink = document.createElement('a');
@ -167,37 +167,37 @@ class ReviewCard extends HTMLElement {
sessionStorage.setItem('currReview', JSON.stringify(currReview)); sessionStorage.setItem('currReview', JSON.stringify(currReview));
}); });
*/ */
let restaurantLabel = document.createElement('label'); let restaurantLabel = document.createElement("label");
restaurantLabel.setAttribute('id', 'a-restaurant'); restaurantLabel.setAttribute("id", "a-restaurant");
restaurantLabel.setAttribute('class','restaurant-name'); restaurantLabel.setAttribute("class","restaurant-name");
restaurantLabel.innerHTML = data['restaurant']; restaurantLabel.innerHTML = data["restaurant"];
//comment section setup (display set to none) //comment section setup (display set to none)
let comments = document.createElement('p'); let comments = document.createElement("p");
comments.setAttribute('id', 'a-comments'); comments.setAttribute("id", "a-comments");
comments.style.display = 'none'; comments.style.display = "none";
comments.innerText = data['comments']; comments.innerText = data["comments"];
//other info: rating //other info: rating
let ratingDiv = document.createElement('div'); let ratingDiv = document.createElement("div");
ratingDiv.setAttribute('class', 'rating'); ratingDiv.setAttribute("class", "rating");
let starsImg = document.createElement('img'); let starsImg = document.createElement("img");
starsImg.setAttribute('id', 'a-rating'); starsImg.setAttribute("id", "a-rating");
starsImg.setAttribute('src', './source/assets/images/icons/'+data['rating']+'-star.svg'); starsImg.setAttribute("src", "./source/assets/images/icons/"+data["rating"]+"-star.svg");
starsImg.setAttribute('alt', data['rating'] +' stars'); starsImg.setAttribute("alt", data["rating"] +" stars");
starsImg.setAttribute('num', data['rating']); starsImg.setAttribute("num", data["rating"]);
ratingDiv.append(starsImg); ratingDiv.append(starsImg);
//added tags //added tags
let tagContainer = document.createElement('div'); let tagContainer = document.createElement("div");
tagContainer.setAttribute('class', 'tag-container'); tagContainer.setAttribute("class", "tag-container");
tagContainer.setAttribute('id', 'a-tags'); tagContainer.setAttribute("id", "a-tags");
tagContainer.setAttribute('list', data['tags']); tagContainer.setAttribute("list", data["tags"]);
if(data['tags']){ if(data["tags"]){
for (let i = 0; i < data['tags'].length; i++) { for (let i = 0; i < data["tags"].length; i++) {
let newTag = document.createElement('label'); let newTag = document.createElement("label");
newTag.setAttribute('class','tag'); newTag.setAttribute("class","tag");
newTag.innerHTML = data['tags'][i] + " "; newTag.innerHTML = data["tags"][i] + " ";
tagContainer.append(newTag); tagContainer.append(newTag);
} }
} }
@ -239,32 +239,32 @@ class ReviewCard extends HTMLElement {
// getting the article elements for the review card // getting the article elements for the review card
//get image //get image
let mealImg = this.shadowEl.getElementById('a-mealImg'); let mealImg = this.shadowEl.getElementById("a-mealImg");
dataContainer['mealImg'] = mealImg.getAttribute('src'); dataContainer["mealImg"] = mealImg.getAttribute("src");
dataContainer['imgAlt'] = mealImg.getAttribute('alt'); dataContainer["imgAlt"] = mealImg.getAttribute("alt");
//get meal name //get meal name
let mealLabel = this.shadowEl.getElementById('a-mealName'); let mealLabel = this.shadowEl.getElementById("a-mealName");
dataContainer['mealName'] = mealLabel.innerHTML; dataContainer["mealName"] = mealLabel.innerHTML;
//get comment section //get comment section
let comments = this.shadowEl.getElementById('a-comments'); let comments = this.shadowEl.getElementById("a-comments");
console.log(comments); console.log(comments);
dataContainer['comments'] = comments.innerText; dataContainer["comments"] = comments.innerText;
//get other info: rating //get other info: rating
let starsImg = this.shadowEl.getElementById('a-rating'); let starsImg = this.shadowEl.getElementById("a-rating");
dataContainer['rating'] = starsImg.getAttribute('num'); dataContainer["rating"] = starsImg.getAttribute("num");
//get restaurant name //get restaurant name
let restaurantLabel = this.shadowEl.getElementById('a-restaurant'); let restaurantLabel = this.shadowEl.getElementById("a-restaurant");
dataContainer['restaurant'] = restaurantLabel.innerHTML; dataContainer["restaurant"] = restaurantLabel.innerHTML;
//get tags //get tags
let tagContainer = this.shadowEl.getElementById('a-tags'); let tagContainer = this.shadowEl.getElementById("a-tags");
dataContainer['tags'] = tagContainer.getAttribute('list').split(","); dataContainer["tags"] = tagContainer.getAttribute("list").split(",");
return dataContainer; return dataContainer;
} }
} }
customElements.define('review-card', ReviewCard); customElements.define("review-card", ReviewCard);

86
source/assets/scripts/ReviewDetails.js
View File

@ -1,68 +1,66 @@
//reviewDetails.js //reviewDetails.js
import {getReviewsFromStorage, saveReviewsToStorage} from './localStorage.js'; import {getReviewsFromStorage, saveReviewsToStorage} from "./localStorage.js";
// Run the init() function when the page has loaded // Run the init() function when the page has loaded
window.addEventListener('DOMContentLoaded', init); window.addEventListener("DOMContentLoaded", init);
function init(){ function init(){
let main = document.querySelector('main');
let reviews = getReviewsFromStorage();
setupDelete(); setupDelete();
setupUpdate(); setupUpdate();
} }
function setupDelete(){ function setupDelete(){
let deleteBtn = document.getElementById('delete'); let deleteBtn = document.getElementById("delete");
let reviews = getReviewsFromStorage(); let reviews = getReviewsFromStorage();
let current = JSON.parse(sessionStorage.getItem('current')); let current = JSON.parse(sessionStorage.getItem("current"));
deleteBtn.addEventListener('click', function(){ deleteBtn.addEventListener("click", function(){
if(window.confirm("Are you sure you want to delete this entry?")){ if(window.confirm("Are you sure you want to delete this entry?")){
//delete function //delete function
if(current){ if(current){
console.log(current); console.log(current);
for(let i = 0; i < reviews.length; i++){ for(let i = 0; i < reviews.length; i++){
console.log(reviews[i]); console.log(reviews[i]);
if(reviews[i]['mealName'] == current['mealName'] && reviews[i]['restaurant'] == current['restaurant']){ if(reviews[i]["mealName"] == current["mealName"] && reviews[i]["restaurant"] == current["restaurant"]){
console.log("match found"); console.log("match found");
reviews.splice(i,1); reviews.splice(i,1);
saveReviewsToStorage(reviews); saveReviewsToStorage(reviews);
sessionStorage.removeItem('current'); sessionStorage.removeItem("current");
window.location.assign("./index.html"); window.location.assign("./index.html");
break; break;
} }
}; }
} }
} }
}); });
} }
function setupUpdate(){ function setupUpdate(){
let updateBtn = document.getElementById('update'); let updateBtn = document.getElementById("update");
let reviews = getReviewsFromStorage(); let reviews = getReviewsFromStorage();
let current = JSON.parse(sessionStorage.getItem('current')); let current = JSON.parse(sessionStorage.getItem("current"));
let form = document.getElementById('update-food-entry'); let form = document.getElementById("update-food-entry");
updateBtn.addEventListener('click', function(){ updateBtn.addEventListener("click", function(){
//update function //update function
if(current){ if(current){
console.log(current); console.log(current);
form.style.display = 'block'; form.style.display = "block";
let tagContainer = document.getElementById('tag-container-form'); let tagContainer = document.getElementById("tag-container-form");
console.log(document.querySelectorAll('#update-food-entry input')); console.log(document.querySelectorAll("#update-food-entry input"));
//Set value of each input element to current's values //Set value of each input element to current's values
document.getElementById('mealImg').defaultValue = current['mealImg']; document.getElementById("mealImg").defaultValue = current["mealImg"];
document.getElementById('imgAlt').defaultValue = current['imgAlt']; document.getElementById("imgAlt").defaultValue = current["imgAlt"];
document.getElementById('mealName').defaultValue = current['mealName']; document.getElementById("mealName").defaultValue = current["mealName"];
document.getElementById('comments').textContent = current['comments']; document.getElementById("comments").textContent = current["comments"];
document.getElementById('rating-' + `${current['rating']}`).checked = true; document.getElementById("rating-" + `${current["rating"]}`).checked = true;
document.getElementById('restaurant').defaultValue = current['restaurant']; document.getElementById("restaurant").defaultValue = current["restaurant"];
if(current['tags']){ if(current["tags"]){
for (let i = 0; i < current['tags'].length; i++) { for (let i = 0; i < current["tags"].length; i++) {
let newTag = document.createElement('label'); let newTag = document.createElement("label");
newTag.setAttribute('class','tag'); newTag.setAttribute("class","tag");
newTag.innerHTML = current['tags'][i] + " "; newTag.innerHTML = current["tags"][i] + " ";
newTag.addEventListener('click',()=> { newTag.addEventListener("click",()=> {
tagContainer.removeChild(newTag); tagContainer.removeChild(newTag);
}); });
tagContainer.append(newTag); tagContainer.append(newTag);
@ -70,7 +68,7 @@ function setupUpdate(){
} }
//Take formdata values as newData when submit //Take formdata values as newData when submit
form.addEventListener('submit', function(){ form.addEventListener("submit", function(){
/* /*
* User submits the form for their review. * User submits the form for their review.
* We create reviewCard and put in storage * We create reviewCard and put in storage
@ -84,42 +82,42 @@ function setupUpdate(){
newData[`${key}`] = `${value}`; newData[`${key}`] = `${value}`;
} }
} }
newData['tags'] = []; newData["tags"] = [];
let tags = document.querySelectorAll('.tag'); let tags = document.querySelectorAll(".tag");
for(let i = 0; i < tags.length; i ++) { for(let i = 0; i < tags.length; i ++) {
newData['tags'].push(tags[i].innerHTML); newData["tags"].push(tags[i].innerHTML);
tagContainer.removeChild(tags[i]); tagContainer.removeChild(tags[i]);
} }
for(let i = 0; i < reviews.length; i++){ for(let i = 0; i < reviews.length; i++){
console.log(reviews[i]); console.log(reviews[i]);
if(reviews[i]['mealName'] == current['mealName'] && reviews[i]['restaurant'] == current['restaurant']){ if(reviews[i]["mealName"] == current["mealName"] && reviews[i]["restaurant"] == current["restaurant"]){
console.log("match found"); console.log("match found");
reviews.splice(i,1,newData); reviews.splice(i,1,newData);
saveReviewsToStorage(reviews); saveReviewsToStorage(reviews);
sessionStorage.setItem('current', JSON.stringify(newData)); sessionStorage.setItem("current", JSON.stringify(newData));
break; break;
} }
}; }
form.style.display = 'none'; form.style.display = "none";
}); });
let tagAddBtn = document.getElementById('tagAdd'); let tagAddBtn = document.getElementById("tagAdd");
tagAddBtn.addEventListener('click', ()=> { tagAddBtn.addEventListener("click", ()=> {
let tagField = document.getElementById('tag-form'); let tagField = document.getElementById("tag-form");
if (tagField.value.length > 0) { if (tagField.value.length > 0) {
let tagLabel = document.createElement('label'); let tagLabel = document.createElement("label");
tagLabel.innerHTML = tagField.value; tagLabel.innerHTML = tagField.value;
tagLabel.setAttribute('class','tag'); tagLabel.setAttribute("class","tag");
tagLabel.addEventListener('click',()=> { tagLabel.addEventListener("click",()=> {
tagContainer.removeChild(tagLabel); tagContainer.removeChild(tagLabel);
}); });
tagContainer.append(tagLabel); tagContainer.append(tagLabel);
tagField.value = ''; tagField.value = "";
} }
}); });
} }

14
source/assets/scripts/ReviewPage.js
View File

@ -1,13 +1,13 @@
// Run the init() function when the page has loaded // Run the init() function when the page has loaded
window.addEventListener('DOMContentLoaded', init); window.addEventListener("DOMContentLoaded", init);
function init() { function init() {
let result = sessionStorage.getItem('currReview') let result = sessionStorage.getItem("currReview");
let main = document.querySelector('main'); let main = document.querySelector("main");
main.innerHTML = result main.innerHTML = result;
let p = document.createElement('p') let p = document.createElement("p");
p.innerHTML = JSON.parse(result)['comments'] p.innerHTML = JSON.parse(result)["comments"];
main.append(p) main.append(p);
} }

4
source/assets/scripts/localStorage.js
View File

@ -2,7 +2,7 @@
* @returns {Array<Object>} An array of reviews found in localStorage * @returns {Array<Object>} An array of reviews found in localStorage
*/ */
export function getReviewsFromStorage() { export function getReviewsFromStorage() {
let result = JSON.parse(localStorage.getItem('reviews')) let result = JSON.parse(localStorage.getItem("reviews"));
if (result) { if (result) {
return result; return result;
} }
@ -15,5 +15,5 @@ export function getReviewsFromStorage() {
* @param {Array<Object>} reviews An array of reviews * @param {Array<Object>} reviews An array of reviews
*/ */
export function saveReviewsToStorage(reviews) { export function saveReviewsToStorage(reviews) {
localStorage.setItem('reviews', JSON.stringify(reviews)); localStorage.setItem("reviews", JSON.stringify(reviews));
} }

4
source/assets/scripts/localStorage.test.js
View File

@ -1,4 +1,4 @@
import {strict as assert} from "node:assert" import {strict as assert} from "node:assert";
import {describe, it, beforeEach} from "mocha"; import {describe, it, beforeEach} from "mocha";
import {saveReviewsToStorage, getReviewsFromStorage} from "./localStorage.js"; import {saveReviewsToStorage, getReviewsFromStorage} from "./localStorage.js";
@ -40,7 +40,7 @@ describe("test app localStorage interaction", () => {
"rating": i, "rating": i,
"tags": [`tag ${3*i}`, `tag ${3*i + 1}`, `tag ${3*i + 2}`] "tags": [`tag ${3*i}`, `tag ${3*i + 1}`, `tag ${3*i + 2}`]
} }
) );
saveReviewsToStorage(reviews); saveReviewsToStorage(reviews);
assert.deepEqual(getReviewsFromStorage(), reviews); assert.deepEqual(getReviewsFromStorage(), reviews);
} }

52
source/assets/scripts/main.js
View File

@ -1,8 +1,8 @@
// main.js // main.js
import {getReviewsFromStorage, saveReviewsToStorage} from './localStorage.js'; import {getReviewsFromStorage, saveReviewsToStorage} from "./localStorage.js";
// Run the init() function when the page has loaded // Run the init() function when the page has loaded
window.addEventListener('DOMContentLoaded', init); window.addEventListener("DOMContentLoaded", init);
function init() { function init() {
// Get the reviews from localStorage // Get the reviews from localStorage
@ -17,9 +17,9 @@ function init() {
* @param {Array<Object>} reviews An array of reviews * @param {Array<Object>} reviews An array of reviews
*/ */
function addReviewsToDocument(reviews) { function addReviewsToDocument(reviews) {
let mainEl = document.querySelector('main'); let mainEl = document.querySelector("main");
reviews.forEach(review => { reviews.forEach(review => {
let newReview = document.createElement('review-card'); let newReview = document.createElement("review-card");
newReview.data = review; newReview.data = review;
//TODO: want to append it to whatever the box is in layout //TODO: want to append it to whatever the box is in layout
mainEl.append(newReview); mainEl.append(newReview);
@ -34,16 +34,16 @@ function addReviewsToDocument(reviews) {
function initFormHandler() { function initFormHandler() {
//btn to create form (could be its own function?) //btn to create form (could be its own function?)
let createBtn = document.getElementById('create'); let createBtn = document.getElementById("create");
createBtn.addEventListener('click', function(){ createBtn.addEventListener("click", function(){
window.location.assign('./CreatePage.html'); window.location.assign("./CreatePage.html");
}); });
//accessing form components //accessing form components
let tagContainer = document.getElementById('tag-container-form'); let tagContainer = document.getElementById("tag-container-form");
let form = document.querySelector('form'); let form = document.querySelector("form");
form.addEventListener('submit', function(){ form.addEventListener("submit", function(){
/* /*
* User submits the form for their review. * User submits the form for their review.
* We create reviewCard and put in storage * We create reviewCard and put in storage
@ -57,20 +57,20 @@ function initFormHandler() {
reviewObject[`${key}`] = `${value}`; reviewObject[`${key}`] = `${value}`;
} }
} }
reviewObject['tags'] = []; reviewObject["tags"] = [];
let tags = document.querySelectorAll('.tag'); let tags = document.querySelectorAll(".tag");
for(let i = 0; i < tags.length; i ++) { for(let i = 0; i < tags.length; i ++) {
reviewObject['tags'].push(tags[i].innerHTML); reviewObject["tags"].push(tags[i].innerHTML);
tagContainer.removeChild(tags[i]); tagContainer.removeChild(tags[i]);
} }
let newReview = document.createElement('review-card'); let newReview = document.createElement("review-card");
newReview.data = reviewObject; newReview.data = reviewObject;
//TODO: want to append it to whatever the box is in layout //TODO: want to append it to whatever the box is in layout
let mainEl = document.querySelector('main'); let mainEl = document.querySelector("main");
mainEl.append(newReview); mainEl.append(newReview);
let storedReviews = getReviewsFromStorage(); let storedReviews = getReviewsFromStorage();
@ -80,14 +80,14 @@ function initFormHandler() {
}); });
// DEV-MODE: for testing purposes // DEV-MODE: for testing purposes
let clearBtn = document.querySelector('.danger'); let clearBtn = document.querySelector(".danger");
clearBtn.addEventListener('click', function() { clearBtn.addEventListener("click", function() {
localStorage.clear(); localStorage.clear();
let mainEl = document.querySelector('main'); let mainEl = document.querySelector("main");
while (mainEl.firstChild) { while (mainEl.firstChild) {
mainEl.removeChild(mainEl.firstChild); mainEl.removeChild(mainEl.firstChild);
} }
let deleteTags = document.querySelectorAll('.tag'); let deleteTags = document.querySelectorAll(".tag");
for(let i = 0; i < deleteTags.length; i ++) { for(let i = 0; i < deleteTags.length; i ++) {
tagContainer.removeChild(deleteTags[i]); tagContainer.removeChild(deleteTags[i]);
} }
@ -98,19 +98,19 @@ function initFormHandler() {
}); });
let tagAddBtn = document.getElementById('tagAdd'); let tagAddBtn = document.getElementById("tagAdd");
tagAddBtn.addEventListener('click', ()=> { tagAddBtn.addEventListener("click", ()=> {
let tagField = document.getElementById('tag-form'); let tagField = document.getElementById("tag-form");
if (tagField.value.length > 0) { if (tagField.value.length > 0) {
let tagLabel = document.createElement('label'); let tagLabel = document.createElement("label");
tagLabel.innerHTML = tagField.value; tagLabel.innerHTML = tagField.value;
tagLabel.setAttribute('class','tag'); tagLabel.setAttribute("class","tag");
tagLabel.addEventListener('click',()=> { tagLabel.addEventListener("click",()=> {
tagContainer.removeChild(tagLabel); tagContainer.removeChild(tagLabel);
}); });
tagContainer.append(tagLabel); tagContainer.append(tagLabel);
tagField.value = ''; tagField.value = "";
} }
}); });