lab6 starter

source/assets/images/icons/0-star.svg

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

source/assets/images/icons/1-star.svg

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

source/assets/images/icons/2-star.svg

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

source/assets/images/icons/3-star.svg

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

source/assets/images/icons/4-star.svg

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

source/assets/images/icons/5-star.svg

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

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

source/assets/styles/main.css

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

source/index.html

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