mirror of
https://github.com/cse110-fa22-group29/cse110-fa22-group29.git
synced 2024-09-20 08:47:56 +00:00
tag functionality in form, review card changes
This commit is contained in:
Gavyn Ezell
parent
d8ed4d24a8
commit
3e4ae68e2e
32
index.html
32
index.html
@ -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>
|
||||
@ -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);
|
||||
|
||||
@ -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]);
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
@ -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;
|
||||
|
||||
@ -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
|
||||
}
|
||||
]
|
||||
Loading…
Reference in New Issue
Block a user