rithmschool · MiHHuynh · Aug 1, 2017 · Aug 1, 2017 · Aug 1, 2017 · Aug 1, 2017
diff --git a/ajax_with_jquery_exercise/favorites.html b/ajax_with_jquery_exercise/favorites.html
diff --git a/ajax_with_jquery_exercise/index.html b/ajax_with_jquery_exercise/index.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Hacker News Clone</title>
+	<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="wrapper">
+		<div class="panel panel-default custom-panel">
+		  <div class="panel-heading custom-panel">
+  			<span class="title">Hack or Snooze</span>
+			<span class="submit">submit</span> | <span class="favorites">favorites</span>
+			<span class="login">log in / sign up</span>
+		  </div>
+		</div>
+		<div class="row login-signup-form">
+			<div class="col-md-3 col-md-offset-6">
+				<form action="submit" class="custom-form login-form">
+				<div class="form-group">
+					<label for="email">email:</label>
+					<input type="text" class="form-control" id="login-email">
+				</div>
+				<div class="form-group">
+					<label for="login-pw">password:</label>
+					<input type="password" class="form-control" id="url">
+				</div>
+				<button class="btn btn-default login-button">log in</button>
+				</form>
+			</div>
+			<div class="col-md-3 col-md-offset-3">
+				<form action="#" class="custom-form signup-form" id="signup-form">
+					<div class="form-group">
+						<label for="email">email:</label>
+						<input type="text" class="form-control" id="signup-email">
+					</div>
+					<div class="form-group">
+						<label for="pw">password:</label>
+						<input type="password" class="form-control" id="signup-pw">
+					</div>
+					<button type="submit" class="btn btn-default signup-button">sign up</button>
+				</form>
+			</div>
+		</div>
+
+<!-- 		<form action="submit" class="custom-form submit-form">
+			<div class="form-group">
+				<label for="title">title:</label>
+				<input type="text" class="form-control" id="title">
+			</div>
+			<div class="form-group">
+				<label for="url">url:</label>
+				<input type="url" class="form-control" id="url" value="https://">
+			</div>
+			<button class="btn btn-default submit-button">submit</button>
+		</form> -->
+		<ol class="link-items">
+		</ol>
+
+	</div>
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+  	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.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,135 @@
+$(document).ready(function(){
+  var star = "<span class=\"glyphicon glyphicon-star-empty\" aria-hidden=\"true\"></span>";
+  var $linkItemsOl = $(".link-items");
+
+  $.ajax({
+    method: "GET",
+    url: "https://hacker-news.firebaseio.com/v0/topstories.json?"
+  }).then(function(topItems){
+    var top20 = topItems.slice(0,20);
+    for (let i = 0; i < top20.length; i++) {
+      $.ajax({
+        method: "GET",
+        dataType: "json",
+        url: `https://hacker-news.firebaseio.com/v0/item/${top20[i]}.json?print=pretty`      
+      }).then(function(item){
+        addItemToList(item.title, item.url);
+        console.log(item.title + '\n' + item.url);
+        //item.title
+        //item.url
+      });
+
+    }
+  });
+
+  function addItemToList(itemTitle, itemUrl) {
+      var $newItem = $("<li>", { "class" : "item"});
+      var aTag = ` <a href="${itemUrl}">${itemTitle}</a>`;
+      $newItem.html(star + " " + aTag);
+      $linkItemsOl.append($newItem);
+      console.log(aTag);
+  }
+
+  $(".login").on("click", function(e) {
+    $(".login-form").toggle();
+    $(".signup-form").toggle();
+  });
+
+  $("login-signup-form").on("click", "login-button", function(e){
+    e.preventDefault();
+    var email = $("#login-email").val();
+    var pw = $("#login-pw").val();
+    $.ajax({
+      method: "POST",
+      url: "https://hn-favorites.herokuapp.com/login",
+      //Content-Type: "application/json"
+      data: {
+        "email" : email,
+        "password": pw
+      }
+    }).then(function(authKey){
+      console.log(authKey);
+    });
+  });
+
+  $("#signup-form").on("submit", function(e){
+    e.preventDefault();
+    var email = $("#signup-email").val();
+    var pw = $("#signup-pw").val();
+    console.log(email + pw);
+    $.ajax({
+      method: "POST",
+      url: "https://hn-favorites.herokuapp.com/signup",
+      data: {
+        "email" : email,
+        "password": pw
+      }
+    }).then(function(authKey){
+      console.log(authKey);
+    });
+  });
+
+  // what to do with the authkey?
+  // you need it to:
+  // GET all favorites
+  // DELETE a favorite
+
+  // when you click the log in button
+  // post to log in
+  // 
+
+
+  // var $submitLink = $(".submit");
+  // var $submitForm = $(".submit-form");
+  // var $submitBtn = $(".submit-button");
+  // var $linkItemsOl = $(".link-items");
+  // var star = "<span class=\"glyphicon glyphicon-star-empty\" aria-hidden=\"true\"></span>";
+  // var $title = $("#title");
+  // var $url = $("#url");
+  // var $favSpan = $(".favorites");
+
+  // $submitLink.on("click", function(){
+  //   $submitForm.toggle();
+  // });
+
+  // $("body").on("click", ".glyphicon", function(e){
+  //   $(e.target).toggleClass("glyphicon-star-empty glyphicon-star");
+  // });
+
+  // $submitBtn.on("click", function(e){
+  //   e.preventDefault();
+  //   var title = $("#title").val();
+  //   var url = $("#url").val();
+  //   var $newItem = $("<li>");
+  //   var aTag = ` <a href="${url}">${title}</a>`;
+  //   $newItem.html(star + " " + aTag);
+  //   $linkItemsOl.append($newItem);
+  //   console.log(aTag);
+  //   $title.val("");
+  //   $url.val("https://");
+  // });
+
+  // $favSpan.on("click", function(e){
+  //   var stars = $(".glyphicon");
+  //   if ($favSpan.hasClass("favorites")) {
+  //     for (let i = 0; i < stars.length; i++) {
+  //       console.log(stars[i]);
+  //       if ($(stars[i]).hasClass("glyphicon-star-empty")) {
+  //         $(stars[i]).parent().hide();
+  //       }
+  //     }
+  //     $favSpan.text("all");
+  //   }
+  //   else if ($favSpan.hasClass("all")) {
+  //     for (let i = 0; i < stars.length; i++) {
+  //       console.log(stars[i]);
+  //       if ($(stars[i]).hasClass("glyphicon-star-empty")) {
+  //         $(stars[i]).parent().show();
+  //       }
+  //     }
+  //     $favSpan.text("favorites");
+  //   }
+  //   $favSpan.toggleClass("favorites all");
+  // });
+
+});
diff --git a/ajax_with_jquery_exercise/style.css b/ajax_with_jquery_exercise/style.css
@@ -0,0 +1,58 @@
+.item {
+	margin-bottom: 10px;
+}
+
+.title, .submit, .favorites {
+	height: 3em;
+	margin: 5px;
+}
+
+.submit:hover, .favorites:hover, .all:hover, .login:hover, .signup:hover {
+	text-decoration: underline;
+	cursor: pointer;
+}
+
+.login {
+	margin-left: 63%;
+}
+
+.glyphicon:hover {
+	cursor: pointer;
+}
+
+.title {
+	font-size: 1.5em;
+	font-weight: bold;
+}
+
+.wrapper {
+	background-color: #f6f6ef;
+	width: 80%;
+	margin-top: 1em;
+	margin-left: auto;
+	margin-right: auto;
+	color: #828282;
+}
+
+
+.panel > .panel-heading, .custom-panel {
+    background-image: none;
+    background-color: rgb(255, 102, 0);
+    color: black;
+    border: 1px solid rgb(255, 102, 0);
+}
+
+/*.custom-form {
+	width: 15%;
+	margin-left: 68em;
+	margin-bottom: 2em;
+	display: none;
+}*/
+
+a, a:hover {
+	color: black;
+}
+
+.link-items {
+	margin-bottom: 50px;
+}
diff --git a/call_apply_bind_exercise/callApplyBind.js b/call_apply_bind_exercise/callApplyBind.js
@@ -0,0 +1,55 @@
+function sumEvenArguments() {
+  var arr = [].slice.call(arguments);
+  var sum = 0;
+  for (let i = 0; i < arr.length; i++) {
+    if (arr[i] % 2 === 0) {
+      sum += arr[i];
+    }
+  }
+  return sum;
+}
+
+function arrayFrom(arrLikeObj) {
+  var arr = [].slice.call(arrLikeObj);
+  return arr;
+}
+
+function invokeMax(fn, maxTimes) {
+  var counter = 0;
+  return function() {
+    if (counter >= maxTimes) {
+      return "Maxed Out!";
+    } else {
+      counter++;
+      return fn.apply(this, arguments);
+    }
+  }
+}
+
+function guessingGame(num) {
+  var answer = Math.floor(Math.random()*10);
+  var guesses = 0;
+  return function(guess) {
+    if (guesses === num) {
+      return `No more guesses. The answer was ${answer}.`;
+    }
+    else {
+      guess++;
+      if (guess === answer) {
+        return "You got it!";
+      }
+      else if (guess > answer) {
+        return "You're too high!";
+      }
+      else if (guess < answer) {
+        return "You're too low!";
+      }
+    }
+  }
+}
+
+
+
+
+
+
diff --git a/call_apply_bind_exercise/readme.md b/call_apply_bind_exercise/readme.md
@@ -3,19 +3,28 @@
 Fix the following code:
 
 ```javascript
+// var obj = {
+//     fullName: "Harry Potter",
+//     person: {
+//         sayHi: function(){
+//             return "This person's name is " + this.fullName
+//         }
+//     }
+// }
+
 var obj = {
     fullName: "Harry Potter",
     person: {
         sayHi: function(){
             return "This person's name is " + this.fullName
-        }
+        }.apply(obj)
     }
 }
 ```
 
 - List two examples of "array-like-objects" that we have seen.
-    -
-    -
+    - arguments
+    - result of DOM method such as getElementsByTagName
 
 ### Functions to write: