review page functionality

This commit is contained in:
Gavyn Ezell 2022-11-12 10:10:07 -08:00
parent d72e8ea601
commit 365e701924
4 changed files with 48 additions and 0 deletions

View File

@ -25,6 +25,9 @@
<form id="new-food-entry">
<fieldset>
<legend>Photo:</legend>
<label>Your Image
<input type="file" name="reviewImg" accept="image/png, image/gif, image/jpeg" />
</label>
<label for="image-src">
Source:
<input type="text" id="imgSrc" name="imgSrc">

16
review.html Normal file
View File

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Food Journal</title>
<script src="/source/assets/scripts/reviewpage.js" type="module"></script>
</head>
<body>
<main>
</main>
</body>
</html>

View File

@ -124,6 +124,24 @@ class ReviewCard extends HTMLElement {
mealLabel.setAttribute('class','meal-name');
mealLabel.innerHTML = data['mealName'];
//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'],
"rating": data['rating'],
"tags": data['tags']
}
sessionStorage.setItem('currReview', JSON.stringify(currReview));
});
let restaurantLabel = document.createElement('label');
restaurantLabel.setAttribute('class','restaurant-name');
restaurantLabel.innerHTML = data['restaurant'];
@ -148,6 +166,7 @@ class ReviewCard extends HTMLElement {
articleEl.append(mealImg);
articleEl.append(mealLabel);
articleEl.append(reviewLink)
articleEl.append(restaurantLabel);
articleEl.append(ratingDiv);
articleEl.append(tagContainer);

View File

@ -0,0 +1,10 @@
// 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
}