alu/cse110-fa22-group29
1
0
Fork 0
mirror of https://github.com/cse110-fa22-group29/cse110-fa22-group29.git synced 2025-10-30 19:46:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

started review cards, form change

Browse Source
This commit is contained in:
Gavyn Ezell
2022-11-08 15:57:02 -08:00
parent 07dac10012
commit d8ed4d24a8
5 changed files with 188 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@@ -8,11 +8,13 @@
<title>Food Journal</title> <title>Food Journal</title>
<!-- Recipe Card Custom Element --> <!-- Recipe Card Custom Element -->
<script src="assets/scripts/RecipeCard.js" type="module"></script> <script src="/source/assets/scripts/ReviewCard.js" type="module"></script>
<!-- Main Stylesheets & Scripts --> <!-- Main Stylesheets & Scripts -->
<link rel="stylesheet" href="assets/styles/main.css" /> <link rel="stylesheet" href="assets/styles/main.css" />
<script src="assets/scripts/main.js" type="module"></script> <script src="assets/scripts/main.js" type="module"></script>
</head> </head>
<body> <body>
<main> <main>
@@ -32,6 +34,7 @@
</label> </label>
</fieldset> </fieldset>
<fieldset> <fieldset>
<legend> Meal: </legend> <legend> Meal: </legend>
/* TODO: change parameters */ /* TODO: change parameters */
<label for="Meal: "> Meal: <label for="Meal: "> Meal:
@@ -40,6 +43,7 @@
/* navigate to review page */ /* navigate to review page */
<label for="title-lnk">Link: <label for="title-lnk">Link:
<input type="url" id="titleLnk" name="titleLnk" required> <input type="url" id="titleLnk" name="titleLnk" required>
</label> </label>
</fieldset> </fieldset>
<fieldset> <fieldset>
@@ -62,6 +66,7 @@
<label for="rating-5"> <label for="rating-5">
5<input type="radio" id="rating-5" value="5" name="rating"> 5<input type="radio" id="rating-5" value="5" name="rating">
</label> </label>
</fieldset> </fieldset>
<fieldset> <fieldset>
<legend>Other Info:</legend> <legend>Other Info:</legend>
@@ -77,6 +82,7 @@
Tags: Tags:
<input type="text" id="comments" name="comments" required> <input type="text" id="comments" name="comments" required>
</label> </label>
</fieldset> </fieldset>
<button type="submit">Add Review</button> <button type="submit">Add Review</button>
<button type="button" class="danger">Clear Local Storage</button> <button type="button" class="danger">Clear Local Storage</button>

180
source/assets/scripts/RecipeCard.js
View File

@@ -1,180 +0,0 @@
// RecipeCard.js
class RecipeCard extends HTMLElement {
// Called once when document.createElement('recipe-card') is called, or
// the element is written into the DOM directly as <recipe-card>
constructor() {
super(); // Inheret everything from HTMLElement
// EXPOSE - START (All expose numbers start with A)
// A1. TODO - Attach the shadow DOM to this Web Component (leave the mode open)
let shadowEl = this.attachShadow({mode:'open'});
// A2. TODO - Create an <article> element - This will hold our markup once our data is set
let articleEl = document.createElement('article');
// A3. TODO - Create a style element - This will hold all of the styles for the Web Component
let styleEl = document.createElement('style');
// A4. TODO - Insert all of the styles from cardTemplate.html into the <style> element you just made
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;
}
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);
}
p.ingredients {
height: 32px;
line-height: 16px;
padding-top: 4px;
overflow: hidden;
}
p.organization {
color: black !important;
}
p.title {
display: -webkit-box;
font-size: 16px;
height: 36px;
line-height: 18px;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
p:not(.title),
span,
time {
color: #70757A;
font-size: 12px;
}
`;
// A5. TODO - Append the <style> and <article> elements to the Shadow DOM
articleEl.append(styleEl);
shadowEl.append(articleEl);
this.shadowEl = shadowEl
}
/**
* Called when the .data property is set on this element.
*
* For Example:
* let recipeCard = document.createElement('recipe-card'); // Calls constructor()
* recipeCard.data = { foo: 'bar' } // Calls set data({ foo: 'bar' })
*
* @param {Object} data - The data to pass into the <recipe-card>, must be of the
* following format:
* {
* "imgSrc": "string",
* "imgAlt": "string",
* "titleLnk": "string",
* "titleTxt": "string",
* "organization": "string",
* "rating": number,
* "numRatings": number,
* "lengthTime": "string",
* "ingredients": "string"
* }
*/
set data(data) {
// If nothing was passed in, return
if (!data) return;
// A6. TODO - Select the <article> we added to the Shadow DOM in the constructor
let articleEl = this.shadowEl.querySelector('article');
// A7. TODO - Set the contents of the <article> with the <article> template given in
// cardTemplate.html and the data passed in (You should only have one <article>,
// do not nest an <article> inside another <article>). You should use Template
// literals (tempalte strings) and element.innerHTML for this.
let img1 = document.createElement('img');
img1.setAttribute('src',data['imgSrc']);
img1.setAttribute('alt',data['imgAlt']);
let pTitle = document.createElement('p');
let aTitle = document.createElement('a');
pTitle.setAttribute('class','title');
aTitle.setAttribute('href', data['titleLnk']);
aTitle.innerHTML = data['titleTxt'];
pTitle.append(aTitle)
let pOrg = document.createElement('p');
pOrg.setAttribute('class','organization');
pOrg.innerHTML = data["organization"];
let div = document.createElement('div')
div.setAttribute('class', 'rating')
let span1 = document.createElement('span')
span1.innerHTML = data["rating"];
let img2 = document.createElement('img')
img2.setAttribute('src', './assets/images/icons/'+data['rating']+'-star.svg');
img2.setAttribute('alt', data['rating'] +' stars');
let span2 = document.createElement('span')
span2.innerHTML = '('+data['numRatings']+')';
div.append(span1);
div.append(img2);
div.append(span2);
let timeEl = document.createElement('time')
timeEl.innerHTML = data['lengthTime']
let pIngred = document.createElement('p');
pIngred.setAttribute('class','ingredients')
pIngred.innerHTML = data['ingredients'];
articleEl.append(img1)
articleEl.append(pTitle)
articleEl.append(pOrg)
articleEl.append(div)
articleEl.append(timeEl)
articleEl.append(pIngred)
}
}
// A8. TODO - Define the Class as a customElement so that you can create
// 'recipe-card' elements
customElements.define('recipe-card', RecipeCard);

155
source/assets/scripts/ReviewCard.js Normal file
View File

@@ -0,0 +1,155 @@
// ReviewCard.js
class ReviewCard extends HTMLElement {
// Called once when document.createElement('review-card') is called, or
// the element is written into the DOM directly as <review-card>
constructor() {
super();
let shadowEl = this.attachShadow({mode:'open'});
let articleEl = document.createElement('article');
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;
}
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);
}
p.ingredients {
height: 32px;
line-height: 16px;
padding-top: 4px;
overflow: hidden;
}
p.organization {
color: black !important;
}
p.title {
display: -webkit-box;
font-size: 16px;
height: 36px;
line-height: 18px;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
p:not(.title),
span,
time {
color: #70757A;
font-size: 12px;
}
`;
articleEl.append(styleEl);
shadowEl.append(articleEl);
this.shadowEl = shadowEl
}
/**
* Called when the .data property is set on this element.
*
* For Example:
* let reviewCard = document.createElement('review-card');
* reviewCard.data = { foo: 'bar' }
*
* @param {Object} data - The data to pass into the <review-card>, must be of the
* following format:
* {
* "imgSrc": "string",
* "imgAlt": "string",
* "mealName": "string",
* "restaurant": "string",
* "rating": number
* }
*/
set data(data) {
// If nothing was passed in, return
if (!data) return;
// Select the <article> we added to the Shadow DOM in the constructor
let articleEl = this.shadowEl.querySelector('article');
// setting the article elements for the review card
//image setup
let img1 = document.createElement('img');
img1.setAttribute('src',data['imgSrc']);
img1.setAttribute('alt',data['imgAlt']);
//meal name setup
let pMeal = document.createElement('p');
pMeal.setAttribute('class','meal-name');
pMeal.innerHTML = data["mealName"];
let pRestaurant = document.createElement('p');
pRestaurant.setAttribute('class','restaurant-name');
pRestaurant.innerHTML = data["restaurant"];
//other info: rating
let div = document.createElement('div')
div.setAttribute('class', 'rating')
let span1 = document.createElement('span')
span1.innerHTML = data["rating"];
let img2 = document.createElement('img')
img2.setAttribute('src', './source/assets/images/icons/'+data['rating']+'-star.svg');
img2.setAttribute('alt', data['rating'] +' stars');
div.append(span1);
div.append(img2);
articleEl.append(img1)
articleEl.append(pMeal)
articleEl.append(pRestaurant)
articleEl.append(div)
}
}
customElements.define('review-card', ReviewCard);

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

@@ -3,28 +3,20 @@
// 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);
// Starts the program, all function calls trace back here
function init() { function init() {
// Get the recipes from localStorage // Get the reviews from localStorage
let recipes = getRecipesFromStorage(); let reviews = getReviewsFromStorage();
// Add each recipe to the <main> element // Add each recipe to the <main> element
addRecipesToDocument(recipes); addReviewsToDocument(reviews);
// Add the event listeners to the form elements // Add the event listeners to the form elements
initFormHandler(); initFormHandler();
} }
/** /**
* Reads 'recipes' from localStorage and returns an array of * @returns {Array<Object>} An array of reviews found in localStorage
* all of the recipes found (parsed, not in string form). If
* nothing is found in localStorage for 'recipes', an empty array
* is returned.
* @returns {Array<Object>} An array of recipes found in localStorage
*/ */
function getRecipesFromStorage() { function getReviewsFromStorage() {
// A9. TODO - Complete the functionality as described in this function let result = JSON.parse(localStorage.getItem('reviews'))
// header. It is possible in only a single line, but should
// be no more than a few lines.
let result = JSON.parse(localStorage.getItem('recipes'))
if (result) { if (result) {
return result; return result;
} }
@@ -32,38 +24,25 @@ function getRecipesFromStorage() {
} }
/** /**
* Takes in an array of recipes and for each recipe creates a * @param {Array<Object>} reviews An array of reviews
* new <recipe-card> element, adds the recipe data to that card
* using element.data = {...}, and then appends that new recipe
* to <main>
* @param {Array<Object>} recipes An array of recipes
*/ */
function addRecipesToDocument(recipes) { function addReviewsToDocument(reviews) {
// A10. TODO - Get a reference to the <main> element
let mainEl = document.querySelector('main') let mainEl = document.querySelector('main')
recipes.forEach(recipe=> { reviews.forEach(review=> {
let newRecipe = document.createElement('recipe-card') let newReview = document.createElement('review-card')
newRecipe.data = recipe newReview.data = review
mainEl.append(newRecipe); mainEl.append(newReview);
}) })
// A11. TODO - Loop through each of the recipes in the passed in array,
// create a <recipe-card> element for each one, and populate
// each <recipe-card> with that recipe data using element.data = ...
// Append each element to <main>
} }
/** /**
* Takes in an array of recipes, converts it to a string, and then * Takes in an array of reviews, converts it to a string, and then
* saves that string to 'recipes' in localStorage * saves that string to 'reviews' in localStorage
* @param {Array<Object>} recipes An array of recipes * @param {Array<Object>} reviews An array of reviews
*/ */
function saveRecipesToStorage(recipes) { function saveRecipesToStorage(reviews) {
// EXPLORE - START (All explore numbers start with B) localStorage.setItem('reviews', JSON.stringify(reviews));
// B1. TODO - Complete the functionality as described in this function
// header. It is possible in only a single line, but should
// be no more than a few lines.
localStorage.setItem('recipes', JSON.stringify(recipes));
} }
/** /**
@@ -72,11 +51,8 @@ function saveRecipesToStorage(recipes) {
*/ */
function initFormHandler() { function initFormHandler() {
// B2. TODO - Get a reference to the <form> element
let theForm = document.querySelector('form') let theForm = document.querySelector('form')
// B3. TODO - Add an event listener for the 'submit' event, which fires when the
// submit button is clicked
let submitButt = document.querySelector('button[type="submit"]') let submitButt = document.querySelector('button[type="submit"]')
submitButt.addEventListener('click', function(){ submitButt.addEventListener('click', function(){
@@ -110,23 +86,4 @@ function initFormHandler() {
} }
}); });
// Steps B4-B9 will occur inside the event listener from step B3
// B4. TODO - Create a new FormData object from the <form> element reference above
// B5. TODO - Create an empty object (I'll refer to this object as recipeObject to
// make this easier to read), and then extract the keys and corresponding
// values from the FormData object and insert them into recipeObject
// B6. TODO - Create a new <recipe-card> element
// B7. TODO - Add the recipeObject data to <recipe-card> using element.data
// B8. TODO - Append this new <recipe-card> to <main>
// B9. TODO - Get the recipes array from localStorage, add this new recipe to it, and
// then save the recipes array back to localStorage
// B10. TODO - Get a reference to the "Clear Local Storage" button
// B11. TODO - Add a click event listener to clear local storage button
// Steps B12 & B13 will occur inside the event listener from step B11
// B12. TODO - Clear the local storage
// B13. TODO - Delete the contents of <main>
} }

9
source/reviews.json Normal file
View File

@@ -0,0 +1,9 @@
[
{
"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
}
]