alu/cse110-fa22-group29
1
0 Fork 0
mirror of https://github.com/cse110-fa22-group29/cse110-fa22-group29.git synced 2026-10-11 20:18:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #84 from cse110-fa22-group29/sprint-2-css-review-details

Browse Source 
Sprint 2 css review details
This commit is contained in:
Arthur Lu authored and GitHub committed 2022-11-21 17:20:36 -08:00
2 parents 5a05741e08 9f9ac19b71
commit 63a7d5ce1f
31 files changed
+626 -593
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

source/CreatePage.html
+60 -55
View File
@@ -7,6 +7,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Food Journal</title>
<!--Add Favicon-->
<link rel="icon" type="image/x-icon" href="./assets/images/favicon.ico">
<!-- Recipe Card Custom Element -->
<script src="assets/scripts/ReviewCard.js" type="module"></script>
@@ -15,72 +18,74 @@
<!-- 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" />
<link rel="icon" href="./assets/images/icons/favicon.ico">
<link rel="stylesheet" href="./static/Form.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')">
<div class ="top-bar">
<img src ="./assets/images/icons/Logo.png" alt="logo" />
<header>
<div class="top-bar">
<img src ="./assets/images/Logo.png" alt="logo" />
<h1> Food Journal </h1>
<img src ="./assets/images/Logo.png" alt="logo" />
</div>
</header>
<body>
<div class="journal-form">
<h1>New Entry </h1>
<h1>New Entry</h1>
<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" accept="image/*" 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" 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>
<legend>PICTURE:</legend>
<select id="select" name="select">
<option value="file">File Upload</option>
<option value="url">From an URL</option>
</select>
<label for="mealImage" id="source">
<input type="file" accept="image/*" id="mealImg" name="mealImg">
</label>
</fieldset>
<fieldset>
<legend>MEAL NAME:</legend>
<label for="Name: "> <input type="text" id="mealName" name="mealName" required> </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="tag-add-btn">Add Tag</button>
</label>
<fieldset>
<legend>RESTAURANT NAME:</legend>
<label for="Name:"> <input type="text" id="restaurant" name="restaurant" required> </label>
</fieldset>
<fieldset>
<legend>RATING:</legend>
<div style="display: flex; justify-content: flex-start; align-items: center;">
<div class="rating">
<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>
</div>
</div>
</fieldset>
<fieldset>
<legend>COMMENTS:</legend>
<textarea name="comments" id="comments" rows="5" style="resize: none; width: 100%;"></textarea>
</fieldset>
</fieldset>
<button type="submit" id="save-btn" value="Submit">Save Review</button>
<fieldset>
<legend>TAGS: (ex. cuisine, distance, cost, etc)</legend>
<input type="text" id="tag-form" name="tag-form">
<div class='tag-container' id="tag-container-form">
</div>
<button type="button" id="tag-add-btn"> + </button>
</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')">
</form>
</div>
</body>
source/ReviewDetails.html
+97 -87
View File
@@ -6,106 +6,116 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Food Journal</title>
<!--Add Favicon-->
<link rel="icon" type="image/x-icon" href="./assets/images/icons/favicon.ico">
<!-- Recipe Card Custom Element -->
<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>
</head>
<body>
<div class ="top-bar">
<img src ="./assets/images/icons/Logo.png" alt="logo" />
<h1 style="font-family:'Lucida Sans'"> Food Journal </h1>
</div>
<!--- meal -->
<div class = "meal-name">
<h1 id="d-mealName"> Cucumber Salad </h1>
</div>
<div class = "meal-pics-and-tags">
<!-- image source -->
<img src = https://images.pexels.com/photos/1640777/pexels-photo-1640777.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1,
alt = "photo" width=40% height=40% id="d-mealImg">
<div class = "tag-container", id="d-tags">
</head>
<body>
<header>
<div class="top-bar">
<img src ="./assets/images/Logo.png" alt="logo" />
<h1> Food Journal </h1>
<img src ="./assets/images/Logo.png" alt="logo" />
</div>
</div>
<div class = "stars-and-comments">
<img src = "./assets/images/icons/5-star.svg" width=10% height=10% id="d-rating">
<h2> The food was good </h2>
</div>
</header>
<main>
<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>
<div class="journal-form" id="review-details">
<form>
<fieldset class = "meal-name">
<h1 id="d-mealName" style="font-family: Century Gothic;"></h1>
<h1 id="d-restaurant" style="font-family: Century Gothic; font-size: 30px;"></h1>
</fieldset>
<fieldset class = "meal-pics">
<!-- image source -->
<img width=40% height=40% id="d-mealImg" style="margin-left: auto; margin-right: auto; display: block;"/>
</fieldset>
<fieldset class = "stars-and-comments" style="text-align: center;">
<img width=30% height=30% id="d-rating" style="margin-left: auto; margin-right: auto; display: block;"/>
<p id = "d-comments"></p>
</fieldset>
<fieldset class = "meal-tags">
<div class = "tag-container" id="d-tags" style="justify-content: center;"></div>
</fieldset>
</form>
</div>
<!---Navigation Buttons-->
<div style="display: flex; justify-content: center;">
<img src="./assets/images/home_button_for_interface.png" style="margin: 20px 10px 20px 10px;" id="home-btn" onclick="window.location.assign('./index.html')" height="50" width="50"/>
<img src ="./assets/images/edit_button_for_interface.png" style="margin: 20px 10px 20px 10px;" id="update-btn" height="50" width="50"/>
<img src ="./assets/images/delete_icon_for_interface.png" style="margin: 20px 10px 20px 10px;" id="delete-btn" class="danger" height="50" width="50"/>
</div>
</main>
<div class = journal-form id="update-form-div">
<form id="update-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" accept="image/*" 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" 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>
<div class="journal-form hidden" id="update-form">
<h1>Update Entry</h1>
<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="tag-add-btn">Add Tag</button>
</label>
</fieldset>
<button type="submit" id="save-btn" value="Submit">Update Review</button>
<form id="new-food-entry">
<fieldset>
<legend>PICTURE:</legend>
<select id="select" name="select">
<option value="file">File Upload</option>
<option value="url">From an URL</option>
</select>
<label for="mealImage" id="source">
<input type="file" accept="image/*" id="mealImg" name="mealImg">
</label>
</fieldset>
<fieldset>
<legend>MEAL NAME:</legend>
<label for="Name: "> <input type="text" id="mealName" name="mealName" required> </label>
</fieldset>
<fieldset>
<legend>RESTAURANT NAME:</legend>
<label for="Name:"> <input type="text" id="restaurant" name="restaurant" required> </label>
</fieldset>
<fieldset>
<legend>RATING:</legend>
<div style="display: flex; justify-content: flex-start; align-items: center;">
<div class="rating">
<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>
</div>
</div>
</fieldset>
<fieldset>
<legend>COMMENTS:</legend>
<textarea name="comments" id="comments" rows="5" style="resize: none; width: 100%;"></textarea>
</fieldset>
<fieldset>
<legend>TAGS: (ex. cuisine, distance, cost, etc)</legend>
<input type="text" id="tag-form" name="tag-form">
<div class='tag-container' id="tag-container-form">
</div>
<button type="button" id="tag-add-btn"> + </button>
</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')">
</form>
</div>
</body>
source/assets/images/icons/0-star.svg → source/assets/images/0-star.svg
View File
File renamed without changes.
source/assets/images/icons/1-star.svg → source/assets/images/1-star.svg
View File
File renamed without changes.
source/assets/images/icons/2-star.svg → source/assets/images/2-star.svg
View File
File renamed without changes.
source/assets/images/icons/3-star.svg → source/assets/images/3-star.svg
View File
File renamed without changes.
source/assets/images/icons/4-star.svg → source/assets/images/4-star.svg
View File
File renamed without changes.
source/assets/images/icons/5-star.svg → source/assets/images/5-star.svg
View File
File renamed without changes.
source/assets/images/icons/Grouppink.png → source/assets/images/Grouppink.png
View File
File renamed without changes.
source/assets/images/icons/Logo.png → source/assets/images/Logo.png
View File
File renamed without changes.
source/assets/images/icons/default_plate.png → source/assets/images/default_plate.png
View File
File renamed without changes.
source/assets/images/delete_icon_for_interface.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

source/assets/images/edit_button_for_interface.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.2 KiB

source/assets/images/icons/favicon.ico → source/assets/images/favicon.ico
View File
File renamed without changes.
source/assets/images/home_button_for_interface.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

source/assets/images/icons/plate_with_chopsticks.png → source/assets/images/plate_with_chopsticks.png
View File
File renamed without changes.
source/assets/images/icons/plate_with_cutlery.png → source/assets/images/plate_with_cutlery.png
View File
File renamed without changes.
source/assets/scripts/ReviewCard.js
+95 -82
View File
@@ -12,76 +12,93 @@ class ReviewCard extends HTMLElement {
let styleEl = document.createElement("style");
styleEl.textContent = `
* {
font-family: sans-serif;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
article {
align-items: center;
border: 1px solid rgb(223, 225, 229);
border-radius: 8px;
display: grid;
grid-template-rows: 118px 56px 14px 18px 15px 36px;
height: auto;
row-gap: 5px;
padding: 0 16px 16px 16px;
width: 178px;
margin: 8px 8px 8px 8px;
}
div.rating {
align-items: center;
column-gap: 5px;
display: flex;
}
div.rating>img {
height: auto;
display: inline-block;
object-fit: scale-down;
width: 78px;
}
article>img {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
height: 118px;
object-fit: cover;
margin-left: -16px;
width: calc(100% + 32px);
}
label.restaurant-name {
color: black !important;
}
label.meal-name {
display: -webkit-box;
font-size: 16px;
height: 36px;
line-height: 18px;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
label:not(.meal-name),
span,
time {
color: #70757A;
font-size: 12px;
}
`;
* {
font-family: Century Gothic;
margin: 0;
padding: 0;
overflow-wrap: anywhere;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
article {
align-items: center;
border: 2px solid rgb(31, 41, 32);
border-radius: 8px;
display: grid;
grid-template-rows: 118px 56px 14px 18px 15px 36px;
height: auto;
row-gap: 5px;
padding: 0 16px 16px 16px;
width: 178px;
margin: 8px 8px 8px 8px;
}
div.rating {
align-items: center;
column-gap: 5px;
display: flex;
}
div.rating>img {
height: auto;
display: inline-block;
object-fit: scale-down;
width: 78px;
}
article>img {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
height: 119px;
object-fit: cover;
margin-left: -16px;
width: calc(100% + 32px);
}
label.restaurant-name {
color: black !important;
}
label.meal-name {
display: -webkit-box;
font-size: 16px;
height: 36px;
line-height: 18px;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
label:not(.meal-name),
span,
time {
color: #70757A;
font-size: 12px;
}
.tag-container {
margin-top: 20px;
display: flex;
flex-flow: row wrap;
}
.a-tag {
background-color:#94da97;
border-radius: 7px;
color: #94da97;
padding-right: 7px;
padding-left: 7px;
margin: 3px;
font-weight: bold;
}
`;
articleEl.append(styleEl);
shadowEl.append(articleEl);
this.shadowEl = shadowEl;
@@ -117,7 +134,6 @@ class ReviewCard extends HTMLElement {
* following format:
* {
* "mealImg": "string",
* "imgAlt": "string",
* "mealName": "string",
* "comments": "string",
* "rating": number,
@@ -138,13 +154,12 @@ class ReviewCard extends HTMLElement {
//image setup
let mealImg = document.createElement("img");
mealImg.setAttribute("id", "a-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");
}
mealImg.setAttribute("alt","Meal Photo Corrupted");
mealImg.setAttribute("src",data["mealImg"]);
mealImg.addEventListener("error", function(e) {
mealImg.setAttribute("src", "./assets/images/plate_with_cutlery.png");
e.onerror = null;
});
//meal name setup
let mealLabel = document.createElement("label");
@@ -169,7 +184,7 @@ class ReviewCard extends HTMLElement {
ratingDiv.setAttribute("class", "rating");
let starsImg = document.createElement("img");
starsImg.setAttribute("id", "a-rating");
starsImg.setAttribute("src", "./assets/images/icons/"+data["rating"]+"-star.svg");
starsImg.setAttribute("src", "./assets/images/"+data["rating"]+"-star.svg");
starsImg.setAttribute("alt", data["rating"] +" stars");
starsImg.setAttribute("num", data["rating"]);
ratingDiv.append(starsImg);
@@ -182,7 +197,7 @@ class ReviewCard extends HTMLElement {
if(data["tags"]){
for (let i = 0; i < data["tags"].length; i++) {
let newTag = document.createElement("label");
newTag.setAttribute("class","tag");
newTag.setAttribute("class","a-tag");
newTag.innerHTML = data["tags"][i];
tagContainer.append(newTag);
}
@@ -211,7 +226,6 @@ class ReviewCard extends HTMLElement {
* following format:
* {
* "mealImg": "string",
* "imgAlt": "string",
* "mealName": "string",
* "comments": "string",
* "rating": number,
@@ -229,7 +243,6 @@ class ReviewCard extends HTMLElement {
//get image
let mealImg = this.shadowEl.getElementById("a-mealImg");
dataContainer["mealImg"] = mealImg.getAttribute("src");
dataContainer["imgAlt"] = mealImg.getAttribute("alt");
//get meal name
let mealLabel = this.shadowEl.getElementById("a-mealName");
source/assets/scripts/ReviewDetails.js
+17 -19
View File
@@ -16,41 +16,39 @@ function setupInfo(){
//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");
}
mealImg.setAttribute("src",currReview["mealImg"]);
mealImg.addEventListener("error", function(e) {
mealImg.setAttribute("src", "./assets/images/plate_with_cutlery.png");
e.onerror = null;
});
//meal name
let mealLabel = document.getElementById("d-mealName");
mealLabel.innerHTML = currReview["mealName"];
//restaurant name
/*let restaurantLabel = document.getElementById("d-restaurant");
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("src", "./assets/images/"+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.setAttribute("class","d-tag");
newTag.innerHTML = currReview["tags"][i];
tagContainer.append(newTag);
}
}*/
}
}
function setupDelete(){
@@ -69,17 +67,17 @@ function setupUpdate(){
let updateBtn = document.getElementById("update-btn");
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");
let form = document.getElementById("new-food-entry");
let updateDiv = document.getElementById("update-form");
updateBtn.addEventListener("click", function(){
//update function
updateDiv.style.display = "block";
updateDiv.classList.remove("hidden");
let tagContainer = document.getElementById("tag-container-form");
//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;
@@ -173,7 +171,7 @@ function setupUpdate(){
updateReviewToStorage(currID, newData);
form.style.display = "none";
updateDiv.classList.add("hidden");
});
source/assets/scripts/appTestHelpers.js
+5 -8
View File
@@ -8,7 +8,6 @@ import {strict as assert} from "node:assert";
export async function setReviewForm(page, review) {
// Set text fields
await page.$eval("#imgAlt", (el, value) => el.value = value, review.imgAlt);
await page.$eval("#mealName", (el, value) => el.value = value, review.mealName);
await page.$eval("#comments", (el, value) => el.value = value, review.comments);
await page.$eval("#restaurant", (el, value) => el.value = value, review.restaurant);
@@ -34,19 +33,17 @@ export async function setReviewForm(page, review) {
}
/**
* Tests a page or shadowDOM for correct element text, src, or alt values
* Tests a page or shadowDOM for correct element text or src values
* @param {Object} root page or shodowDOM to test
* @param {string} prefix prefix character for element IDs
* @param {Object} expected values for eahc element
* @param {Object} expected values for each element
*/
export async function checkCorrectness(root, prefix, expected){
// Get the review image and check src and alt
// Get the review image and check src
let img = await root.$(`#${prefix}-mealImg`);
let imgSrc = await img.getProperty("src");
let imgAlt = await img.getProperty("alt");
// Check src and alt
// Check src
assert.strictEqual(await imgSrc.jsonValue(), expected.imgSrc);
assert.strictEqual(await imgAlt.jsonValue(), expected.imgAlt);
// Get the title, comment, and restaurant
let title = await root.$(`#${prefix}-mealName`);
@@ -62,7 +59,7 @@ export async function checkCorrectness(root, prefix, expected){
assert.strictEqual(await restaurant_text.jsonValue(), expected.restaurant);
// Check tags
let tags = await root.$$(".tag");
let tags = await root.$$(`.${prefix}-tag`);
assert.strictEqual(await tags.length, expected.tags.length);
for(let i = 0; i < expected.tags.length; i++){
let tag_text = await tags[i].getProperty("innerText");
source/assets/scripts/localStorage.test.js
-3
View File
@@ -17,7 +17,6 @@ describe("test app localStorage interaction", () => {
it("test localStorage state after adding one review", () => {
let review = {
"imgSrc": "sample src",
"imgAlt": "sample alt",
"mealName": "sample name",
"restaurant": "sample restaurant",
"rating": 5,
@@ -42,7 +41,6 @@ describe("test app localStorage interaction", () => {
ids.push(i);
let new_review = {
"imgSrc": `sample src ${i}`,
"imgAlt": `sample alt ${i}`,
"mealName": `sample name ${i}`,
"restaurant": `sample restaurant ${i}`,
"rating": i,
@@ -68,7 +66,6 @@ describe("test app localStorage interaction", () => {
for(let i = 0; i < 1000; i++){
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,
source/assets/scripts/main.e2e.test.js
+12 -20
View File
@@ -48,7 +48,6 @@ describe("test App end to end", async () => {
// create a new review
let review = {
imgAlt: "sample alt",
mealName: "sample name",
comments: "sample comment",
restaurant: "sample restaurant",
@@ -66,13 +65,12 @@ describe("test App end to end", async () => {
it("check details page", async () => {
// check the details page for correctness
let expected = {
imgSrc: "http://localhost:8080/assets/images/icons/plate_with_cutlery.png",
imgAlt: "sample alt",
imgSrc: "http://localhost:8080/assets/images/plate_with_cutlery.png",
mealName: "sample name",
comments: "sample comment",
restaurant: "sample restaurant",
tags: ["tag 0", "tag 1", "tag 2", "tag 3", "tag 4"],
rating: "http://localhost:8080/assets/images/icons/1-star.svg"
rating: "http://localhost:8080/assets/images/1-star.svg"
};
await checkCorrectness(page, "d", expected);
});
@@ -88,13 +86,12 @@ describe("test App end to end", async () => {
let shadowRoot = await review_card.getProperty("shadowRoot");
let expected = {
imgSrc: "http://localhost:8080/assets/images/icons/plate_with_cutlery.png",
imgAlt: "sample alt",
imgSrc: "http://localhost:8080/assets/images/plate_with_cutlery.png",
mealName: "sample name",
comments: "sample comment",
restaurant: "sample restaurant",
tags: ["tag 0", "tag 1", "tag 2", "tag 3", "tag 4"],
rating: "http://localhost:8080/assets/images/icons/1-star.svg"
rating: "http://localhost:8080/assets/images/1-star.svg"
};
await checkCorrectness(shadowRoot, "a", expected);
});
@@ -114,13 +111,12 @@ describe("test App end to end", async () => {
// check the details page for correctness
let expected = {
imgSrc: "http://localhost:8080/assets/images/icons/plate_with_cutlery.png",
imgAlt: "sample alt",
imgSrc: "http://localhost:8080/assets/images/plate_with_cutlery.png",
mealName: "sample name",
comments: "sample comment",
restaurant: "sample restaurant",
tags: ["tag 0", "tag 1", "tag 2", "tag 3", "tag 4"],
rating: "http://localhost:8080/assets/images/icons/1-star.svg"
rating: "http://localhost:8080/assets/images/1-star.svg"
};
await checkCorrectness(page, "d", expected);
});
@@ -137,13 +133,12 @@ describe("test App end to end", async () => {
// check the details page for correctness
let expected = {
imgSrc: "http://localhost:8080/assets/images/icons/plate_with_cutlery.png",
imgAlt: "sample alt",
imgSrc: "http://localhost:8080/assets/images/plate_with_cutlery.png",
mealName: "sample name",
comments: "sample comment",
restaurant: "sample restaurant",
tags: ["tag 0", "tag 1", "tag 2", "tag 3", "tag 4"],
rating: "http://localhost:8080/assets/images/icons/1-star.svg"
rating: "http://localhost:8080/assets/images/1-star.svg"
};
await checkCorrectness(shadowRoot, "a", expected);
});
@@ -164,7 +159,6 @@ describe("test App end to end", async () => {
// create a new review
let review = {
imgAlt: "updated alt",
mealName: "updated name",
comments: "updated comment",
restaurant: "updated restaurant",
@@ -182,13 +176,12 @@ describe("test App end to end", async () => {
it("check details page", async () => {
// check the details page for correctness
let expected = {
imgSrc: "http://localhost:8080/assets/images/icons/plate_with_cutlery.png",
imgAlt: "updated alt",
imgSrc: "http://localhost:8080/assets/images/plate_with_cutlery.png",
mealName: "updated name",
comments: "updated comment",
restaurant: "updated restaurant",
tags: ["tag -0", "tag -1", "tag -2", "tag -3", "tag -4", "tag -5"],
rating: "http://localhost:8080/assets/images/icons/5-star.svg"
rating: "http://localhost:8080/assets/images/5-star.svg"
};
await checkCorrectness(page, "d", expected);
});
@@ -205,13 +198,12 @@ describe("test App end to end", async () => {
// check the details page for correctness
let expected = {
imgSrc: "http://localhost:8080/assets/images/icons/plate_with_cutlery.png",
imgAlt: "updated alt",
imgSrc: "http://localhost:8080/assets/images/plate_with_cutlery.png",
mealName: "updated name",
comments: "updated comment",
restaurant: "updated restaurant",
tags: ["tag -0", "tag -1", "tag -2", "tag -3", "tag -4", "tag -5"],
rating: "http://localhost:8080/assets/images/icons/5-star.svg"
rating: "http://localhost:8080/assets/images/5-star.svg"
};
await checkCorrectness(shadowRoot, "a", expected);
});
source/assets/scripts/main.js
+2 -2
View File
@@ -18,12 +18,12 @@ function init() {
* @param {Array<Object>} reviews An array of reviews
*/
function addReviewsToDocument(reviews) {
let box = document.getElementById("review-container");
let reviewBox = document.getElementById("review-container");
reviews.forEach(review => {
let newReview = document.createElement("review-card");
newReview.data = review;
//TODO: want to append it to whatever the box is in layout
box.append(newReview);
reviewBox.append(newReview);
});
}
source/index.html
+8 -6
View File
@@ -7,6 +7,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Food Journal</title>
<!--Add Favicon-->
<link rel="icon" type="image/x-icon" href="./assets/images/favicon.ico">
<!-- Recipe Card Custom Element -->
<script src="assets/scripts/ReviewCard.js" type="module"></script>
@@ -19,9 +22,9 @@
<body>
<header>
<div class="top-bar">
<img src ="./assets/images/icons/Logo.png" alt="logo" />
<img src ="./assets/images/Logo.png" alt="logo" />
<h1> Food Journal </h1>
<img src ="./assets/images/icons/Logo.png" alt="logo" />
<img src ="./assets/images/Logo.png" alt="logo" />
</div>
</header>
<main>
@@ -31,17 +34,16 @@
<div class="search-bar">
<form id="form">
<input type="search" id="searching" name="searchBar" placeholder="Search journal...">
<button class="click" type="search"> Search
</button>
<button class="click" type="search"> Search </button>
<div class="Filter-box">
</div>
</form>
</div>
<div class="center-display">
<img src ="./assets/images/icons/Grouppink.png" alt="CREATE" style="opacity: 100%;" id="create-btn" onclick="window.location.assign('./CreatePage.html')"/>
<img src ="./assets/images/Grouppink.png" alt="CREATE" style="opacity: 100%;" id="create-btn" onclick="window.location.assign('./CreatePage.html')"/>
<h2 id="recent-reviews-text"> Recent Reviews </h2>
<img src ="./assets/images/icons/Grouppink.png" style="opacity:0;"/>
<img src ="./assets/images/Grouppink.png" style="opacity:0;"/>
</div>
source/static/CoveredByYourGrace-Regular.ttf
BIN
View File
Binary file not shown.
source/static/CreatePage.css
+16 -72
View File
@@ -1,87 +1,31 @@
/* CreatePage.css */
body {
background-color: #13323b;
@font-face {
font-family: "testFont";
src: url(CoveredByYourGrace-Regular.ttf);
}
h1 {
text-align: center;
body {
background-color: #F8F3F1;
}
.top-bar {
margin-top: -8cm;
display: flex;
justify-content: center;
}
.top-bar > img {
position: relative;
top: 7.85cm;
align-self: center;
padding-left: 2.5%;
padding-right: 2.5%;
}
.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: block;
margin: auto;
color: #ccb3bb;
border: 3px solid rgb(7 0 0);
background-color: #b52754;
}
.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;
}
text-align: center;
color:#516754;
font-size: 6rem;
font-family: 'testFont';
}
source/static/Form.css
+147
View File
@@ -0,0 +1,147 @@
.journal-form h1 {
font-family: 'testFont';
text-align: center;
}
.journal-form {
font-size: 120%;
font-family: 'Century Gothic';
width: 50%;
margin: auto;
color: #516754;
border: 2px solid rgb(31, 41, 32);
border-radius: 8px;
background-color: #f7dfd5;
}
fieldset {
border: none;
}
input[type=text] {
width: 100%;
box-sizing: border-box;
background-color: #f7dfd5;
border: none;
border-bottom: 1px solid rgb(0, 0, 0);
}
input[type=text]:focus {
outline: none;
border-bottom: 1px solid rgb(0, 0, 0);
}
.rating {
display: flex; flex-wrap: nowrap; flex-direction: row-reverse;
}
.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;
}
.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;
}
#tag-add-btn {
background-color: #94da97; /* Green */
border: round;
color: rgb(206, 83, 179);
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
cursor: pointer;
border-radius: 10%;
margin-top: 5px;
}
#tag-add-btn:hover {
background-color: rgb(206, 83, 179); /* Green */
border: round;
color: #94da97;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
cursor: pointer;
border-radius: 10%;
margin-top: 5px;
}
.hidden {
display: none;
}
.tag-container * {
max-width: 100%;
overflow-wrap: anywhere;
}
source/static/OFL.txt
+93
View File
@@ -0,0 +1,93 @@
Copyright (c) 2010, Kimberly Geswein (kimberlygeswein.com)
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.
source/static/ReviewDetails.css
+24 -76
View File
@@ -1,7 +1,12 @@
/* ReviewDetails.css */
@font-face {
font-family: "testFont";
src: url(CoveredByYourGrace-Regular.ttf);
}
body {
background-color: #13323b;
background-color: #F8F3F1;
}
h1 {
@@ -9,88 +14,31 @@ h1 {
}
.top-bar {
margin-top: -8cm;
display: flex;
justify-content: center;
}
.top-bar > img {
position: relative;
top: 7.85cm;
align-self: center;
padding-left: 2.5%;
padding-right: 2.5%;
}
.top-bar > h1 {
position: relative;
top: 2.2cm;
font-size: 3cm;
color: #eaa9bc;
text-align: center;
/*color: #e4c3d2;*/
color:#516754;
font-size: 6rem;
font-family: 'testFont';
}
.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;
}
.d-tag {
background-color: grey;
border-radius: 7px;
color: white;
padding-right: 7px;
padding-left: 7px;
margin: 10px 10px 10px 10px;
}
source/static/homepage.css
+50 -5
View File
@@ -1,8 +1,16 @@
/* homepage.css */
/* Color */
body {
background-color: #97a5bd;
@font-face {
font-family: "testFont";
src: url(CoveredByYourGrace-Regular.ttf);
}
/* Color*/
body{
/*background-color: #97a5bd*/
/*background-color: #E3E3EC;*/
background-color: #F8F3F1;
}
.top-bar {
@@ -20,8 +28,11 @@ body {
.top-bar > h1 {
position: relative;
text-align: center;
color: #e4c3d2;
/*color: #e4c3d2;*/
/*color: rgb(145, 124, 175);*/
color:#516754;
font-size: 6rem;
font-family: 'testFont';
}
.body-container {
@@ -41,10 +52,44 @@ body {
justify-content: center;
}
.search-bar > form {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: rgb(239, 183, 183);
font-size: 17px;
border: none;
border-radius: 12px;
cursor: pointer;
}
#recent-reviews-text {
text-align: center;
font-size: 4rem;
color: #e4c3d2;
/* color: #e4c3d2; */
/*color: rgb(145, 124, 175);*/
color: #516754;
font-family: 'testFont';
}
img#create-btn {
position: relative;
align-self: center;
padding-left: 2.5%;
padding-right: 2.5%;
}
.review-container {
display: flex;
position: relative;
flex-wrap: wrap;
justify-content: center;
}
.review-container > div {
background-color: #f1f1f1;
text-align: center;
}
img#create-btn {
source/static/reset.css
-158
View File
@@ -1,158 +0,0 @@
/* This is a generic CSS file that sets preliminary rules for content that should be the same across pages */
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
nav ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote::before,
blockquote::after,
q::before,
q::after {
content: "";
content: none;
}
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
input,
select {
vertical-align: middle;
}
img,
fieldset,
object {
border: none;
}
*,
*::after,
*::before {
box-sizing: border-box;
}
button,
label {
cursor: pointer;
}
html,
body {
height: 100%;
}
form {
border: solid;
}