tag functionality in form, review card changes

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

View File

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

View File

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

View File

@ -41,7 +41,7 @@ function addReviewsToDocument(reviews) {
* saves that string to 'reviews' in localStorage
* @param {Array<Object>} reviews An array of reviews
*/
function saveRecipesToStorage(reviews) {
function saveReviewsToStorage(reviews) {
localStorage.setItem('reviews', JSON.stringify(reviews));
}
@ -50,40 +50,74 @@ function saveRecipesToStorage(reviews) {
* <button>.
*/
function initFormHandler() {
let tagContainer = document.getElementById('tag-container');
let theForm = document.querySelector('form')
let submitButt = document.querySelector('button[type="submit"]')
submitButt.addEventListener('click', function(){
let formData = new FormData(theForm);
let recipeObject = {}
for (let [key, value] of formData) {
recipeObject[`${key}`] = `${value}`
let deleteTags = document.querySelectorAll('.tag')
for(let i = 0; i < deleteTags.length; i ++) {
tagContainer.removeChild(deleteTags[i]);
}
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')
newRecipe.data = recipeObject
let newReview = document.createElement('review-card')
newReview.data = reviewObject
let mainEl = document.querySelector('main')
mainEl.append(newRecipe)
mainEl.append(newReview)
let aList = getRecipesFromStorage()
//console.log(typeof(aList))
//console.log(aList)
aList.push(recipeObject)
saveRecipesToStorage(aList)
let aList = getReviewsFromStorage()
aList.push(reviewObject)
saveReviewsToStorage(aList)
document.getElementById("new-food-entry").reset();
});
let clearButt = document.querySelector('.danger')
clearButt.addEventListener('click', function() {
localStorage.clear();
let mainEl = document.querySelector('main')
while (mainEl.firstChild) {
while (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]);
})
}
}
});
}

View File

@ -48,6 +48,33 @@ main {
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;
@ -55,4 +82,4 @@ main {
.hidden {
display: none;
}
}

View File

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