lab6 starter

source/assets/scripts/RecipeCard.js

@@ -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);

source/assets/scripts/main.js

@@ -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>
+
+}