alu/cse110-fa22-group29
1
0
Fork 0
mirror of https://github.com/cse110-fa22-group29/cse110-fa22-group29.git synced 2024-12-28 01:39:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

newWindow/cleaning/miniFixes

Browse Source
This commit is contained in:
Kara Hoagland 2022-11-11 00:03:56 -08:00
parent b85a73400d
commit 8263aa6082
4 changed files with 89 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
index.html
View File

@ -12,8 +12,9 @@
<!-- Main Stylesheets & Scripts --> <!-- Main Stylesheets & Scripts -->
<link rel="stylesheet" href="/static/ReviewCard.css" /> <!-- Temporarily commented out reset.css due to furthur discussion needed on the values of the default config-->
<link rel="stylesheet" href="/static/reset.css" /> <!-- <link rel="stylesheet" href="/static/reset.css" /> -->
<link rel="stylesheet" href="./static/ReviewCard.css" />
<script src="/source/assets/scripts/main.js" type="module"></script> <script src="/source/assets/scripts/main.js" type="module"></script>
</head> </head>
@ -23,15 +24,14 @@
</main> </main>
<form id="new-food-entry"> <form id="new-food-entry">
<fieldset> <fieldset>
<legend>Photo:</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">
</label> </label>
<label for="image-alt"> <label for="image-alt">
Alt Text: Alt Text:
<input type="text" id="imgAlt" name="imgAlt" required> <input type="text" id="imgAlt" name="imgAlt">
</label> </label>
</fieldset> </fieldset>
<fieldset> <fieldset>
@ -40,15 +40,15 @@
<label for="Meal: ">Meal: <label for="Meal: ">Meal:
<input type="text" id="mealName" name="mealName" required> <input type="text" id="mealName" name="mealName" required>
</label> </label>
<label for="review">Description: <label for="comments">Description:
<br> <br>
<textarea id="review"></textarea> <textarea name="comments" id="comments"></textarea>
</label> </label>
</fieldset> </fieldset>
<fieldset> <fieldset>
<legend>Rating</legend> <legend>Rating</legend>
<label for="rating-0"> <label for="rating-0">
0<input type="radio" id="rating-0" value="0" name="rating"> 0<input type="radio" id="rating-0" value="0" name="rating" required>
</label> </label>
<label for="rating-1"> <label for="rating-1">
1<input type="radio" id="rating-1" value="1" name="rating"> 1<input type="radio" id="rating-1" value="1" name="rating">
@ -75,7 +75,7 @@
</label> </label>
<label for="tag-form"> <label for="tag-form">
Tags: Tags:
<input type="text" id="tag-form" name="tag-form" required> <input type="text" id="tag-form" name="tag-form">
<div class='tag-container' id="tag-container-form"> <div class='tag-container' id="tag-container-form">
</div> </div>

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

@ -61,11 +61,11 @@ class ReviewCard extends HTMLElement {
width: calc(100% + 32px); width: calc(100% + 32px);
} }
p.restaurant-name { label.restaurant-name {
color: black !important; color: black !important;
} }
p.meal-name { label.meal-name {
display: -webkit-box; display: -webkit-box;
font-size: 16px; font-size: 16px;
height: 36px; height: 36px;
@ -75,7 +75,7 @@ class ReviewCard extends HTMLElement {
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
p:not(.meal-name), label:not(.meal-name),
span, span,
time { time {
color: #70757A; color: #70757A;
@ -84,7 +84,7 @@ class ReviewCard extends HTMLElement {
`; `;
articleEl.append(styleEl); articleEl.append(styleEl);
shadowEl.append(articleEl); shadowEl.append(articleEl);
this.shadowEl = shadowEl this.shadowEl = shadowEl;
} }
/** /**
@ -115,45 +115,42 @@ class ReviewCard extends HTMLElement {
// setting the article elements for the review card // setting the article elements for the review card
//image setup //image setup
let img1 = document.createElement('img'); let mealImg = document.createElement('img');
img1.setAttribute('src',data['imgSrc']); mealImg.setAttribute('src',data['imgSrc']);
img1.setAttribute('alt',data['imgAlt']); mealImg.setAttribute('alt',data['imgAlt']);
//meal name setup //meal name setup
let pMeal = document.createElement('p'); let mealLabel = document.createElement('label');
pMeal.setAttribute('class','meal-name'); mealLabel.setAttribute('class','meal-name');
pMeal.innerHTML = data["mealName"]; mealLabel.innerHTML = data['mealName'];
let pRestaurant = document.createElement('p'); let restaurantLabel = document.createElement('label');
pRestaurant.setAttribute('class','restaurant-name'); restaurantLabel.setAttribute('class','restaurant-name');
pRestaurant.innerHTML = data["restaurant"]; restaurantLabel.innerHTML = data['restaurant'];
//other info: rating //other info: rating
let div = document.createElement('div') let ratingDiv = document.createElement('div');
div.setAttribute('class', 'rating') ratingDiv.setAttribute('class', 'rating');
let span1 = document.createElement('span') let starsImg = document.createElement('img');
span1.innerHTML = data["rating"]; starsImg.setAttribute('src', './source/assets/images/icons/'+data['rating']+'-star.svg');
let img2 = document.createElement('img') starsImg.setAttribute('alt', data['rating'] +' stars');
img2.setAttribute('src', './source/assets/images/icons/'+data['rating']+'-star.svg'); ratingDiv.append(starsImg);
img2.setAttribute('alt', data['rating'] +' stars');
div.append(span1);
div.append(img2);
//added tags //added tags
let tagContainer = document.createElement('div') let tagContainer = document.createElement('div')
tagContainer.setAttribute('class', 'tag-container'); tagContainer.setAttribute('class', 'tag-container');
for (let i = 0; i < data['tags'].length; i++) { for (let i = 0; i < data['tags'].length; i++) {
let newTag = document.createElement('p'); let newTag = document.createElement('label');
newTag.setAttribute('class','tag'); newTag.setAttribute('class','tag');
newTag.innerHTML = data['tags'][i] newTag.innerHTML = data['tags'][i] + " ";
tagContainer.append(newTag) tagContainer.append(newTag);
} }
articleEl.append(img1) articleEl.append(mealImg);
articleEl.append(pMeal) articleEl.append(mealLabel);
articleEl.append(pRestaurant) articleEl.append(restaurantLabel);
articleEl.append(div) articleEl.append(ratingDiv);
articleEl.append(tagContainer) articleEl.append(tagContainer);
} }

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

@ -7,7 +7,7 @@ window.addEventListener('DOMContentLoaded', init);
function init() { function init() {
// Get the reviews from localStorage // Get the reviews from localStorage
let reviews = getReviewsFromStorage(); let reviews = getReviewsFromStorage();
// Add each recipe to the <main> element // Add each reviews to the <main> element
addReviewsToDocument(reviews); addReviewsToDocument(reviews);
// Add the event listeners to the form elements // Add the event listeners to the form elements
initFormHandler(); initFormHandler();
@ -17,66 +17,74 @@ function init() {
* @param {Array<Object>} reviews An array of reviews * @param {Array<Object>} reviews An array of reviews
*/ */
function addReviewsToDocument(reviews) { function addReviewsToDocument(reviews) {
let mainEl = document.querySelector('main') let mainEl = document.querySelector('main');
reviews.forEach(review=> { reviews.forEach(review=> {
let newReview = document.createElement('review-card') let newReview = document.createElement('review-card');
newReview.data = review newReview.data = review;
newReview.addEventListener('click', function(){
//TODO: create a separate file for specs - frontend
var newWin = window.open('about:blank','_self');
});
//TODO: want to append it to whatever the box is in layout
mainEl.append(newReview); mainEl.append(newReview);
}) });
} }
/** /**
* Adds the necesarry event handlers to <form> and the clear storage * Adds the necessary event handlers to <form> and the clear storage
* <button>. * <button>.
*/ */
function initFormHandler() { function initFormHandler() {
//accessing form components //accessing form components
let tagContainer = document.getElementById('tag-container-form'); let tagContainer = document.getElementById('tag-container-form');
let theForm = document.querySelector('form') let form = document.querySelector('form');
let submitButt = document.querySelector('button[type="submit"]')
submitButt.addEventListener('click', function(){ form.addEventListener('submit', function(){
/* /*
* User submits the form for their review. * User submits the form for their review.
* We create reviewCard and put in storage * We create reviewCard and put in storage
*/ */
let formData = new FormData(theForm); let formData = new FormData(form);
let reviewObject = {} let reviewObject = {};
for (let [key, value] of formData) { for (let [key, value] of formData) {
console.log(`${key}`) console.log(`${key}`);
console.log(`${value}`) console.log(`${value}`);
reviewObject[`${key}`] = `${value}` if (`${key}` !== "tag-form") {
reviewObject[`${key}`] = `${value}`;
} }
reviewObject['tags'] = [] }
reviewObject['tags'] = [];
let deleteTags = document.querySelectorAll('.tag') let tags = document.querySelectorAll('.tag');
for(let i = 0; i < deleteTags.length; i ++) { for(let i = 0; i < tags.length; i ++) {
reviewObject['tags'].push(deleteTags[i].innerHTML); reviewObject['tags'].push(tags[i].innerHTML);
tagContainer.removeChild(deleteTags[i]); tagContainer.removeChild(tags[i]);
} }
let newReview = document.createElement('review-card') let newReview = document.createElement('review-card');
newReview.data = reviewObject newReview.data = reviewObject;
let mainEl = document.querySelector('main') //TODO: want to append it to whatever the box is in layout
mainEl.append(newReview) let mainEl = document.querySelector('main');
mainEl.append(newReview);
let aList = getReviewsFromStorage() let storedReviews = getReviewsFromStorage();
aList.push(reviewObject) storedReviews.push(reviewObject);
saveReviewsToStorage(aList) saveReviewsToStorage(storedReviews);
document.getElementById("new-food-entry").reset(); document.getElementById("new-food-entry").reset();
}); });
let clearButt = document.querySelector('.danger') // DEV-MODE: for testing purposes
clearButt.addEventListener('click', function() { let clearBtn = document.querySelector('.danger');
clearBtn.addEventListener('click', function() {
localStorage.clear(); localStorage.clear();
let mainEl = document.querySelector('main') let mainEl = document.querySelector('main');
while (mainEl.firstChild) { while (mainEl.firstChild) {
mainEl.removeChild(mainEl.firstChild); mainEl.removeChild(mainEl.firstChild);
} }
let deleteTags = document.querySelectorAll('.tag') let deleteTags = document.querySelectorAll('.tag');
for(let i = 0; i < deleteTags.length; i ++) { for(let i = 0; i < deleteTags.length; i ++) {
tagContainer.removeChild(deleteTags[i]); tagContainer.removeChild(deleteTags[i]);
} }
@ -87,25 +95,20 @@ function initFormHandler() {
}); });
let tagAddButton = document.getElementById('tagAdd'); let tagAddBtn = document.getElementById('tagAdd');
tagAddButton.addEventListener('click', ()=> { tagAddBtn.addEventListener('click', ()=> {
let tagField = document.getElementById('tag-form'); let tagField = document.getElementById('tag-form');
if (tagField.value.length > 0) { if (tagField.value.length > 0) {
let p = document.createElement('p'); let tagLabel = document.createElement('label');
p.innerHTML = tagField.value; tagLabel.innerHTML = tagField.value;
p.setAttribute('class','tag') tagLabel.setAttribute('class','tag');
tagLabel.addEventListener('click',()=> {
tagContainer.removeChild(tagLabel);
});
tagContainer.append(p); tagContainer.append(tagLabel);
tagField.value = ''; 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]);
})
}
} }
}); });

12
static/reset.css
View File

@ -58,25 +58,25 @@ table {
} }
input, select { input, select {
vertical-align :middle; vertical-align: middle;
} }
img, fieldset, object { img, fieldset, object {
border:none; border: none;
} }
*, *:after, *:before { *, *:after, *:before {
box-sizing:border-box; box-sizing: border-box;
} }
button, label { button, label {
cursor:pointer; cursor: pointer;
} }
html, body { html, body {
height:100%; height: 100%;
} }
form { form {
border border: solid;
} }