alu/cse110-fa22-group29
1
0
Fork 0
mirror of https://github.com/cse110-fa22-group29/cse110-fa22-group29.git synced 2024-11-10 05:34:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

tag functionality in form, review card changes

Browse Source
This commit is contained in:
Gavyn Ezell 2022-11-08 21:51:03 -08:00
parent d8ed4d24a8
commit 3e4ae68e2e
5 changed files with 109 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
index.html
View File

@ -12,8 +12,8 @@
<!-- Main Stylesheets & Scripts --> <!-- Main Stylesheets & Scripts -->
<link rel="stylesheet" href="assets/styles/main.css" /> <link rel="stylesheet" href="/source/assets/styles/main.css" />
<script src="assets/scripts/main.js" type="module"></script> <script src="/source/assets/scripts/main.js" type="module"></script>
</head> </head>
<body> <body>
@ -23,7 +23,7 @@
<form id="new-food-entry"> <form id="new-food-entry">
<fieldset> <fieldset>
<legend>Image:</legend> <legend>Photo:</legend>
<label for="image-src"> <label for="image-src">
Source: Source:
<input type="text" id="imgSrc" name="imgSrc" required> <input type="text" id="imgSrc" name="imgSrc" required>
@ -36,14 +36,12 @@
<fieldset> <fieldset>
<legend> Meal: </legend> <legend> Meal: </legend>
/* TODO: change parameters */
<label for="Meal: ">Meal: <label for="Meal: ">Meal:
<input type="text" id="titleTxt" name="titleTxt" required> <input type="text" id="mealName" name="mealName" required>
</label> </label>
/* navigate to review page */ <label for="review">Description:
<label for="title-lnk">Link: <br>
<input type="url" id="titleLnk" name="titleLnk" required> <textarea id="review"></textarea>
</label> </label>
</fieldset> </fieldset>
<fieldset> <fieldset>
@ -74,18 +72,18 @@
Restaurant: Restaurant:
<input type="text" id="restaurant" name="restaurant" required> <input type="text" id="restaurant" name="restaurant" required>
</label> </label>
<label for="comments"> <label for="tags">
Comments:
<input type="text" id="comments" name="comments" required>
</label>
<label for="comments">
Tags: Tags:
<input type="text" id="comments" name="comments" required> <input type="text" id="tags" name="tags" required>
<div id="tag-container">
</div>
<button type="button" id="tagAdd">Add Tag</button>
</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 Review Journal</button>
</form> </form>
</body> </body>
</html> </html>

14
source/assets/scripts/ReviewCard.js
View File

@ -61,18 +61,11 @@ class ReviewCard extends HTMLElement {
width: calc(100% + 32px); width: calc(100% + 32px);
} }
p.ingredients { p.restaurant-name {
height: 32px;
line-height: 16px;
padding-top: 4px;
overflow: hidden;
}
p.organization {
color: black !important; color: black !important;
} }
p.title { p.meal-name {
display: -webkit-box; display: -webkit-box;
font-size: 16px; font-size: 16px;
height: 36px; height: 36px;
@ -82,7 +75,7 @@ class ReviewCard extends HTMLElement {
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
p:not(.title), p:not(.meal-name),
span, span,
time { time {
color: #70757A; color: #70757A;
@ -150,6 +143,7 @@ class ReviewCard extends HTMLElement {
articleEl.append(pRestaurant) articleEl.append(pRestaurant)
articleEl.append(div) articleEl.append(div)
} }
} }
customElements.define('review-card', ReviewCard); customElements.define('review-card', ReviewCard);

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

@ -41,7 +41,7 @@ function addReviewsToDocument(reviews) {
* saves that string to 'reviews' in localStorage * saves that string to 'reviews' in localStorage
* @param {Array<Object>} reviews An array of reviews * @param {Array<Object>} reviews An array of reviews
*/ */
function saveRecipesToStorage(reviews) { function saveReviewsToStorage(reviews) {
localStorage.setItem('reviews', JSON.stringify(reviews)); localStorage.setItem('reviews', JSON.stringify(reviews));
} }
@ -50,31 +50,33 @@ function saveRecipesToStorage(reviews) {
* <button>. * <button>.
*/ */
function initFormHandler() { function initFormHandler() {
let tagContainer = document.getElementById('tag-container');
let theForm = document.querySelector('form') let theForm = document.querySelector('form')
let submitButt = document.querySelector('button[type="submit"]') let submitButt = document.querySelector('button[type="submit"]')
submitButt.addEventListener('click', function(){ submitButt.addEventListener('click', function(){
let deleteTags = document.querySelectorAll('.tag')
let formData = new FormData(theForm); for(let i = 0; i < deleteTags.length; i ++) {
let recipeObject = {} tagContainer.removeChild(deleteTags[i]);
for (let [key, value] of formData) {
recipeObject[`${key}`] = `${value}`
} }
let formData = new FormData(theForm);
let reviewObject = {}
for (let [key, value] of formData) {
console.log(`${key}`)
console.log(`${value}`)
reviewObject[`${key}`] = `${value}`
}
//console.log(reviewObject)
let newRecipe = document.createElement('recipe-card') let newReview = document.createElement('review-card')
newRecipe.data = recipeObject newReview.data = reviewObject
let mainEl = document.querySelector('main') let mainEl = document.querySelector('main')
mainEl.append(newRecipe) mainEl.append(newReview)
let aList = getRecipesFromStorage() let aList = getReviewsFromStorage()
//console.log(typeof(aList)) aList.push(reviewObject)
//console.log(aList) saveReviewsToStorage(aList)
aList.push(recipeObject) document.getElementById("new-food-entry").reset();
saveRecipesToStorage(aList)
}); });
let clearButt = document.querySelector('.danger') let clearButt = document.querySelector('.danger')
@ -84,6 +86,38 @@ function initFormHandler() {
while (mainEl.firstChild) { while (mainEl.firstChild) {
mainEl.removeChild(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();
});
//allowing for tags selection/creation for user's review card
let tagAddButton = document.getElementById('tagAdd');
tagAddButton.addEventListener('click', ()=> {
let tagField = document.getElementById('tags');
if (tagField.value.length > 0) {
let p = document.createElement('p');
p.innerHTML = tagField.value;
p.setAttribute('class','tag')
tagContainer.append(p);
tagField.value = '';
//adding deletion feature to each individual tag
let deleteTags = document.querySelectorAll('.tag')
for(let i = 0; i < deleteTags.length; i ++) {
deleteTags[i].addEventListener('click',()=> {
tagContainer.removeChild(deleteTags[i]);
})
}
}
}); });
} }

27
source/assets/styles/main.css
View File

@ -48,6 +48,33 @@ main {
width: 100%; 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 { .danger {
background-color: rgb(254, 171, 171); background-color: rgb(254, 171, 171);
border-color: red; border-color: red;

7
source/reviews.json
View File

@ -5,5 +5,12 @@
"mealName": "Birria Tacos", "mealName": "Birria Tacos",
"restaurant": "Mike's Red Tacos", "restaurant": "Mike's Red Tacos",
"rating": 5 "rating": 5
},
{
"imgSrc": "https://www.redwormcomposting.com/images/worm-burrito.JPG",
"imgAlt": "wolftown pic",
"mealName": "Carnitas Burrito",
"restaurant": "Wolftown UCSD",
"rating": 0
} }
] ]