created navSubmitClick

index.html

@@ -38,7 +38,7 @@
     <a class="nav-link" href="#" id="nav-all">Hack or Snooze</a>
   </div>
   <div class="nav-center">
-    <a class="nav-lin" href="#" id="">add story</a>
+    <a class="nav-link" href="#" id="nav-submit">submit</a>
   </div>
   <div class="nav-right">
     <a class="nav-link" href="#" id="nav-login">login/signup</a>
@@ -63,12 +63,13 @@
 
   <form id="add-story-form" class="add-story hidden">
     <h4>Add a story</h4>
-    <label for="add-title">Title: </label>
-    <input id="add-title" type="text">
-    <label for="add-author">Author: </label>
-    <input id="add-author" type="text">
-    <label for="add-url">URL: </label>
-    <input id="add-url" type="text">
+    <label for="story-title">Title: </label>
+    <input id="story-title" type="text">
+    <label for="story-author">Author: </label>
+    <input id="story-author" type="text">
+    <label for="story-url">URL: </label>
+    <input id="story-url" type="text">
+    <button type="submit">submit story</button>
   </form>
 
   <!-- Login form -->

js/main.js

@@ -14,6 +14,8 @@ const $navLogin = $("#nav-login");
 const $navUserProfile = $("#nav-user-profile");
 const $navLogOut = $("#nav-logout");
 
+const $addStoryForm = $('#add-story-form');
+
 /** To make it easier for individual components to show just themselves, this
  * is a useful function that hides pretty much everything on the page. After
  * calling this, individual components can re-show just what they want.

js/nav.js

@@ -36,3 +36,11 @@ function updateNavOnLogin() {
   $navLogOut.show();
   $navUserProfile.text(`${currentUser.username}`).show();
 }
+
+/** Show story submission form on click on "submit" */
+function navSubmitClick(evt) {
+  console.debug("navSubmitClick", evt);
+  evt.preventDefault();
+  hidePageComponents();
+  $addStoryForm.show();
+}