diff --git a/.github/workflows/js-unittest.yml b/.github/workflows/js-unittest.yml index 5c07e35..918ce70 100644 --- a/.github/workflows/js-unittest.yml +++ b/.github/workflows/js-unittest.yml @@ -24,6 +24,6 @@ jobs: - name: Install dependencies run: sudo npm install - name: Start local http server - run: sudo npm run 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/source/CreatePage.html b/source/CreatePage.html index 64dfe78..bc37e7a 100644 --- a/source/CreatePage.html +++ b/source/CreatePage.html @@ -14,12 +14,13 @@ - - + + +
Pic: @@ -69,8 +70,7 @@
- - +
diff --git a/source/ReviewDetails.html b/source/ReviewDetails.html index 74b6365..c790b4e 100644 --- a/source/ReviewDetails.html +++ b/source/ReviewDetails.html @@ -19,6 +19,7 @@
+
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..c5c641f --- /dev/null +++ b/source/assets/scripts/CreatePage.js @@ -0,0 +1,66 @@ +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"); + + 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}`; + } + } + 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("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/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 8447ebe..b07282b 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); @@ -11,114 +11,95 @@ function init(){ function setupDelete(){ let deleteBtn = document.getElementById("delete-btn"); - let reviews = getReviewsFromStorage(); - let current = JSON.parse(sessionStorage.getItem("current")); + 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-btn"); - let reviews = getReviewsFromStorage(); - let current = JSON.parse(sessionStorage.getItem("current")); + 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("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 = ""; - } - }); - } + }); + + 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} 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} 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 90ed2b7..8f87ce0 100644 --- a/source/assets/scripts/localStorage.test.js +++ b/source/assets/scripts/localStorage.test.js @@ -1,49 +1,106 @@ import {strict as assert} from "node:assert"; -import {describe, it, beforeEach} from "mocha"; -import {saveReviewsToStorage, getReviewsFromStorage} from "./localStorage.js"; +import {describe, it, before, after} from "mocha"; +import {newReviewToStorage, getReviewFromStorage, updateReviewToStorage, deleteReviewFromStorage, getAllReviewsFromStorage} from "./localStorage.js"; describe("test app localStorage interaction", () => { - beforeEach(() => { + before(() => { localStorage.clear(); }); - it("get after init", () => { - assert.deepEqual(getReviewsFromStorage(), []); + 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("store one then get", () => { - let reviews = [{ + + 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.js b/source/assets/scripts/main.js index 9d37c44..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
element addReviewsToDocument(reviews); // Add the event listeners to the form elements initFormHandler(); } + /** * @param {Array} reviews An array of reviews */ @@ -33,87 +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"); - - 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}`; - } - } - 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 4418ea0..b8d4438 100644 --- a/source/index.html +++ b/source/index.html @@ -22,58 +22,6 @@
- -
-
- Pic: - - -
-
- - Meal: - - -
- -
- Rating: - - - - - -
- -
- Other Info: - - - -
- - -
+ 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 @@ - - - - - - - Food Journal - - - - -

Current Review:

-
-
- - \ 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; +}