diff --git a/src/main/java/shef/data/Recipe.java b/src/main/java/shef/data/Recipe.java
index 1d1527f..5a8cf81 100644
--- a/src/main/java/shef/data/Recipe.java
+++ b/src/main/java/shef/data/Recipe.java
@@ -23,6 +23,7 @@
 import java.util.Iterator;
 import com.google.appengine.api.datastore.Entity;
 import com.google.appengine.api.datastore.EmbeddedEntity;
+import com.google.appengine.api.datastore.KeyFactory;
 
 /** Stores a recipe's data. */
 public class Recipe {
@@ -38,6 +39,7 @@ public class Recipe {
   private List<Step> steps;
   private Set<SpinOff> spinOffs;
   private long timestamp;
+  private boolean hasLiveStream;
 
   /**
    * Copy constructor called when creating spin-offs.
@@ -65,11 +67,14 @@ public Recipe(String name, String description, Set<String> tags, Set<String> ing
 
   /** Creates a Recipe from a Datastore entity. */
   public Recipe(Entity recipeEntity) {
+    this.key = KeyFactory.keyToString(recipeEntity.getKey());
     this.name = (String) recipeEntity.getProperty("name");
+    this.user = (String) recipeEntity.getProperty("user");
     this.description = (String) recipeEntity.getProperty("description");
     this.tags = getTagsFromEntity((Collection<EmbeddedEntity>) recipeEntity.getProperty("tags"));
     this.ingredients = getIngredientsFromEntity((Collection<EmbeddedEntity>) recipeEntity.getProperty("ingredients"));
     this.steps = getStepsFromEntity((Collection<EmbeddedEntity>) recipeEntity.getProperty("steps"));
+    this.hasLiveStream = (boolean) recipeEntity.getProperty("has-live-stream");
     this.timestamp = (long) recipeEntity.getProperty("timestamp");
   }
 
diff --git a/src/main/java/shef/servlets/DisplayRecipesServlet.java b/src/main/java/shef/servlets/DisplayRecipesServlet.java
index 1a47c9d..24aca87 100644
--- a/src/main/java/shef/servlets/DisplayRecipesServlet.java
+++ b/src/main/java/shef/servlets/DisplayRecipesServlet.java
@@ -53,7 +53,7 @@ public void doGet(HttpServletRequest request, HttpServletResponse response) thro
  
     List<Recipe> recipes = new ArrayList<>();
     for (Entity entity : results.asIterable()) {
-      recipes.add(entityToRecipe(entity));
+      recipes.add(new Recipe(entity));
     }
  
     Gson gson = new Gson();
@@ -61,27 +61,4 @@ public void doGet(HttpServletRequest request, HttpServletResponse response) thro
     response.setContentType("application/json;");
     response.getWriter().println(gson.toJson(recipes));
   }
-
-   /** Converts a Datastore entity into a Recipe. */
-  public Recipe entityToRecipe(Entity recipeEntity) {
-    String key = KeyFactory.keyToString(recipeEntity.getKey());
-    String user = (String) recipeEntity.getProperty("user");
-    String name = (String) recipeEntity.getProperty("name");
-    String description = (String) recipeEntity.getProperty("description");
-    LinkedHashSet<String> tags = new LinkedHashSet<>((LinkedList<String>) (LinkedList<?>) getDataAsList(recipeEntity.getProperty("tags"), "tag"));
-    LinkedHashSet<String> ingredients = new LinkedHashSet<>((LinkedList<String>) (LinkedList<?>) getDataAsList(recipeEntity.getProperty("ingredients"), "ingredient"));
-    LinkedList<Step> steps = (LinkedList<Step>) (LinkedList<?>) getDataAsList(recipeEntity.getProperty("steps"), "step");
-    long timestamp = (long) recipeEntity.getProperty("timestamp");
-    return new Recipe(key, name, user, description, tags, ingredients, steps, timestamp);
-  }
-
-  /** Gets a list of Recipe parameters from a Datastore property. */
-  public Collection<Object> getDataAsList(Object propertiesObject, String field) {
-    Collection<EmbeddedEntity> properties = (Collection<EmbeddedEntity>) propertiesObject;
-    Collection<Object> dataAsList = new LinkedList<>();
-    for (EmbeddedEntity property : properties) {
-      dataAsList.add(property.getProperty(field));
-    }
-    return dataAsList;
-  }
 }
diff --git a/src/main/java/shef/servlets/NewLiveStreamServlet.java b/src/main/java/shef/servlets/NewLiveStreamServlet.java
index d30b279..5630d8e 100644
--- a/src/main/java/shef/servlets/NewLiveStreamServlet.java
+++ b/src/main/java/shef/servlets/NewLiveStreamServlet.java
@@ -20,6 +20,13 @@
 import com.google.appengine.api.datastore.DatastoreService;
 import com.google.appengine.api.datastore.DatastoreServiceFactory;
 import com.google.appengine.api.datastore.Entity;
+import com.google.appengine.api.datastore.Query.Filter;
+import com.google.appengine.api.datastore.Query.FilterPredicate;
+import com.google.appengine.api.datastore.Query.FilterOperator;
+import com.google.appengine.api.datastore.Key;
+import com.google.appengine.api.datastore.KeyFactory;
+import com.google.appengine.api.datastore.PreparedQuery;
+import com.google.appengine.api.datastore.Query;
 import java.io.IOException;
 import javax.servlet.annotation.WebServlet;
 import javax.servlet.http.HttpServlet;
@@ -53,6 +60,25 @@ public void doGet(HttpServletRequest request, HttpServletResponse response) thro
     DatastoreService datastore = DatastoreServiceFactory.getDatastoreService();
     datastore.put(liveStreamEntity);
 
+    /* Get the recipe that the user wishes to associate the live stream
+      with. If the recipe already has an associated live stream, throw an error.
+      Else, set the recipe's hasLiveStream field to true. hasLiveStream is used
+      to determine whether and how the recipe shows on the recipe and live stream feeds. */
+    Query query = new Query("Recipe");
+    Key recipeKey = KeyFactory.stringToKey(request.getParameter("recipe-key"));
+    Filter recipeKeyFilter = new FilterPredicate(Entity.KEY_RESERVED_PROPERTY, FilterOperator.EQUAL, recipeKey);
+    query.setFilter(recipeKeyFilter);
+    PreparedQuery results = datastore.prepare(query);
+    for (Entity entity : results.asIterable()) {
+      boolean hasLiveStream = (boolean) entity.getProperty("has-live-stream");
+      if (hasLiveStream) {
+        System.err.println("This event already has a live stream associated with it. Each recipe can only be associated with one live stream.");
+      } else {
+        entity.setProperty("has-live-stream", true);
+        datastore.put(entity);
+      }
+    }
+
     response.sendRedirect("/create-live-stream.html");
   }
 }
diff --git a/src/main/java/shef/servlets/NewRecipeServlet.java b/src/main/java/shef/servlets/NewRecipeServlet.java
index 2251e78..0449516 100644
--- a/src/main/java/shef/servlets/NewRecipeServlet.java
+++ b/src/main/java/shef/servlets/NewRecipeServlet.java
@@ -26,6 +26,8 @@
 import com.google.appengine.api.datastore.Key;
 import com.google.appengine.api.datastore.KeyFactory;
 import com.google.appengine.api.datastore.EntityNotFoundException;
+import com.google.appengine.api.users.UserService;
+import com.google.appengine.api.users.UserServiceFactory;
 import com.google.gson.Gson;
 import java.util.Collection;
 import java.util.List;
@@ -40,6 +42,7 @@
 public class NewRecipeServlet extends HttpServlet {
 
   private DatastoreService datastore;
+  private UserService userService;
   private final String TAG = "tag";
   private final String INGREDIENT = "ingredient";
   private final String STEP = "step";
@@ -47,6 +50,7 @@ public class NewRecipeServlet extends HttpServlet {
   @Override
   public void init() {
     datastore = DatastoreServiceFactory.getDatastoreService();
+    userService = UserServiceFactory.getUserService();
   }
 
   /** When a spin-off is created, this GET request gets the original recipe's data. */
@@ -75,7 +79,12 @@ public void doPost(HttpServletRequest request, HttpServletResponse response) thr
     Collection<EmbeddedEntity> tags = getParameters(request, TAG, searchStrings);
     Collection<EmbeddedEntity> ingredients = getParameters(request, INGREDIENT, searchStrings);
     Collection<EmbeddedEntity> steps = getParameters(request, STEP, null);
-    int likes = Integer.parseInt(request.getParameter("likes"));
+    int likes;
+    try {
+      likes = Integer.parseInt(request.getParameter("likes"));
+    } catch (NumberFormatException e) {
+      likes = 0;
+    }
     long timestamp = System.currentTimeMillis();
 
     Entity recipe = new Entity("Recipe");
@@ -85,6 +94,7 @@ public void doPost(HttpServletRequest request, HttpServletResponse response) thr
     recipe.setProperty("ingredients", ingredients);
     recipe.setProperty("steps", steps);
     recipe.setProperty("search-strings", new ArrayList<String>(searchStrings));
+    recipe.setProperty("has-live-stream", false); // A newly created recipe does not have an associated live stream.
     recipe.setProperty("timestamp", timestamp);
     // Temporary if statement, can be removed once user service is fully integrated with recipe creation.
     // Without this if statement for the time being, the servlet crashes.
@@ -95,9 +105,17 @@ public void doPost(HttpServletRequest request, HttpServletResponse response) thr
       recipe.setProperty("user", userKeyString);
     }
     recipe.setProperty("likes", likes);
+
+    // Add property for the key string of the current user.
+    if (userService != null && userService.getCurrentUser() != null) {
+      String id = userService.getCurrentUser().getUserId();
+      Key userKey = KeyFactory.createKey("User", id);
+      String userKeyString = KeyFactory.keyToString(userKey);
+      recipe.setProperty("user", userKeyString);
+    }
     datastore.put(recipe);
 
-    response.sendRedirect("/edit-recipe.html");
+    response.sendRedirect("/recipe.html");
   }
 
   /**
diff --git a/src/main/webapp/browse-recipes.html b/src/main/webapp/browse-recipes.html
index f957534..deca6cb 100644
--- a/src/main/webapp/browse-recipes.html
+++ b/src/main/webapp/browse-recipes.html
@@ -25,7 +25,7 @@ <h1 class="display-4">Browse Recipes</h1>
         <button onclick="getRecipes('foryou')">For You</button>
         <button onclick="getRecipes('trending')">Trending</button>
       </div>
-      <div id="results"></div>
+      <div id="recipe-grid"></div>
     </div>
   </body>
 </html>
diff --git a/src/main/webapp/create-recipe-blank.html b/src/main/webapp/create-recipe-blank.html
index 8f3de8d..4de8237 100644
--- a/src/main/webapp/create-recipe-blank.html
+++ b/src/main/webapp/create-recipe-blank.html
@@ -37,6 +37,25 @@
   </head>
 
   <body class="page-container" onload="protectPage(); navBarSetup();">
+    <template>
+      <span>
+        <svg class="bi bi-plus-circle bootstrap-icon" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+          <path fill-rule="evenodd" d="M8 3.5a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5H4a.5.5 0 0 1 0-1h3.5V4a.5.5 0 0 1 .5-.5z"/>
+          <path fill-rule="evenodd" d="M7.5 8a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0V8z"/>
+          <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+        </svg>
+      </span>
+    </template>
+
+    <template>
+      <span>
+        <svg class="bootstrap-icon" viewBox="0 0 16 16" class="bi bi-dash-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+          <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+          <path fill-rule="evenodd" d="M3.5 8a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.5-.5z"/>
+        </svg>
+      </span>
+    </template>
+
     <!--Nav bar-->
     <div id="nav-placeholder"></div>
     <script>
@@ -53,68 +72,49 @@ <h1 class="display-4">So you want to create a recipe?</h1>
       <div class="med-sep">
         <div class="row">
           <div class="col-sm-6 col-md-6 col-lg-6 text-left">
-            <form>
+            <form action="/new-recipe" method="POST">
               <h2>Basic Info</h2>
               <div class="form-group small-sep">
                 <label for="dishNameInput">1. What’s your dish called? *</label>
-                <input type="text" class="form-control" id="dishNameInput" placeholder="Name of your dish...">
+                <input type="text" name="name" class="form-control" id="dishNameInput" placeholder="Name of your dish...">
               </div>
               <div class="form-group small-sep">
-                <label for="categoriesInput">2. What categories does it fit into? *</label>
-                <input type="text" class="form-control" id="categoriesInput" placeholder="Start typing for suggestions...">
+                <label for="timeInput">2. How long does it take to make, in minutes? *</label>
+                <input type="number" name="time" class="form-control" id="timeInput" placeholder="...">
               </div>
               <div class="form-group small-sep">
-                <label for="timeInput">3. How long does it take to make, in minutes? *</label>
-                <input type="number" class="form-control" id="timeInput" placeholder="...">
-              </div>
+                <label for="servingsInput">3. How many servings does it make? *</label>
+                <input type="number" name="servings" class="form-control" id="servingsInput" placeholder="...">
+              </div>       
               <div class="form-group small-sep">
-                <label for="servingsInput">4. How many servings does it make? *</label>
-                <input type="number" class="form-control" id="servingsInput" placeholder="...">
+                <label>4. What tags apply to this recipe?</label>
+                <div id="Tags">        
+                  <parameter-input name="Tag" index="0" id="Tag0"></parameter-input>
+                </div>
               </div>
               <div class="med-sep">
-                <h2>Ingredients</h2>
-                <div class="form-group small-sep">
-                  <input type="text" class="form-control" id="ingredientInput" placeholder="Enter an ingredient (with quantity)...">
-                </div>
-                <div class="small-sep">
-                  <svg class="bi bi-plus-circle bootstrap-icon" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-                    <path fill-rule="evenodd" d="M8 3.5a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5H4a.5.5 0 0 1 0-1h3.5V4a.5.5 0 0 1 .5-.5z"/>
-                    <path fill-rule="evenodd" d="M7.5 8a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0V8z"/>
-                    <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
-                  </svg>
+                <h2>Description</h2>
+                <div class="form-group">
+                  <label for="descriptionTextArea">Give your recipe some more context.</label>
+                  <textarea class="form-control" name="description" id="descriptionTextArea" placeholder="Tell us about your recipe..."></textarea>
                 </div>
               </div>
               <div class="med-sep">
-                <h2>Equipment</h2>
-                <div class="form-group small-sep">
-                  <input type="text" class="form-control" id="ingredientInput" placeholder="Start typing for suggestions...">
-                </div>
-                <div class="small-sep">
-                  <svg class="bi bi-plus-circle bootstrap-icon" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-                    <path fill-rule="evenodd" d="M8 3.5a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5H4a.5.5 0 0 1 0-1h3.5V4a.5.5 0 0 1 .5-.5z"/>
-                    <path fill-rule="evenodd" d="M7.5 8a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0V8z"/>
-                    <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
-                  </svg>
+                <h2>Ingredients</h2>
+                <div class="form-group small-sep" id="Ingredients">
+                  <parameter-input name="Ingredient" index="0" id="Ingredient0"></parameter-input>
                 </div>
               </div>
               <div class="med-sep">
-                <h2>Steps</h2>
-                <div class="form-group small-sep">
-                  <input type="text" class="form-control" id="ingredientInput" placeholder="Enter a step...">
-                </div>
-                <div class="small-sep">
-                  <svg class="bi bi-plus-circle bootstrap-icon" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-                    <path fill-rule="evenodd" d="M8 3.5a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5H4a.5.5 0 0 1 0-1h3.5V4a.5.5 0 0 1 .5-.5z"/>
-                    <path fill-rule="evenodd" d="M7.5 8a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0V8z"/>
-                    <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
-                  </svg>
+                <h2>Equipment</h2>
+                <div class="form-group small-sep" id="Equipments">
+                  <parameter-input name="Equipment" index="0" id="Equipment0"></parameter-input>
                 </div>
               </div>
               <div class="med-sep">
-                <h2>Description</h2>
-                <div class="form-group">
-                  <label for="descriptionTextArea">Give your recipe some more context.</label>
-                  <textarea class="form-control" id="descriptionTextArea" placeholder="Tell us about your recipe..."></textarea>
+                <h2>Steps</h2>
+                <div class="form-group small-sep" id="Steps">
+                  <parameter-input name="Step" index="0" id="Step0"></parameter-input>
                 </div>
               </div>
               <div class="med-sep">
@@ -157,7 +157,7 @@ <h2>Sharing</h2>
         </div>
       </div>
     </div>
-    
+
     <!-- Optional JavaScript -->
     <!-- First Popper.js, then Bootstrap JS -->
     <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
diff --git a/src/main/webapp/css/style.css b/src/main/webapp/css/style.css
index 852b922..4fd6920 100644
--- a/src/main/webapp/css/style.css
+++ b/src/main/webapp/css/style.css
@@ -11484,6 +11484,12 @@ p {
   font-size: 1.25rem;
 }
 
+parameter-input {
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0 0 15px 0;
+}
+
 .display-4 {
   font-weight: bold;
 }
diff --git a/src/main/webapp/recipe.html b/src/main/webapp/recipe.html
index 71ce5ce..c26fd18 100644
--- a/src/main/webapp/recipe.html
+++ b/src/main/webapp/recipe.html
@@ -47,12 +47,27 @@
       });
     </script>
 
-    <!-- Calendar Test -->
-    <pre id="content" style="white-space: pre-wrap;"></pre>
-    <!--Add buttons to initiate auth sequence and sign out-->
-    <button id="authorize_button" style="display: block;" onclick="handleAuthClick();">Authorize</button>
-    <button id="signout_button" style="display: none;" onclick="handleSignoutClick();">Sign Out</button>
-    <button id="event_button" style="display: none;" onclick="addLiveStreamToCalendar()">Add Event</button>
+    <!-- Add to Calendar Modal -->
+    <div class="modal fade" id="addToCalModal" tabindex="-1" role="dialog" aria-labelledby="addToCalModalTitle" aria-hidden="true">
+      <div class="modal-dialog modal-dialog-centered" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="addToCalModalLongTitle">Add to Calendar</h5>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body">
+            <button id="authorize_button" class="btn btn-primary" style="display: block;" onclick="handleAuthClick();">Authorize</button>
+            <p id="event-message" style="white-space: pre-wrap;"></p>
+            <button id="event_button" class="btn btn-primary" style="display: none;" onclick="addLiveStreamToCalendar()">Add to calendar</button>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+          </div>
+        </div>
+      </div>
+    </div>
     
     <script async defer src="https://apis.google.com/js/api.js"
       onload="this.onload=function(){};handleClientLoad()"
@@ -60,12 +75,12 @@
     </script>
 
     <div class="jumbotron text-center">
-      <!-- Modal -->
-      <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
+      <!-- Sharing Modal -->
+      <div class="modal fade" id="sharingModal" tabindex="-1" role="dialog" aria-labelledby="sharingModalTitle" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered" role="document">
           <div class="modal-content">
             <div class="modal-header">
-              <h5 class="modal-title" id="exampleModalLongTitle">Share</h5>
+              <h5 class="modal-title" id="sharingModalLongTitle">Share</h5>
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                 <span aria-hidden="true">&times;</span>
               </button>
@@ -85,7 +100,6 @@ <h5 class="modal-title" id="exampleModalLongTitle">Share</h5>
                   </a>
                 </li>
                 <li class="list-inline-item"><img src="/assets/images/mail_icon.png" id="myItem" class="share-icon"></li>
-                <div id="myItem" data-page_id="1510970">1510970</div>
               </ul>
             </div>
             <div class="modal-footer">
@@ -124,7 +138,10 @@ <h3 id="recipe-tags"></h3>
             <path fill-rule="evenodd" d="M11 5h2.02a1.5 1.5 0 0 1 1.17.563l1.481 1.85a1.5 1.5 0 0 1 .329.938V10.5a1.5 1.5 0 0 1-1.5 1.5h-1v-1h1a.5.5 0 0 0 .5-.5V8.35a.5.5 0 0 0-.11-.312l-1.48-1.85A.5.5 0 0 0 13.02 6H12v4.5h-1V5zm-8 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 1a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/>
             <path fill-rule="evenodd" d="M12 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 1a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/>
           </svg>
-        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
+        <button type="button" id="add-to-cal-button" class="btn btn-primary" data-toggle="modal" data-target="#addToCalModal">
+          Add to Calendar
+        </button>
+        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#sharingModal">
           Share
         </button>
         </div>
diff --git a/src/main/webapp/script.js b/src/main/webapp/script.js
index a828dab..557c100 100644
--- a/src/main/webapp/script.js
+++ b/src/main/webapp/script.js
@@ -165,7 +165,7 @@ function createLiveStreamElement(liveStream) {
 
   const unorderedList = document.createElement('ul');
   unorderedList.className = "list-unstyled";
-
+  
   const listElement = document.createElement('li');
   listElement.className = "list-space";
   listElement.innerText= liveStream.liveStreamKey;
@@ -176,6 +176,18 @@ function createLiveStreamElement(liveStream) {
   return liveStreamItem;
 }
 
+/** Gets the ID of a YouTube video from its URL.
+    Will work only for a URL of a certain format
+    (i.e. youtube.com/watch?v=). */
+function getIdFromUrl(url) {
+  if (url.includes('&')) {
+    let searchParams = new URLSearchParams(url);
+    return searchParams.get("v");
+  } else {
+    return url.substring(url.lastIndexOf('=') + 1);
+  }
+}
+
 /** Gets the ID of the YouTube video that the user inputs. */
 function getId() {
   const liveStreamLink = document.getElementById('live-stream-link').value;
@@ -190,18 +202,6 @@ function storeLiveStreamInfo(schedStartTime, schedEndTime, duration) {
   fetch('/new-live-stream?recipe-key=' + recipeKey + '&live-stream-link=' + liveStreamLink + '&sched-start-time=' + schedStartTime + '&sched-end-time=' + schedEndTime + '&duration=' + duration);
 }
 
-/** Gets the ID of a YouTube video from its URL.
-    Will work only for a URL of a certain format
-    (i.e. youtube.com/watch?v=). */
-function getIdFromUrl(url) {
-  if (url.includes('&')) {
-    let searchParams = new URLSearchParams(url);
-    return searchParams.get("v");
-  } else {
-    return url.substring(url.lastIndexOf('=') + 1);
-  }
-}
-  
 /** Videos: List JSON Response Retrieval */
 // https://apis.google.com/js/api.js
 var gapi = window.gapi = window.gapi || {};
@@ -932,7 +932,6 @@ gapi.load("client:auth2", function() {
 });
 
 /** Calendar */
-
 // Array of API discovery doc URLs for APIs used by the quickstart
 var DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest"];
 
@@ -971,37 +970,19 @@ function initClient() {
   */
 function handleAuthClick(event) {
   var authorizeButton = document.getElementById('authorize_button');
-  var signoutButton = document.getElementById('signout_button');
   var eventButton = document.getElementById('event_button');
   gapi.auth2.getAuthInstance().signIn();
   authorizeButton.style.display = 'none';
   eventButton.style.display = 'block';
-  signoutButton.style.display = 'block';
-}
-
-/**
-  *  Sign out the user upon button click.
-  */
-function handleSignoutClick(event) {
-  var authorizeButton = document.getElementById('authorize_button');
-  var signoutButton = document.getElementById('signout_button');
-  var eventButton = document.getElementById('event_button');
-  gapi.auth2.getAuthInstance().signOut();
-  authorizeButton.style.display = 'block';
-  eventButton.style.display = 'none';
-  signoutButton.style.display = 'none';
 }
 
 /**
-  * Append a pre element to the body containing the given message
-  * as its text node. Used to display the results of the API call.
-  *
-  * @param {string} message Text to be placed in pre element.
+  * Used to display the results of the API call.
+  * @param {string} message Text to be placed in an element.
   */
-function appendPre(message) {
-  var pre = document.getElementById('content');
-  var textContent = document.createTextNode(message + '\n');
-  pre.appendChild(textContent);
+function appendMessage(message) {
+  var element = document.getElementById('event-message');
+  element.innerHTML = message + "\n";
 }
 
 function addEvent(link, startTime, endTime){
@@ -1016,9 +997,6 @@ function addEvent(link, startTime, endTime){
       'dateTime': endTime,
       'timeZone': 'America/Los_Angeles'
     },
-    'recurrence': [
-      'RRULE:FREQ=DAILY;COUNT=2'
-    ],
     'reminders': {
       'useDefault': false,
       'overrides': [
@@ -1034,7 +1012,7 @@ function addEvent(link, startTime, endTime){
   });
 
   request.execute(function(event) {
-    appendPre('Event created: ' + event.htmlLink);
+    appendMessage('Event created! Click <a href=' + event.htmlLink + ">here</a> to view it on your calendar.");
   });
 }
 
@@ -1122,13 +1100,21 @@ function getRecipeInfo() {
     document.getElementById('recipe-title').innerHTML = recipe.name;
     document.getElementById('recipe-author').innerHTML = recipe.user;
     document.getElementById('recipe-description').innerHTML = recipe.description;
-    setAssociatedLiveStreamLink(key);
+    if (recipe.hasLiveStream) {
+      setAssociatedLiveStreamLink(key);
+    } else {
+      hideAddToCalButton();
+    }
     displayTags(recipe.tags);
     displayIngredients(recipe.ingredients);
     displaySteps(recipe.steps);
   });
 }
 
+function hideAddToCalButton() {
+  document.getElementById('add-to-cal-button').style.display = 'none';
+}
+
 /** Gets the link to the live stream associated with the given recipe key
     and adds it to the DOM. */
 function setAssociatedLiveStreamLink(recipeKey) {
@@ -1202,7 +1188,7 @@ function displaySteps(stepList) {
     // Create and format the step text.
     var stepTextElement = document.createElement("p");
     stepTextElement.class = "col-sm-10 col-md-10 col-lg-10";
-    stepTextElement.innerHTML = step;
+    stepTextElement.innerHTML = step.instruction;
 
     rowVars['stepElement' + stepCount].appendChild(stepNumElement);
     rowVars['stepElement' + stepCount].appendChild(stepTextElement);
@@ -1337,18 +1323,27 @@ function shareViaGmail() {
 
 /** @class A custom element that represents a parameter input. */
 class ParameterInput extends HTMLElement {
+  static placeholders = {
+    'Tag': 'Enter a tag...',
+    'Ingredient': 'Enter an ingredient...',
+    'Equipment': 'Enter a kitchen tool...',
+    'Step': 'Enter a step...'
+  }
+
   constructor() {
     super();
     this.label = document.createElement('label');
     this.textArea = document.createElement('textarea');
-    this.addButton = document.createElement('button');
-    this.deleteButton = document.createElement('button');
+    this.addButton = document.getElementsByTagName('template')[0].content.querySelector('span').cloneNode(true);
+    this.deleteButton = document.getElementsByTagName('template')[1].content.querySelector('span').cloneNode(true);
     this.container = document.createElement('div');
 
     this.container.appendChild(this.label);
+    this.container.appendChild(document.createElement('br'));
     this.container.appendChild(this.textArea);
     this.container.appendChild(this.addButton);
     this.container.appendChild(this.deleteButton);
+    //this.container.appendChild(document.createElement('br'));
   }
 
   /** Once the attributes for the ParameterInput exist, set its values accordingly. */
@@ -1358,10 +1353,8 @@ class ParameterInput extends HTMLElement {
     this.parent = this.name + 's';
 
     this.textArea.rows = '1';
-    this.addButton.type = 'button';
-    this.addButton.innerText = 'Add ' + this.name;
-    this.deleteButton.type = 'button';
-    this.deleteButton.innerText = 'Delete ' + this.name;
+    this.textArea.cols = '75';
+    this.textArea.placeholder = ParameterInput.placeholders[this.name];
     this.setIndexAttributes();
 
     this.appendChild(this.container);
@@ -1383,7 +1376,7 @@ class ParameterInput extends HTMLElement {
     this.addButton.onclick = event => {
       var newParameter = createParameterInput(this.name, this.index + 1);
       insertParameterInput(this, newParameter);
-    }
+    };
 
     // Deletes the ParameterInput clicked.
     this.deleteButton.onclick = event => {
@@ -1391,7 +1384,7 @@ class ParameterInput extends HTMLElement {
       const startIndex = this.index;
       this.remove();
       updateIndices(fieldName, startIndex);
-    }
+    };
   }
 
   /** Gets the text in a ParameterInput's text area. */