mirror of
https://github.com/cse110-fa22-group29/cse110-fa22-group29.git
synced 2024-12-26 17:09:09 +00:00
lab6 starter
This commit is contained in:
Gavyn Ezell
parent
50f0679a76
commit
e64222aec1
BIN
source/assets/images/1_spooky-ghost-cookies.jpeg
Normal file
BIN
source/assets/images/1_spooky-ghost-cookies.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
BIN
source/assets/images/2_frightfully-easy-ghost-cookies.jpeg
Normal file
BIN
source/assets/images/2_frightfully-easy-ghost-cookies.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
BIN
source/assets/images/3_ingredient-ghost-halloween-cookies.jpeg
Normal file
BIN
source/assets/images/3_ingredient-ghost-halloween-cookies.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
1
source/assets/images/icons/0-star.svg
Normal file
1
source/assets/images/icons/0-star.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 157.02 27.59"><defs><style>.cls-1{fill:#dadce0;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M142.51,0l-3.42,10.53c-3.66,0-7.61,0-11.09,0l9,6.51c-1.12,3.47-2.35,7.24-3.42,10.54,2.87-2.1,5.92-4.3,9-6.51l9,6.51c-1.12-3.41-2.26-6.95-3.42-10.54l9-6.51H145.94"/><path class="cls-1" d="M110.51,0l-3.42,10.53c-3.66,0-7.61,0-11.09,0l9,6.51c-1.12,3.47-2.35,7.24-3.42,10.54,2.87-2.1,5.92-4.3,9-6.51l9,6.51c-1.12-3.41-2.26-6.95-3.42-10.54l9-6.51H113.94"/><path class="cls-1" d="M78.51,0,75.09,10.53c-3.66,0-7.61,0-11.09,0l9,6.51c-1.12,3.47-2.35,7.24-3.42,10.54,2.87-2.1,5.92-4.3,9-6.51l9,6.51c-1.12-3.41-2.26-6.95-3.42-10.54l9-6.51H81.94"/><path class="cls-1" d="M46.51,0,43.09,10.53c-3.66,0-7.61,0-11.09,0l9,6.51c-1.12,3.47-2.35,7.24-3.42,10.54,2.87-2.1,5.92-4.3,9-6.51l9,6.51c-1.12-3.41-2.26-6.95-3.42-10.54l9-6.51H49.94"/><path class="cls-1" d="M14.51,0,11.09,10.53c-3.66,0-7.61,0-11.09,0l9,6.51c-1.12,3.47-2.35,7.24-3.42,10.54,2.87-2.1,5.92-4.3,9-6.51l9,6.51c-1.12-3.41-2.26-6.95-3.42-10.54l9-6.51H17.94"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
1
source/assets/images/icons/1-star.svg
Normal file
1
source/assets/images/icons/1-star.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 157.02 27.59"><defs><style>.cls-1{fill:#febc17;}.cls-2{fill:#dadce0;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M14.51,0,11.09,10.53c-3.66,0-7.61,0-11.09,0l9,6.51c-1.12,3.47-2.35,7.24-3.42,10.54,2.87-2.1,5.92-4.3,9-6.51l9,6.51c-1.12-3.41-2.26-6.95-3.42-10.54l9-6.51H17.94"/><path class="cls-2" d="M142.51,0l-3.42,10.53c-3.66,0-7.61,0-11.09,0l9,6.51c-1.12,3.47-2.35,7.24-3.42,10.54,2.87-2.1,5.92-4.3,9-6.51l9,6.51c-1.12-3.41-2.26-6.95-3.42-10.54l9-6.51H145.94"/><path class="cls-2" d="M110.51,0l-3.42,10.53c-3.66,0-7.61,0-11.09,0l9,6.51c-1.12,3.47-2.35,7.24-3.42,10.54,2.87-2.1,5.92-4.3,9-6.51l9,6.51c-1.12-3.41-2.26-6.95-3.42-10.54l9-6.51H113.94"/><path class="cls-2" d="M78.51,0,75.09,10.53c-3.66,0-7.61,0-11.09,0l9,6.51c-1.12,3.47-2.35,7.24-3.42,10.54,2.87-2.1,5.92-4.3,9-6.51l9,6.51c-1.12-3.41-2.26-6.95-3.42-10.54l9-6.51H81.94"/><path class="cls-2" d="M46.51,0,43.09,10.53c-3.66,0-7.61,0-11.09,0l9,6.51c-1.12,3.47-2.35,7.24-3.42,10.54,2.87-2.1,5.92-4.3,9-6.51l9,6.51c-1.12-3.41-2.26-6.95-3.42-10.54l9-6.51H49.94"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
1
source/assets/images/icons/2-star.svg
Normal file
1
source/assets/images/icons/2-star.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 157.02 27.59"><defs><style>.cls-1{fill:#febc17;}.cls-2{fill:#dadce0;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M14.51,0,11.09,10.53c-3.66,0-7.61,0-11.09,0l9,6.51c-1.12,3.47-2.35,7.24-3.42,10.54,2.87-2.1,5.92-4.3,9-6.51l9,6.51c-1.12-3.41-2.26-6.95-3.42-10.54l9-6.51H17.94"/><path class="cls-1" d="M46.51,0,43.09,10.53c-3.66,0-7.61,0-11.09,0l9,6.51c-1.12,3.47-2.35,7.24-3.42,10.54,2.87-2.1,5.92-4.3,9-6.51l9,6.51c-1.12-3.41-2.26-6.95-3.42-10.54l9-6.51H49.94"/><path class="cls-2" d="M142.51,0l-3.42,10.53c-3.66,0-7.61,0-11.09,0l9,6.51c-1.12,3.47-2.35,7.24-3.42,10.54,2.87-2.1,5.92-4.3,9-6.51l9,6.51c-1.12-3.41-2.26-6.95-3.42-10.54l9-6.51H145.94"/><path class="cls-2" d="M110.51,0l-3.42,10.53c-3.66,0-7.61,0-11.09,0l9,6.51c-1.12,3.47-2.35,7.24-3.42,10.54,2.87-2.1,5.92-4.3,9-6.51l9,6.51c-1.12-3.41-2.26-6.95-3.42-10.54l9-6.51H113.94"/><path class="cls-2" d="M78.51,0,75.09,10.53c-3.66,0-7.61,0-11.09,0l9,6.51c-1.12,3.47-2.35,7.24-3.42,10.54,2.87-2.1,5.92-4.3,9-6.51l9,6.51c-1.12-3.41-2.26-6.95-3.42-10.54l9-6.51H81.94"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
1
source/assets/images/icons/3-star.svg
Normal file
1
source/assets/images/icons/3-star.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 157.02 27.59"><defs><style>.cls-1{fill:#febc17;}.cls-2{fill:#dadce0;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M14.51,0,11.09,10.53c-3.66,0-7.61,0-11.09,0l9,6.51c-1.12,3.47-2.35,7.24-3.42,10.54,2.87-2.1,5.92-4.3,9-6.51l9,6.51c-1.12-3.41-2.26-6.95-3.42-10.54l9-6.51H17.94"/><path class="cls-1" d="M46.51,0,43.09,10.53c-3.66,0-7.61,0-11.09,0l9,6.51c-1.12,3.47-2.35,7.24-3.42,10.54,2.87-2.1,5.92-4.3,9-6.51l9,6.51c-1.12-3.41-2.26-6.95-3.42-10.54l9-6.51H49.94"/><path class="cls-1" d="M78.51,0,75.09,10.53c-3.66,0-7.61,0-11.09,0l9,6.51c-1.12,3.47-2.35,7.24-3.42,10.54,2.87-2.1,5.92-4.3,9-6.51l9,6.51c-1.12-3.41-2.26-6.95-3.42-10.54l9-6.51H81.94"/><path class="cls-2" d="M142.51,0l-3.42,10.53c-3.66,0-7.61,0-11.09,0l9,6.51c-1.12,3.47-2.35,7.24-3.42,10.54,2.87-2.1,5.92-4.3,9-6.51l9,6.51c-1.12-3.41-2.26-6.95-3.42-10.54l9-6.51H145.94"/><path class="cls-2" d="M110.51,0l-3.42,10.53c-3.66,0-7.61,0-11.09,0l9,6.51c-1.12,3.47-2.35,7.24-3.42,10.54,2.87-2.1,5.92-4.3,9-6.51l9,6.51c-1.12-3.41-2.26-6.95-3.42-10.54l9-6.51H113.94"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
1
source/assets/images/icons/4-star.svg
Normal file
1
source/assets/images/icons/4-star.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 157.02 27.59"><defs><style>.cls-1{fill:#febc17;}.cls-2{fill:#dadce0;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M14.51,0,11.09,10.53c-3.66,0-7.61,0-11.09,0l9,6.51c-1.12,3.47-2.35,7.24-3.42,10.54,2.87-2.1,5.92-4.3,9-6.51l9,6.51c-1.12-3.41-2.26-6.95-3.42-10.54l9-6.51H17.94"/><path class="cls-1" d="M46.51,0,43.09,10.53c-3.66,0-7.61,0-11.09,0l9,6.51c-1.12,3.47-2.35,7.24-3.42,10.54,2.87-2.1,5.92-4.3,9-6.51l9,6.51c-1.12-3.41-2.26-6.95-3.42-10.54l9-6.51H49.94"/><path class="cls-1" d="M78.51,0,75.09,10.53c-3.66,0-7.61,0-11.09,0l9,6.51c-1.12,3.47-2.35,7.24-3.42,10.54,2.87-2.1,5.92-4.3,9-6.51l9,6.51c-1.12-3.41-2.26-6.95-3.42-10.54l9-6.51H81.94"/><path class="cls-1" d="M110.51,0l-3.42,10.53c-3.66,0-7.61,0-11.09,0l9,6.51c-1.12,3.47-2.35,7.24-3.42,10.54,2.87-2.1,5.92-4.3,9-6.51l9,6.51c-1.12-3.41-2.26-6.95-3.42-10.54l9-6.51H113.94"/><path class="cls-2" d="M142.51,0l-3.42,10.53c-3.66,0-7.61,0-11.09,0l9,6.51c-1.12,3.47-2.35,7.24-3.42,10.54,2.87-2.1,5.92-4.3,9-6.51l9,6.51c-1.12-3.41-2.26-6.95-3.42-10.54l9-6.51H145.94"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
1
source/assets/images/icons/5-star.svg
Normal file
1
source/assets/images/icons/5-star.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 157.02 27.59"><defs><style>.cls-1{fill:#febc17;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M14.51,0,11.09,10.53c-3.66,0-7.61,0-11.09,0l9,6.51c-1.12,3.47-2.35,7.24-3.42,10.54,2.87-2.1,5.92-4.3,9-6.51l9,6.51c-1.12-3.41-2.26-6.95-3.42-10.54l9-6.51H17.94"/><path class="cls-1" d="M46.51,0,43.09,10.53c-3.66,0-7.61,0-11.09,0l9,6.51c-1.12,3.47-2.35,7.24-3.42,10.54,2.87-2.1,5.92-4.3,9-6.51l9,6.51c-1.12-3.41-2.26-6.95-3.42-10.54l9-6.51H49.94"/><path class="cls-1" d="M78.51,0,75.09,10.53c-3.66,0-7.61,0-11.09,0l9,6.51c-1.12,3.47-2.35,7.24-3.42,10.54,2.87-2.1,5.92-4.3,9-6.51l9,6.51c-1.12-3.41-2.26-6.95-3.42-10.54l9-6.51H81.94"/><path class="cls-1" d="M110.51,0l-3.42,10.53c-3.66,0-7.61,0-11.09,0l9,6.51c-1.12,3.47-2.35,7.24-3.42,10.54,2.87-2.1,5.92-4.3,9-6.51l9,6.51c-1.12-3.41-2.26-6.95-3.42-10.54l9-6.51H113.94"/><path class="cls-1" d="M142.51,0l-3.42,10.53c-3.66,0-7.61,0-11.09,0l9,6.51c-1.12,3.47-2.35,7.24-3.42,10.54,2.87-2.1,5.92-4.3,9-6.51l9,6.51c-1.12-3.41-2.26-6.95-3.42-10.54l9-6.51H145.94"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
180
source/assets/scripts/RecipeCard.js
Normal file
180
source/assets/scripts/RecipeCard.js
Normal file
@ -0,0 +1,180 @@
|
||||
// RecipeCard.js
|
||||
|
||||
class RecipeCard extends HTMLElement {
|
||||
// Called once when document.createElement('recipe-card') is called, or
|
||||
// the element is written into the DOM directly as <recipe-card>
|
||||
constructor() {
|
||||
super(); // Inheret everything from HTMLElement
|
||||
|
||||
// EXPOSE - START (All expose numbers start with A)
|
||||
// A1. TODO - Attach the shadow DOM to this Web Component (leave the mode open)
|
||||
let shadowEl = this.attachShadow({mode:'open'});
|
||||
// A2. TODO - Create an <article> element - This will hold our markup once our data is set
|
||||
let articleEl = document.createElement('article');
|
||||
// A3. TODO - Create a style element - This will hold all of the styles for the Web Component
|
||||
let styleEl = document.createElement('style');
|
||||
// A4. TODO - Insert all of the styles from cardTemplate.html into the <style> element you just made
|
||||
styleEl.textContent = `
|
||||
* {
|
||||
font-family: sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
article {
|
||||
align-items: center;
|
||||
border: 1px solid rgb(223, 225, 229);
|
||||
border-radius: 8px;
|
||||
display: grid;
|
||||
grid-template-rows: 118px 56px 14px 18px 15px 36px;
|
||||
height: auto;
|
||||
row-gap: 5px;
|
||||
padding: 0 16px 16px 16px;
|
||||
width: 178px;
|
||||
}
|
||||
|
||||
div.rating {
|
||||
align-items: center;
|
||||
column-gap: 5px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
div.rating>img {
|
||||
height: auto;
|
||||
display: inline-block;
|
||||
object-fit: scale-down;
|
||||
width: 78px;
|
||||
}
|
||||
|
||||
article>img {
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
height: 118px;
|
||||
object-fit: cover;
|
||||
margin-left: -16px;
|
||||
width: calc(100% + 32px);
|
||||
}
|
||||
|
||||
p.ingredients {
|
||||
height: 32px;
|
||||
line-height: 16px;
|
||||
padding-top: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
p.organization {
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
p.title {
|
||||
display: -webkit-box;
|
||||
font-size: 16px;
|
||||
height: 36px;
|
||||
line-height: 18px;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
p:not(.title),
|
||||
span,
|
||||
time {
|
||||
color: #70757A;
|
||||
font-size: 12px;
|
||||
}
|
||||
`;
|
||||
// A5. TODO - Append the <style> and <article> elements to the Shadow DOM
|
||||
articleEl.append(styleEl);
|
||||
shadowEl.append(articleEl);
|
||||
this.shadowEl = shadowEl
|
||||
}
|
||||
|
||||
/**
|
||||
* Called when the .data property is set on this element.
|
||||
*
|
||||
* For Example:
|
||||
* let recipeCard = document.createElement('recipe-card'); // Calls constructor()
|
||||
* recipeCard.data = { foo: 'bar' } // Calls set data({ foo: 'bar' })
|
||||
*
|
||||
* @param {Object} data - The data to pass into the <recipe-card>, must be of the
|
||||
* following format:
|
||||
* {
|
||||
* "imgSrc": "string",
|
||||
* "imgAlt": "string",
|
||||
* "titleLnk": "string",
|
||||
* "titleTxt": "string",
|
||||
* "organization": "string",
|
||||
* "rating": number,
|
||||
* "numRatings": number,
|
||||
* "lengthTime": "string",
|
||||
* "ingredients": "string"
|
||||
* }
|
||||
*/
|
||||
set data(data) {
|
||||
// If nothing was passed in, return
|
||||
if (!data) return;
|
||||
|
||||
// A6. TODO - Select the <article> we added to the Shadow DOM in the constructor
|
||||
let articleEl = this.shadowEl.querySelector('article');
|
||||
// A7. TODO - Set the contents of the <article> with the <article> template given in
|
||||
// cardTemplate.html and the data passed in (You should only have one <article>,
|
||||
// do not nest an <article> inside another <article>). You should use Template
|
||||
// literals (tempalte strings) and element.innerHTML for this.
|
||||
|
||||
let img1 = document.createElement('img');
|
||||
img1.setAttribute('src',data['imgSrc']);
|
||||
img1.setAttribute('alt',data['imgAlt']);
|
||||
|
||||
let pTitle = document.createElement('p');
|
||||
let aTitle = document.createElement('a');
|
||||
pTitle.setAttribute('class','title');
|
||||
aTitle.setAttribute('href', data['titleLnk']);
|
||||
aTitle.innerHTML = data['titleTxt'];
|
||||
pTitle.append(aTitle)
|
||||
|
||||
let pOrg = document.createElement('p');
|
||||
pOrg.setAttribute('class','organization');
|
||||
pOrg.innerHTML = data["organization"];
|
||||
|
||||
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', './assets/images/icons/'+data['rating']+'-star.svg');
|
||||
img2.setAttribute('alt', data['rating'] +' stars');
|
||||
let span2 = document.createElement('span')
|
||||
span2.innerHTML = '('+data['numRatings']+')';
|
||||
div.append(span1);
|
||||
div.append(img2);
|
||||
div.append(span2);
|
||||
|
||||
let timeEl = document.createElement('time')
|
||||
timeEl.innerHTML = data['lengthTime']
|
||||
|
||||
let pIngred = document.createElement('p');
|
||||
pIngred.setAttribute('class','ingredients')
|
||||
pIngred.innerHTML = data['ingredients'];
|
||||
|
||||
articleEl.append(img1)
|
||||
articleEl.append(pTitle)
|
||||
articleEl.append(pOrg)
|
||||
articleEl.append(div)
|
||||
articleEl.append(timeEl)
|
||||
articleEl.append(pIngred)
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// A8. TODO - Define the Class as a customElement so that you can create
|
||||
// 'recipe-card' elements
|
||||
|
||||
customElements.define('recipe-card', RecipeCard);
|
||||
132
source/assets/scripts/main.js
Normal file
132
source/assets/scripts/main.js
Normal file
@ -0,0 +1,132 @@
|
||||
// main.js
|
||||
|
||||
// Run the init() function when the page has loaded
|
||||
window.addEventListener('DOMContentLoaded', init);
|
||||
|
||||
// Starts the program, all function calls trace back here
|
||||
function init() {
|
||||
// Get the recipes from localStorage
|
||||
let recipes = getRecipesFromStorage();
|
||||
// Add each recipe to the <main> element
|
||||
addRecipesToDocument(recipes);
|
||||
// Add the event listeners to the form elements
|
||||
initFormHandler();
|
||||
}
|
||||
|
||||
/**
|
||||
* Reads 'recipes' from localStorage and returns an array of
|
||||
* all of the recipes found (parsed, not in string form). If
|
||||
* nothing is found in localStorage for 'recipes', an empty array
|
||||
* is returned.
|
||||
* @returns {Array<Object>} An array of recipes found in localStorage
|
||||
*/
|
||||
function getRecipesFromStorage() {
|
||||
// A9. TODO - Complete the functionality as described in this function
|
||||
// header. It is possible in only a single line, but should
|
||||
// be no more than a few lines.
|
||||
let result = JSON.parse(localStorage.getItem('recipes'))
|
||||
if (result) {
|
||||
return result;
|
||||
}
|
||||
return new Array(0);
|
||||
}
|
||||
|
||||
/**
|
||||
* Takes in an array of recipes and for each recipe creates a
|
||||
* new <recipe-card> element, adds the recipe data to that card
|
||||
* using element.data = {...}, and then appends that new recipe
|
||||
* to <main>
|
||||
* @param {Array<Object>} recipes An array of recipes
|
||||
*/
|
||||
function addRecipesToDocument(recipes) {
|
||||
// A10. TODO - Get a reference to the <main> element
|
||||
let mainEl = document.querySelector('main')
|
||||
recipes.forEach(recipe=> {
|
||||
let newRecipe = document.createElement('recipe-card')
|
||||
newRecipe.data = recipe
|
||||
mainEl.append(newRecipe);
|
||||
})
|
||||
// A11. TODO - Loop through each of the recipes in the passed in array,
|
||||
// create a <recipe-card> element for each one, and populate
|
||||
// each <recipe-card> with that recipe data using element.data = ...
|
||||
// Append each element to <main>
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Takes in an array of recipes, converts it to a string, and then
|
||||
* saves that string to 'recipes' in localStorage
|
||||
* @param {Array<Object>} recipes An array of recipes
|
||||
*/
|
||||
function saveRecipesToStorage(recipes) {
|
||||
// EXPLORE - START (All explore numbers start with B)
|
||||
// B1. TODO - Complete the functionality as described in this function
|
||||
// header. It is possible in only a single line, but should
|
||||
// be no more than a few lines.
|
||||
localStorage.setItem('recipes', JSON.stringify(recipes));
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds the necesarry event handlers to <form> and the clear storage
|
||||
* <button>.
|
||||
*/
|
||||
function initFormHandler() {
|
||||
|
||||
// B2. TODO - Get a reference to the <form> element
|
||||
let theForm = document.querySelector('form')
|
||||
|
||||
// B3. TODO - Add an event listener for the 'submit' event, which fires when the
|
||||
// submit button is clicked
|
||||
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 newRecipe = document.createElement('recipe-card')
|
||||
newRecipe.data = recipeObject
|
||||
|
||||
let mainEl = document.querySelector('main')
|
||||
mainEl.append(newRecipe)
|
||||
|
||||
let aList = getRecipesFromStorage()
|
||||
//console.log(typeof(aList))
|
||||
//console.log(aList)
|
||||
aList.push(recipeObject)
|
||||
saveRecipesToStorage(aList)
|
||||
});
|
||||
|
||||
let clearButt = document.querySelector('.danger')
|
||||
clearButt.addEventListener('click', function() {
|
||||
localStorage.clear();
|
||||
let mainEl = document.querySelector('main')
|
||||
while (mainEl.firstChild) {
|
||||
mainEl.removeChild(mainEl.firstChild);
|
||||
}
|
||||
});
|
||||
|
||||
// Steps B4-B9 will occur inside the event listener from step B3
|
||||
// B4. TODO - Create a new FormData object from the <form> element reference above
|
||||
// B5. TODO - Create an empty object (I'll refer to this object as recipeObject to
|
||||
// make this easier to read), and then extract the keys and corresponding
|
||||
// values from the FormData object and insert them into recipeObject
|
||||
|
||||
// B6. TODO - Create a new <recipe-card> element
|
||||
// B7. TODO - Add the recipeObject data to <recipe-card> using element.data
|
||||
// B8. TODO - Append this new <recipe-card> to <main>
|
||||
// B9. TODO - Get the recipes array from localStorage, add this new recipe to it, and
|
||||
// then save the recipes array back to localStorage
|
||||
|
||||
// B10. TODO - Get a reference to the "Clear Local Storage" button
|
||||
// B11. TODO - Add a click event listener to clear local storage button
|
||||
|
||||
// Steps B12 & B13 will occur inside the event listener from step B11
|
||||
// B12. TODO - Clear the local storage
|
||||
// B13. TODO - Delete the contents of <main>
|
||||
|
||||
}
|
||||
58
source/assets/styles/main.css
Normal file
58
source/assets/styles/main.css
Normal file
@ -0,0 +1,58 @@
|
||||
/* main.css */
|
||||
|
||||
* {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 2px solid rgb(214, 214, 214);
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
form button {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
label[for="ingredients"] p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
label[for="numRatings"] {
|
||||
margin: 10px 0 0 0;
|
||||
}
|
||||
|
||||
label[for^="rating"] {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
label:not([for^="rating"]) {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
main {
|
||||
column-gap: 10px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
height: auto;
|
||||
max-width: 660px;
|
||||
row-gap: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.danger {
|
||||
background-color: rgb(254, 171, 171);
|
||||
border-color: red;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
87
source/index.html
Normal file
87
source/index.html
Normal file
@ -0,0 +1,87 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Lab 6 - Recipe Cards</title>
|
||||
|
||||
<!-- Recipe Card Custom Element -->
|
||||
<script src="assets/scripts/RecipeCard.js" type="module"></script>
|
||||
|
||||
<!-- Main Stylesheets & Scripts -->
|
||||
<link rel="stylesheet" href="assets/styles/main.css" />
|
||||
<script src="assets/scripts/main.js" type="module"></script>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<!-- Add Recipes Here -->
|
||||
</main>
|
||||
<!-- For the Explore section - Remove "hidden" class before beginning -->
|
||||
<form id="new-recipe">
|
||||
<fieldset>
|
||||
<legend>Image:</legend>
|
||||
<label for="image-src">
|
||||
Source:
|
||||
<input type="text" id="imgSrc" name="imgSrc" required>
|
||||
</label>
|
||||
<label for="image-alt">
|
||||
Alt Text:
|
||||
<input type="text" id="imgAlt" name="imgAlt" required>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Title:</legend>
|
||||
<label for="title-txt">Text:
|
||||
<input type="text" id="titleTxt" name="titleTxt" required>
|
||||
</label>
|
||||
<label for="title-lnk">Link:
|
||||
<input type="url" id="titleLnk" name="titleLnk" required>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Rating</legend>
|
||||
<label for="rating-0">
|
||||
0<input type="radio" id="rating-0" value="0" name="rating">
|
||||
</label>
|
||||
<label for="rating-1">
|
||||
1<input type="radio" id="rating-1" value="1" name="rating">
|
||||
</label>
|
||||
<label for="rating-2">
|
||||
2<input type="radio" id="rating-2" value="2" name="rating">
|
||||
</label>
|
||||
<label for="rating-3">
|
||||
3<input type="radio" id="rating-3" value="3" name="rating">
|
||||
</label>
|
||||
<label for="rating-4">
|
||||
4<input type="radio" id="rating-4" value="4" name="rating">
|
||||
</label>
|
||||
<label for="rating-5">
|
||||
5<input type="radio" id="rating-5" value="5" name="rating">
|
||||
</label>
|
||||
<label for="numRatings">
|
||||
Num Ratings:
|
||||
<input type="number" id="numRatings" name="numRatings">
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Other Info:</legend>
|
||||
<label for="organization">
|
||||
Organization:
|
||||
<input type="text" id="organization" name="organization" required>
|
||||
</label>
|
||||
<label for="lengthTime">
|
||||
Length (time):
|
||||
<input type="text" id="lengthTime" name="lengthTime" required>
|
||||
</label>
|
||||
<label for="ingredients">
|
||||
<p>Ingredients:</p>
|
||||
<textarea name="ingredients" id="ingredients" cols="38" rows="5"
|
||||
required></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<button type="submit">Add Recipe</button>
|
||||
<button type="button" class="danger">Clear Local Storage</button>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user