This commit is contained in:
rheabhutada02 2022-11-10 18:17:18 -08:00
commit 23c29e80bc
9 changed files with 152 additions and 44 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

@ -2,9 +2,9 @@
"name": "food-journal",
"version": "1.0.0",
"scripts": {
"test": "mocha --recursive **/*.test.js",
"test": "mocha --recursive './{,!(node_modules)/**}/*.test.js'",
"lint": "eslint **/*.js",
"fix-style": "eslint --fix **/*.js"
"fix-style": "eslint --fix '**/*.js'"
},
"devDependencies": {
"eslint": "^8.27.0",

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

@ -0,0 +1,22 @@
//
//module.exports = {getReviewsFromStorage, saveReviewsToStorage};
/**
* @returns {Array<Object>} An array of reviews found in localStorage
*/
export function getReviewsFromStorage() {
let result = JSON.parse(localStorage.getItem('reviews'))
if (result) {
return result;
}
return new Array(0);
}
/**
* Takes in an array of reviews, converts it to a string, and then
* saves that string to 'reviews' in localStorage
* @param {Array<Object>} reviews An array of reviews
*/
export function saveReviewsToStorage(reviews) {
localStorage.setItem('reviews', JSON.stringify(reviews));
}

View File

@ -0,0 +1,49 @@
const {getReviewsFromStorage, saveReviewsToStorage} = require("./localStorage");
const {environment} = require("./testenv");
const assert = require("assert");
const {describe, it, beforeEach} = require("mocha");
beforeEach(() => {
window = environment();
localStorage = window.localStorage;
});
describe("test app localStorage interaction", () => {
it("get after init", () => {
assert.deepEqual(getReviewsFromStorage(), []);
});
it("store one then get", () => {
let reviews = [{
"imgSrc": "sample src",
"imgAlt": "sample alt",
"mealName": "sample name",
"restaurant": "sample restaurant",
"rating": 5,
"tags": ["tag 1", "tag 2", "tag 3"]
}];
saveReviewsToStorage(reviews);
assert.deepEqual(getReviewsFromStorage(), reviews);
});
it("repeated store one more and get", () => {
saveReviewsToStorage(reviews);
assert.deepEqual(getReviewsFromStorage(), reviews);
for(let i = 0; i < 1000; i++){
reviews = getReviewsFromStorage();
reviews.push(
{
"imgSrc": `sample src ${i}`,
"imgAlt": `sample alt ${i}`,
"mealName": `sample name ${i}`,
"restaurant": `sample restaurant ${i}`,
"rating": i,
"tags": [`tag ${3*i}`, `tag ${3*i + 1}`, `tag ${3*i + 2}`]
}
)
saveReviewsToStorage(reviews);
assert.deepEqual(getReviewsFromStorage(), reviews);
}
});
});

View File

@ -1,4 +1,5 @@
// main.js
import {getReviewsFromStorage, saveReviewsToStorage} from './localStorage.js';
// Run the init() function when the page has loaded
window.addEventListener('DOMContentLoaded', init);
@ -12,17 +13,6 @@ function init() {
initFormHandler();
}
/**
* @returns {Array<Object>} An array of reviews found in localStorage
*/
function getReviewsFromStorage() {
let result = JSON.parse(localStorage.getItem('reviews'))
if (result) {
return result;
}
return new Array(0);
}
/**
* @param {Array<Object>} reviews An array of reviews
*/
@ -36,28 +26,21 @@ function addReviewsToDocument(reviews) {
}
/**
* Takes in an array of reviews, converts it to a string, and then
* saves that string to 'reviews' in localStorage
* @param {Array<Object>} reviews An array of reviews
*/
function saveReviewsToStorage(reviews) {
localStorage.setItem('reviews', JSON.stringify(reviews));
}
/**
* Adds the necesarry event handlers to <form> and the clear storage
* <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) {
@ -65,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
@ -97,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

@ -0,0 +1,28 @@
module.exports = {environment};
function environment () {
const localStorageMock = (function () {
let store = {};
return {
getItem(key) {
return store[key];
},
setItem(key, value) {
store[key] = value;
},
clear() {
store = {};
},
removeItem(key) {
delete store[key];
},
getAll() {
return store;
},
};
})();
let window = {};
Object.defineProperty(window, "localStorage", { value: localStorageMock });
return window;
}

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 {
.danger {
background-color: rgb(254, 171, 171);
border-color: red;
}
}
.hidden {
.hidden {
display: none;
}
}