From 6ce15a094e30ab4a541535f8f2220674b8cb5767 Mon Sep 17 00:00:00 2001 From: d7hernan <83631798+d7hernan@users.noreply.github.com> Date: Sun, 20 Nov 2022 16:27:27 -0800 Subject: [PATCH] css and js for ReviewDetails Co-authored-by: Kara Hoagland Co-authored-by: Arthur Lu --- source/ReviewDetails.html | 36 ++++++- source/assets/scripts/ReviewDetails.js | 48 ++++++++- source/assets/scripts/localStorage.js | 3 +- source/index.html | 1 + source/static/ReviewCard.css | 130 ------------------------- source/static/ReviewDetails.css | 93 ++++++++++++++++++ 6 files changed, 174 insertions(+), 137 deletions(-) delete mode 100644 source/static/ReviewCard.css create mode 100644 source/static/ReviewDetails.css diff --git a/source/ReviewDetails.html b/source/ReviewDetails.html index 552c2f3..66c9a77 100644 --- a/source/ReviewDetails.html +++ b/source/ReviewDetails.html @@ -10,20 +10,49 @@ + - + +
+ logo +

Food Journal

+ +
+ + +
+

Cucumber Salad

+
+ +
+ + photo + +
+ +
+
+ +
+ +

The food was good

+
+
- > diff --git a/source/assets/scripts/ReviewDetails.js b/source/assets/scripts/ReviewDetails.js index 2f560f7..df116a3 100644 --- a/source/assets/scripts/ReviewDetails.js +++ b/source/assets/scripts/ReviewDetails.js @@ -5,10 +5,54 @@ import {deleteReviewFromStorage, getReviewFromStorage, updateReviewToStorage} fr window.addEventListener("DOMContentLoaded", init); function init(){ + setupInfo(); setupDelete(); setupUpdate(); } +function setupInfo(){ + let currID = JSON.parse(sessionStorage.getItem("currID")); + let currReview = getReviewFromStorage(currID); + + //meal image + let mealImg = document.getElementById("d-mealImg"); + mealImg.setAttribute("alt", currReview["imgAlt"]); + if(currReview["mealImg"] != ""){ + mealImg.setAttribute("src",currReview["mealImg"]); + } + else{ + mealImg.setAttribute("src", "./assets/images/icons/plate_with_cutlery.png"); + } + + //meal name + let mealLabel = document.getElementById("d-mealName"); + mealLabel.innerHTML = currReview["mealName"]; + + //restaurant name + /*let restaurantLabel = document.getElementById("d-restaurant"); + restaurantLabel.innerHTML = currReview["restaurant"]; + + //comments + let comments = document.getElementById("d-comments"); + comments.innerText = currReview["comments"]; + */ + //rating + let starsImg = document.getElementById("d-rating"); + starsImg.setAttribute("src", "./assets/images/icons/"+currReview["rating"]+"-star.svg"); + starsImg.setAttribute("alt", currReview["rating"] +" stars"); + /* + //tags + let tagContainer = document.getElementById("d-tags"); + if(currReview["tags"]){ + for (let i = 0; i < currReview["tags"].length; i++) { + let newTag = document.createElement("label"); + newTag.setAttribute("class","tag"); + newTag.innerHTML = currReview["tags"][i]; + tagContainer.append(newTag); + } + }*/ +} + function setupDelete(){ let deleteBtn = document.getElementById("delete-btn"); let currID = JSON.parse(sessionStorage.getItem("currID")); @@ -26,11 +70,11 @@ function setupUpdate(){ let currID = JSON.parse(sessionStorage.getItem("currID")); let currReview = getReviewFromStorage(currID); let form = document.getElementById("update-food-entry"); + let updateDiv = document.getElementById("update-form-div"); updateBtn.addEventListener("click", function(){ //update function - //form.style.display = "block"; - form.classList.remove("hidden"); + updateDiv.style.display = "block"; let tagContainer = document.getElementById("tag-container-form"); //Set value of each input element to current's values diff --git a/source/assets/scripts/localStorage.js b/source/assets/scripts/localStorage.js index 20be650..cab6447 100644 --- a/source/assets/scripts/localStorage.js +++ b/source/assets/scripts/localStorage.js @@ -17,8 +17,7 @@ export function newReviewToStorage(review){ localStorage.setItem("activeIDS", JSON.stringify(tempIdArr)); //increment nextID for next review creation - nextReviewId++; - localStorage.setItem("nextID", JSON.stringify(nextReviewId)); + localStorage.setItem("nextID", JSON.stringify(nextReviewId + 1)); return nextReviewId; } diff --git a/source/index.html b/source/index.html index 96cbe6f..6339ecd 100644 --- a/source/index.html +++ b/source/index.html @@ -36,6 +36,7 @@ ---> +
diff --git a/source/static/ReviewCard.css b/source/static/ReviewCard.css deleted file mode 100644 index 87b5958..0000000 --- a/source/static/ReviewCard.css +++ /dev/null @@ -1,130 +0,0 @@ -/* main.css */ - -* { - font-family: sans-serif; -} - -body { - height: 100%; - width: 100%; -} - -fieldset { - border: 2px solid rgb(214 214 214); - box-sizing: border-box; - display: block; - width: max-content; -} - -form button { - display: block; - margin-top: 5px; -} - -label[for="ingredients"] p { - margin: 0; -} - -label[for="numRatings"] { - margin: 10px 0 0; -} - -label[for^="rating"] { - padding-right: 10px; -} - -label:not([for^="rating"]) { - display: block; - margin-bottom: 5px; -} - -main { - column-gap: 10px; - display: flex; - flex-wrap: wrap; - height: auto; - max-width: 660px; - row-gap: 10px; - width: 100%; -} - -.tag-container { - display: flex; - flex-flow: row wrap; -} - -.tag { - background-color: grey; - border-radius: 7px; - color: white; - padding-right: 7px; - padding-left: 7px; - margin: 3px; -} - -.tag::before { - display: inline-block; - content: "x"; - height: 15px; - width: 15px; - margin-right: 4px; - text-align: center; - color: white; - cursor: pointer; -} - -.tag:hover::before { - color: red; -} - -.danger { - 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/source/static/ReviewDetails.css b/source/static/ReviewDetails.css new file mode 100644 index 0000000..1a2c728 --- /dev/null +++ b/source/static/ReviewDetails.css @@ -0,0 +1,93 @@ +/* ReviewDetails.css */ + +body{ + background-color: #13323b; +} + +h1 { + text-align: center; +} +.Top-Bar{ + margin-top: -8cm; +} +.Top-Bar > img{ + position: relative; + top: 7.85cm; +} +.Top-Bar > h1{ + position: relative; + top: 2.2cm; + font-size: 3cm; + color: #EAA9BC + +} +.Top-Bar > form{ + position: relative; + left: 32cm; +} + +.journal-form { + font-size: 120%; + width: 50%; + display: none; + margin: auto; + color: #ccb3bb; + border: 3px solid rgb(7, 0, 0); + background-color: #b52754; +} + +.meal-name { + font-size: 150%; + margin: left; + width: 50%; + border: 3px; + color: rgb(228, 119, 119); + text-align: left; +} + +.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; +} \ No newline at end of file