rithmschool · wavegxd · Aug 1, 2017 · Aug 2, 2017 · Aug 3, 2017 · Aug 4, 2017
diff --git a/ajax_with_jquery_exercise/hack_clone.html b/ajax_with_jquery_exercise/hack_clone.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <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">
+
+<!-- Optional theme -->
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
+</head>
+<body>
+  <div class="container">
+
+  <!-- Static navbar -->
+  <nav class="navbar navbar-default">
+    <div class="container-fluid">
+      <div class="navbar-header">
+        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+          <span class="sr-only">Toggle navigation</span>
+        </button>
+        <a class="navbar-brand" href="#">Hacker News</a>
+      </div>
+      <div id="navbar" class="navbar-collapse collapse">
+        <ul class="nav navbar-nav">
+          <li><a href="#">Favorites</a></li>
+        </ul>
+        <ul class="nav navbar-nav navbar-right">
+          <li><a href="#">Login</a></li>
+        </ul>
+      </div><!--/.nav-collapse -->
+    </div><!--/.container-fluid -->
+    <form>
+      <div class="form-group">
+        <label for="loginEmail">Email address</label>
+        <input type="email" class="form-control" id="loginEmail" placeholder="Enter" email="">
+      </div>
+    </form>
+  </nav>
+
+
+
+  <!-- Main component for a primary marketing message or call to action -->
+  <div class="jumbotron">
+    <div id="news">
+        <ol id="feed">
+        </ol>
+    </div>
+  </div>
+
+</div>
+</body>
+<script
+  src="https://code.jquery.com/jquery-3.1.1.js"
+  integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
+  crossorigin="anonymous"></script>
+<script src="hack_clone.js"></script>
+</html>
diff --git a/ajax_with_jquery_exercise/hack_clone.js b/ajax_with_jquery_exercise/hack_clone.js
@@ -0,0 +1,37 @@
+$(function() {
+
+  var $feed = $("#feed");
+  //Uses the Hacker News API to display top stories (up to some limit, say 10 or 20).
+
+  //get item id from responseJSON
+  // var $topArray = [];
+  // var $myObj = $.get("https://hacker-news.firebaseio.com/v0/topstories.json?print=pretty");
+  //
+  // for(var i = 0; i < 25; i++) {
+  //   $topArray.push($myObj.responseJSON[i]);
+  // }
+  //Stories, comments, jobs, Ask HNs and even polls are just items.
+  //They're identified by their ids, which are unique integers, and live under /v0/item/<id>.
+  //$.get("https://hacker-news.firebaseio.com/v0/item/14962634.json")
+
+  $.get("https://hacker-news.firebaseio.com/v0/topstories.json")
+  .then(function(obj){
+      var items = obj.slice(0, 25).map(function(current) {
+              return $.get(`https://hacker-news.firebaseio.com/v0/item/${current}.json`);
+          });
+      return Promise.all(items);
+  })
+  .then(function(news) {
+    news.forEach(function(item){
+      $feed.append(`<li> <span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span> ${item.title} </li>`);
+    });
+  });
+
+  //The top stories page should have a button to log in or sign up for an account. HTML 
+
+  //When the user logs in or signs up succesfully, a token sent back from the server should get stored in localStorage.
+  // This token will be used to authenticate the user on subsequent requests to the stories API.
+  // (Examples of requests to this API are below.)
+
+
+});
diff --git a/call_apply_bind_exercise/callApplyBind.js b/call_apply_bind_exercise/callApplyBind.js
@@ -0,0 +1,46 @@
+var obj = {
+    fullName: "Harry Potter",
+    sayHi(){
+            return `This person's name is ${this.fullName}`;
+    }
+}
+
+//array like objects
+//arrays from DOM methods
+//arguments
+
+function sumEvenArguments(){
+    var args = [].slice.call(arguments);
+    return args.reduce(function (all, item){
+        if (item % 2 === 0) return all + item;
+        return all;
+      },0);
+}
+
+function arrayFrom() {
+  var args = [].slice.call(arguments);
+  return args;
+}
+
+function invokeMax(fn, max) {
+    var count = 0;
+    return function(){
+        var arg = [].slice.call(arguments);
+        count++;
+        if (count > max) return `Maxed Out!`;
+
+        return fn.apply(this, arg);
+    }
+}
+
+function guessingGame(amount) {
+  var answer = Math.floor(Math.random() * 10);
+  var guesses = 0;
+  return function(guess) {
+    guesses++;
+    if (guesses > amount) return `No more guesses the answer was ${answer}`;
+    if (guess === answer) return "You got it!";
+    if (guess < answer) return "You're too low!";
+    if (guess > answer) return "You're too high!"
+  }
+}
diff --git a/canvas_exercise/shapes_game/index.js b/canvas_exercise/shapes_game/index.js
@@ -1,15 +1,60 @@
 window.addEventListener("load", function() {
 
-  function clear(ctx, width, heigt) {
+  function clear(ctx, width, height) {
+    ctx.clearRect(0, 0, width, height);
   }
 
-  function drawRandomShape(ctx, width, height) {
+  function drawRandomShape(ctx) {
+    //0 = white triangle 1 = red triangle 2 = white square 3 = red square
+    var shapes = [0, 1, 2, 3];
+    var x = Math.floor(Math.random() * (650 - 100) + 100);
+    var y = Math.floor(Math.random() * (650 - 100) + 100);
+
+    //{white0: 38, red1: 40, red0: 37, white1: 39}
+    if (shapes.indexOf(Math.floor(Math.random() * (4 - 0))) === 0) {
+        ctx.fillStyle = 'white';
+        ctx.beginPath();
+        ctx.moveTo(x, x);
+        ctx.lineTo(x, x + 70);
+        ctx.lineTo(x + 70, x + 70);
+        ctx.fill();
+        ctx.closePath();
+        return 'white0';
+      }
+    else if (shapes.indexOf(Math.floor(Math.random() * (4 - 0))) === 1) {
+        ctx.fillStyle = 'red';
+        ctx.beginPath();
+        ctx.moveTo(x, x);
+        ctx.lineTo(x, x + 70);
+        ctx.lineTo(x + 70, x + 70);
+        ctx.fill();
+        ctx.closePath();
+        return 'red0';
+      }
+    else if (shapes.indexOf(Math.floor(Math.random() * (4 - 0))) === 2) {
+      ctx.fillStyle = 'white';
+      ctx.fillRect(x, y, 70, 70);
+      return 'white1';
+    }
+    else {
+      ctx.fillStyle = 'red';
+      ctx.fillRect(x, y, 70, 70);
+      return 'red1';
+    }
   }
 
   function drawGameStartText(ctx, width, height, score) {
+    ctx.fillStyle = 'white';
+    ctx.font = '36px serif';
+    ctx.fillText('Press the space bar to start a new game', width, height);
+    if (score !== undefined) {
+      ctx.fillText('Score: ' + score, width + 225, height + 50);
+    }
   }
 
   function restartGame(ctx, width, height) {
+      countdown = 30;
+      scoreSpan.innerHTML = 0;
   }
 
   var canvas = document.getElementById("shapes-game"),
@@ -23,14 +68,46 @@ window.addEventListener("load", function() {
       expectedKeysMap = {white0: 38, red1: 40, red0: 37, white1: 39},
       timerSpan = document.getElementById("time-remaining"),
       scoreSpan = document.getElementById("score-val"),
-      seconds = 3,
+      countdown = 30,
       intervalId;
 
   canvas.width = width;
   canvas.height = height;
 
-  document.addEventListener("keyup", function() {
-
+  document.addEventListener("keyup", function(event) {
+    if (!gameOn && event.keyCode === 32) {
+        gameOn = true;
+        clear(ctx, width, height);
+        expectedKey = expectedKeysMap[drawRandomShape(ctx)];
+        intervalId = setInterval(function() {
+          countdown--;
+          if (countdown === 0) {
+            clearInterval(intervalId);
+            gameOn = false;
+            var endScore = +scoreSpan.innerHTML;
+            restartGame();
+            clear(ctx, width, height);
+            drawGameStartText(ctx, 100, 400, endScore);
+          }
+          timerSpan.innerHTML = countdown;
+        }, 1000);
+        //0 = white triangle (up) 1 = red triangle(left) 2 = white square(right) 3 = red square(down)
+      }
+    else if (gameOn && Object.values(expectedKeysMap).includes(event.keyCode)) {
+        if (expectedKey === event.keyCode) {
+          scoreSpan.innerHTML = Number(scoreSpan.innerHTML) + 1;
+        }
+        else {
+          scoreSpan.innerHTML = Number(scoreSpan.innerHTML) - 1;
+        }
+        clear(ctx, width, height);
+        expectedKey = expectedKeysMap[drawRandomShape(ctx)];
+      }
   });
-});
+  drawGameStartText(ctx, 100, 400);
 
+      //once key gets pressed it runs functions attached
+      //waits for next key to be pressed
+      //
+      //match expectedKey to expectedKeysMap
+});
diff --git a/jquery_exercise/hack_clone.html b/jquery_exercise/hack_clone.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <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">
+
+<!-- Optional theme -->
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
+</head>
+<nav class="navbar navbar-default navbar-fixed-top">
+  <div class="container-fluid">
+    <div class="navbar-header">
+    <a class="navbar-brand" href="#">Hacker News</a>
+  </div>
+    <div class="collapse navbar-collapse" id="navbarText">
+    <ul class="nav navbar-nav">
+      <li id="nav-submit"><a href="#">submit</a></li>
+      <li><a href="#">favorites</a></li>
+    </ul>
+  </div>
+</div>
+</nav>
+<body>
+  <div class="jumbotron">
+    <form id="news">
+    title:<br>
+    <input type="text" name="title" id="title" required><br>
+    url:<br>
+    <input type="url" name="url" id="url" required>
+    <button class="btn btn-default" type="submit">Submit</button>
+  </form>
+    <ol id="sites">
+      <li><span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span> test site</li>
+    </ol>
+  </div>
+</body>
+<script
+  src="https://code.jquery.com/jquery-3.1.1.js"
+  integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
+  crossorigin="anonymous"></script>
+<script src="hack_clone.js"></script>
+</html>
diff --git a/jquery_exercise/hack_clone.js b/jquery_exercise/hack_clone.js
@@ -0,0 +1,46 @@
+$(function() {
+  var $sites = $("#sites");
+  $("#news").hide();
+
+  $("form").on("submit", function(e) {
+    e.preventDefault();
+
+    var $title = $("#title");
+    var titleText = $title.val();
+    var $url = $("#url");
+    var urlText = $url.val();
+    // var $newStar = $("<span>", {
+    //   class: "glyphicon glyphicon-star-empty",
+    //   ariaHidden: true
+    // });
+    var $newLi = $("<li>", {
+
+    });
+    $newLi.html(`
+      <span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span> ${titleText}
+      `);
+
+    // $sites.prepend($newStar);
+    $sites.append($newLi);
+    $title.val("");
+    $url.val("");
+    $("#news").hide();
+  });
+  $("#nav-submit").on("click", function() {
+      $("#news").show();
+  });
+  //<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
+  $(".glyphicon").on("click", function(e) {
+    if ($(".glyphicon").hasClass("glyphicon-star-empty")) {
+      $(".glyphicon").removeClass("glyphicon-star-empty").addClass("glyphicon-star");
+    }
+    else {
+      $(".glyphicon").removeClass("glyphicon-star").addClass("glyphicon-star-empty");
+    }
+  });
+  //make it look nice
+  //
+  //favorites on click hide empty stars
+  //
+
+});