rithmschool · ryoung18 · Aug 1, 2017 · Aug 1, 2017 · Aug 1, 2017 · Aug 2, 2017
diff --git a/ajax_with_jquery_exercise/index.html b/ajax_with_jquery_exercise/index.html
@@ -0,0 +1,122 @@
+<!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">
+    <title>Hacker News</title>
+    <!-- Latest compiled and minified CSS -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <div class="container">
+
+      <!-- header nav -->
+      <div class="row header" >
+        <div class="col-xs-3">
+          <h3> Hack or Snooze </h3>
+        </div>
+        <div class="col-xs-5">
+          <h3>
+            <small>
+              <ul class="nav navbar-nav">
+                <li><a href="#" id="top"> top stories </a></li>
+                <li><a href="#" id="new"> new stories </a></li>
+                <li><a href="#" id="best"> best stories </a></li>
+                <li><a href="#" class="loggedIn display-hide" id="favorites"> favorites</a></li>
+              </ul>
+            </small>
+          </h3>
+        </div>
+        <div class="col-xs-2  col-xs-offset-2">
+          <h3><small><a href="#" id="loginSignUpBtn" class="loggedIn"> login | sign up! </a></small></h3>
+          <h3><small><a href="#" id="signOutBtn" class="loggedIn display-hide"> Sign Out</a></small></h3>
+        </div>
+      </div>
+      <!-- End header nav -->
+
+      <!-- Error Message -->
+      <div class="row">
+      <br>
+        <div class="col-xs-12">
+          <p class="error"></p>
+        </div>
+      </div>
+      <!-- End Error -->
+
+      <!-- login / signup -->
+
+      <div class="row display-hide" id="loginSignUpForm">
+        <!-- buttons -->
+        <div class="row">
+          <div class="col-xs-12">
+            <ul class="nav nav-tabs">
+              <li role="presentation" class="active" id="formLogin"><a href="#">login</a></li>
+              <li role="presentation" id="formSignUp"><a href="#">sign up!</a></li>
+            </ul>
+          </div>
+        </div>
+        <!-- end btns -->
+
+        <!-- form login -->
+        <div class="row">
+          <div class="col-xs-12">
+          <br>
+            <form>
+              <div class="form-group">
+                <div class="row margin-bottom">
+                   <div class="col-xs-1 col-xs-offset-1">
+                     <label>email</label>
+                   </div>
+                   <div class="col-xs-5">
+                    <input type="email" id="email" class="form-control" placeholder="" required>
+                   </div>
+                </div>
+                <div class="row margin-bottom">
+                   <div class="col-xs-1 col-xs-offset-1">
+                     <label>password</label>
+                   </div>
+                   <div class="col-xs-5">
+                     <input type="password" id="password"  class="form-control" placeholder=""  required>
+                   </div>
+                </div>
+                <div class="row margin-bottom">
+                  <div class="col-xs-1 col-xs-offset-2">
+                    <button type="submit" class="btn btn-delete">Submit</button>
+                  </div>
+                </div>
+              </div>
+            </form>
+          </div>
+        </div>
+        <!-- End form login -->
+      </div>
+      <!-- End login / signup-->
+
+      <!-- Main Content -->
+      <div class="row" id="main">
+      <br>
+        <div class="col-xs-12">
+          <ol>
+<!--             <li id="13474738">
+              <a href="#" class="glyphicon"></a>
+              Test line... will be deleted.
+              <a href="http://google.com" target="_blank"> (ietf.org) </a><p class="pad-left">submitted TIME by AUTHOR</p>
+            </li>
+            <li id="13477186">
+              <a href="#" class="glyphicon"></a>
+              Test line... sdsdss.
+              <a href="http://google.com" target="_blank"> (ietf.org) </a><p class="pad-left">submitted TIME by AUTHOR</p>
+            </li> -->
+          </ol>
+        </div>
+      </div>
+      <!-- End Main Content -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+    <script src="script_global_variables.js"></script>
+    <script src="script_ajax.js"></script>
+    <script src="script_methods.js"></script>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/ajax_with_jquery_exercise/script.js b/ajax_with_jquery_exercise/script.js
@@ -0,0 +1,162 @@
+"use strict";
+//////EVENT LISTENERS //////
+
+// $(function(){
+
+//On  page refresh validate auth_key by getting favorites then last viewed page or top stories
+  checkIfLoggedIn()
+
+
+//// Top nav Login/Sign Up and  Sign out BUTTONS////
+  // Signout hide, reset
+  $('#signOutBtn').click(function(){
+    var gliphicons = $('.glyphicon')
+
+    //reset to log out display
+    $loggedIn.toggleClass('display-hide')
+    gliphicons.removeClass("glyphicon-star-empty")
+    gliphicons.removeClass("glyphicon-star")
+
+    //clear stored data
+    localStorage.removeItem('auth_key')
+    auth_key = false;
+    favoriteStoryIds = {};
+
+    if(currentStory === 'favorites'){
+      currentStory = 'top'
+      displayStories()
+    }
+
+
+  })
+
+  // Hide/Show login form
+  $navLoginBtn.click(function(){
+      $errorMsgLoc.text('')
+      $mainLoginForm.toggleClass('display-hide')
+
+  })
+
+
+//// MAIN  Login / Sign up FORM ////
+  //Toggle between login and sign up.
+  $loginSignUpTabs.on('click', function(){
+    $formLogin.toggleClass('active')
+    $formSignUp.toggleClass('active')
+  })
+
+  // Login Sign up Form
+  $mainLoginForm.on('submit', function(e){
+    var $email=  $('#email');
+    var $password =  $('#password');
+    var $loginSignup = $('.active').text() === 'login'? 'login' : 'signup';
+
+    e.preventDefault();
+
+    postData('favorites', $loginSignup , //login or signup request
+      function(result){
+
+          if(result.status > 299){ //If error, display error message.
+            $errorMsgLoc.text(errorMsgs.login)
+          } else {
+            //store auth key
+            localStorage.setItem("auth_key", result.auth_token)
+            auth_key = result.auth_token
+
+            //get favorites
+            if($loginSignup === 'login' ){
+              getData('favorites', 'stories', function(result){ // get favories
+                  getFavoriteStoryIds(result) //Store favorites
+              })
+            }
+            $loggedIn.toggleClass('display-hide') // show logged in content (link to favorites, log out button)
+            displayGliphicon('justLogged') // display star gliphicon
+            $errorMsgLoc.text('') //clear error message
+            $mainLoginForm.toggleClass('display-hide') // hide login form
+          }
+      }
+      ,$email.val(), $password.val())
+
+    //Clear email and password form.
+    $email.val('')
+    $password.val('')
+  })
+
+//// END MAIN  Login / Sign up FORM ////
+
+
+/// TOP NAV BUTTONS ////
+  $navBtns.click(function(e){
+    currentStory = $(e.target).attr('id');
+    localStorage.setItem("current_story", currentStory)
+
+    $dataDisplay.empty()
+
+    if(currentStory === 'favorites'){
+      favoritesList.forEach(story =>{
+        newData(story.title, story.url, story.created, story.by, story.story_id)
+      })
+    } else {
+      checkIfLoggedIn()
+    }
+  })
+/// END TOP NAV BUTTONS ////
+
+///Star Buttons - select favorites ///
+  $dataDisplay.on('click', '.glyphicon', function(e){
+    var location = $(e.target);
+    var locationParent = location.parent().children();
+    var storyId = location.parent().attr('id').trim()
+
+    e.preventDefault();
+
+    //Add favorite
+    if($(e.target).hasClass('glyphicon-star-empty')){
+       //Fav object. content scrapped from HTML
+       var addFav = {
+        hacker_news_story:{
+            by: locationParent.eq(3).children().text().trim(),
+            story_id: storyId,
+            title: locationParent.eq(1).text().trim(),
+            url: locationParent.eq(2).attr('href').trim()
+          }
+        }
+        postData('favorites', 'add', function(result){
+            if(result.status > 299){
+              $errorMsgLoc.text(errorMsgs.favorites)
+            } else {
+              location.toggleClass('glyphicon-star-empty glyphicon-star')
+              //Returning 'undefined' should return ID. Must refresh favorites to get id,
+                getData('favorites', 'stories', function(result){
+                if(result.status > 299){
+                  auth_key = false
+                } else {
+                  getFavoriteStoryIds(result)
+                }
+              })
+            }
+      }, addFav)
+    } else {
+    //Remove favorite
+        deleteData('favorites', 'delete', function(result){
+            if(result.status > 299){
+              $errorMsgLoc.text(errorMsgs.favorites)
+            } else {
+              location.toggleClass('glyphicon-star-empty glyphicon-star')
+              if(currentStory === 'favorites'){
+                $('#'+ storyId).remove()
+              }
+            }
+        }, favoriteStoryIds[location.parent().attr('id')])
+    }
+  })
+
+///End Star Buttons - select favorites ///
+
+
+
+// })
+
+
+
+
diff --git a/ajax_with_jquery_exercise/script_ajax.js b/ajax_with_jquery_exercise/script_ajax.js
@@ -0,0 +1,88 @@
+"use strict";
+
+/////Ajax requests////
+function getData(name, type, fn, id){
+  var headers = name === 'favorites' ? {"Authorization": auth_key} : {};
+  $.ajax({
+    method: "GET",
+    headers: headers,
+    url: urls[name + type[0].toUpperCase() + type.slice(1)] + (!!id? id +'.json' : '')
+  })
+  .then(stories => fn(stories))
+  .fail(error => fn(error))
+}
+
+function postData(name, type, fn, arg, password){     //arg === id or email
+  var data = '';
+  var header = '';
+
+  if(type === 'login' || type === 'signup'){
+    data = JSON.stringify({
+      email: arg,
+      password: password
+    })
+  }
+
+  if(type === 'add'){
+    data = JSON.stringify(arg);
+    header = auth_key
+  }
+
+  $.ajax({
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      "Authorization": header
+    },
+    url: urls[name + type[0].toUpperCase() + type.slice(1)],
+    data: data
+  })
+  .then(stories => fn(stories))
+  .fail(error => fn(error))
+}
+
+function deleteData(name, type, fn, id){
+  $.ajax({
+    method: "DELETE",
+    headers: {
+      "Content-Type": "application/json",
+      "Authorization": auth_key
+    },
+    url: urls[name + type[0].toUpperCase() + type.slice(1)] + id + '.json'
+
+  })
+  .then(stories => fn(200))
+  .fail(error => fn(error))
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+