tag functionality

This commit is contained in:
Gavyn Ezell 2022-11-10 13:22:32 -08:00
parent 1718c7cedb
commit c168d0f902
6 changed files with 55 additions and 26 deletions

View File

@ -73,10 +73,10 @@
Restaurant:
<input type="text" id="restaurant" name="restaurant" required>
</label>
<label for="tags">
<label for="tag-form">
Tags:
<input type="text" id="tags" name="tags" required>
<div id="tag-container">
<input type="text" id="tag-form" name="tag-form" required>
<div class='tag-container' id="tag-container-form">
</div>
<button type="button" id="tagAdd">Add Tag</button>

View File

@ -102,6 +102,7 @@ class ReviewCard extends HTMLElement {
* "mealName": "string",
* "restaurant": "string",
* "rating": number
* "tags": string array
* }
*/
set data(data) {
@ -138,10 +139,21 @@ class ReviewCard extends HTMLElement {
div.append(span1);
div.append(img2);
//added tags
let tagContainer = document.createElement('div')
tagContainer.setAttribute('class', 'tag-container');
for (let i = 0; i < data['tags'].length; i++) {
let newTag = document.createElement('p');
newTag.setAttribute('class','tag');
newTag.innerHTML = data['tags'][i]
tagContainer.append(newTag)
}
articleEl.append(img1)
articleEl.append(pMeal)
articleEl.append(pRestaurant)
articleEl.append(div)
articleEl.append(tagContainer)
}

View File

@ -1,9 +1,10 @@
module.exports = {getReviewsFromStorage, saveReviewsToStorage};
//
//module.exports = {getReviewsFromStorage, saveReviewsToStorage};
/**
* @returns {Array<Object>} An array of reviews found in localStorage
*/
function getReviewsFromStorage() {
export function getReviewsFromStorage() {
let result = JSON.parse(localStorage.getItem('reviews'))
if (result) {
return result;
@ -16,6 +17,6 @@ function getReviewsFromStorage() {
* saves that string to 'reviews' in localStorage
* @param {Array<Object>} reviews An array of reviews
*/
function saveReviewsToStorage(reviews) {
export function saveReviewsToStorage(reviews) {
localStorage.setItem('reviews', JSON.stringify(reviews));
}

View File

@ -1,5 +1,5 @@
// main.js
const {getReviewsFromStorage, saveReviewsToStorage} = require('./localStorage');
import {getReviewsFromStorage, saveReviewsToStorage} from './localStorage.js';
// Run the init() function when the page has loaded
window.addEventListener('DOMContentLoaded', init);
@ -31,14 +31,16 @@ function addReviewsToDocument(reviews) {
* <button>.
*/
function initFormHandler() {
let tagContainer = document.getElementById('tag-container');
//accessing form components
let tagContainer = document.getElementById('tag-container-form');
let theForm = document.querySelector('form')
let submitButt = document.querySelector('button[type="submit"]')
submitButt.addEventListener('click', function(){
let deleteTags = document.querySelectorAll('.tag')
for(let i = 0; i < deleteTags.length; i ++) {
tagContainer.removeChild(deleteTags[i]);
}
/*
* User submits the form for their review.
* We create reviewCard and put in storage
*/
let formData = new FormData(theForm);
let reviewObject = {}
for (let [key, value] of formData) {
@ -46,7 +48,14 @@ function initFormHandler() {
console.log(`${value}`)
reviewObject[`${key}`] = `${value}`
}
//console.log(reviewObject)
reviewObject['tags'] = []
let deleteTags = document.querySelectorAll('.tag')
for(let i = 0; i < deleteTags.length; i ++) {
reviewObject['tags'].push(deleteTags[i].innerHTML);
tagContainer.removeChild(deleteTags[i]);
}
let newReview = document.createElement('review-card')
newReview.data = reviewObject
@ -78,10 +87,9 @@ function initFormHandler() {
});
//allowing for tags selection/creation for user's review card
let tagAddButton = document.getElementById('tagAdd');
tagAddButton.addEventListener('click', ()=> {
let tagField = document.getElementById('tags');
let tagField = document.getElementById('tag-form');
if (tagField.value.length > 0) {
let p = document.createElement('p');
p.innerHTML = tagField.value;

View File

@ -4,13 +4,16 @@
"imgAlt": "tacos pic",
"mealName": "Birria Tacos",
"restaurant": "Mike's Red Tacos",
"rating": 5
"rating": 5,
"tags": ["delicious", "#worthit","omg"]
},
{
"imgSrc": "https://www.redwormcomposting.com/images/worm-burrito.JPG",
"imgAlt": "wolftown pic",
"mealName": "Carnitas Burrito",
"restaurant": "Wolftown UCSD",
"rating": 0
"rating": 0,
"tags": ["gross", "why","no"]
}
]

View File

@ -47,6 +47,11 @@
row-gap: 10px;
width: 100%;
}
.tag-container {
display: flex;
flex-flow: row wrap;
}
.tag {
background-color: grey;
border-radius: 7px;
@ -66,14 +71,14 @@
color: white;
cursor: pointer;
}
.tag:hover::before{
.tag:hover::before {
color: red;
}
.danger {
background-color: rgb(254, 171, 171);
border-color: red;
}
.hidden {
display: none;
}
.danger {
background-color: rgb(254, 171, 171);
border-color: red;
}
.hidden {
display: none;
}