alu/cse110-fa22-group29
1
0
Fork 0
mirror of https://github.com/cse110-fa22-group29/cse110-fa22-group29.git synced 2025-10-30 11:36:50 +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
Download Patch File Download Diff File Expand all files Collapse all files

18
index.html
View File

@@ -12,8 +12,9 @@
<!-- Main Stylesheets & Scripts -->
<link rel="stylesheet" href="/static/ReviewCard.css" />
<link rel="stylesheet" href="/static/reset.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/ReviewCard.css" />
<script src="/source/assets/scripts/main.js" type="module"></script>
</head>
@@ -23,15 +24,14 @@
</main>
<form id="new-food-entry">
<fieldset>
<legend>Photo:</legend>
<label for="image-src">
Source:
<input type="text" id="imgSrc" name="imgSrc" required>
<input type="text" id="imgSrc" name="imgSrc">
</label>
<label for="image-alt">
Alt Text:
<input type="text" id="imgAlt" name="imgAlt" required>
<input type="text" id="imgAlt" name="imgAlt">
</label>
</fieldset>
<fieldset>
@@ -40,15 +40,15 @@
<label for="Meal: ">Meal:
<input type="text" id="mealName" name="mealName" required>
</label>
<label for="review">Description:
<label for="comments">Description:
<br>
<textarea id="review"></textarea>
<textarea name="comments" id="comments"></textarea>
</label>
</fieldset>
<fieldset>
<legend>Rating</legend>
<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 for="rating-1">
1<input type="radio" id="rating-1" value="1" name="rating">
@@ -75,7 +75,7 @@
</label>
<label for="tag-form">
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>

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

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

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

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