diff --git a/js/main.js b/js/main.js
index 601a30b..ec7ecc8 100644
--- a/js/main.js
+++ b/js/main.js
@@ -27,6 +27,7 @@ function hidePageComponents() {
     $allStoriesList,
     $loginForm,
     $signupForm,
+    $addStoryForm
   ];
   components.forEach(c => c.hide());
 }
diff --git a/js/stories.js b/js/stories.js
index d24a34e..24a56ed 100644
--- a/js/stories.js
+++ b/js/stories.js
@@ -57,18 +57,29 @@ function putStoriesOnPage() {
 */
 
 async function getNewStoryAndSubmit(evt) {
+  console.debug("getNewStoryAndSubmit", evt);
+  // clear page then display form
+  evt.preventDefault();
+  hidePageComponents();
+  $addStoryForm.show();
+
+  // get values from form
   const title = $("#story-title").val();
   const author = $("#story-author").val();
   const url = $("#story-url").val();
 
+  // put values in an obj
   const newStory = {
     title: title,
     author: author,
     url: url
   }
 
+  // instantiate a Story with obj and display on page
   const resultOfAddStoryCall = await storyList.addStory(currentUser, newStory);
   console.log("resultOfAddStoryCall: ", resultOfAddStoryCall);
+  hidePageComponents();
   putStoriesOnPage();
-
 }
+
+$addStoryForm.on("submit", getNewStoryAndSubmit);
\ No newline at end of file