Testing Exercises Solutions

call_apply_bind_exercise/callApplyBind.js

@@ -0,0 +1,117 @@
+//1. Fix the following code:
+
+var obj = {
+  fullName: "Harry Potter",
+  person: {
+    sayHi: function(){
+      return "This person's name is " + this.fullName
+    }
+  }
+}
+
+//Fix
+
+var obj = {
+  fullName: "Harry Potter",
+  sayHi: function(){
+    return "This person's name is " + this.fullName
+  }
+}
+
+obj.sayHi();
+
+//2. Two examples of array-like-objects are arguments and document.querySelectorAll()
+
+
+
+//3. Write a function called sumEvenArguments which takes all of the arguments passed to a function and returns the sum of the even ones.
+
+function sumEvenArguments(){
+  return [].slice.call(arguments).reduce(function(acc,next){
+    if(next % 2 === 0){
+      acc += next;
+    }
+    return acc; 
+  },0)
+}
+
+/*sumEvenArguments(1,2,3,4) // 6
+sumEvenArguments(1,2,6) // 8
+sumEvenArguments(1,2) // 2*/
+
+
+//4. Write a function called arrayFrom which converts an array-like-object into an array.
+
+// function sample(){
+//     var arr = arrayFrom(arguments)
+//     if(!arr.reduce) throw "This is not an array!"
+//     return arr.reduce(function(acc,next){
+//         return acc+next;
+//     },0)
+// }
+
+function arrayFrom(){
+  return [].slice.call(arguments);
+}
+
+//5. Write a function called invokeMax which accepts a function and a maximum amount. invokeMax should return a function that when called increments a counter. If the counter is greater than the maximum amount, the inner function should return "Maxed Out"
+
+/*function add(a,b){
+    return a+b
+}
+
+var addOnlyThreeTimes = invokeMax(add,3);
+addOnlyThreeTimes(1,2) // 3
+addOnlyThreeTimes(2,2) // 4
+addOnlyThreeTimes(1,2) // 3
+addOnlyThreeTimes(1,2) // "Maxed Out!"*/
+
+function invokeMax(fn,max){
+  var counter = 0;
+  return function(){
+    counter++;
+    if(counter > max){
+      return "Maxed Out!";
+    }
+    return fn.apply(this,arguments);
+  }
+}
+
+//6. Write a function called guessingGame which takes in one parameter amount. The function should return another function that takes in a parameter called guess. In the outer function, you should create a variable called answer which is the result of a random number between 0 and 10 as well as a variable called guesses which should be set to 0.
+
+/*In the inner function, if the guess passed in is the same as the random number (defined in the outer function) - you should return the string "You got it!". If the guess is too high return "You're too high!" and if it is too low, return "You're too low!". You should stop the user from guessing if the amount of guesses they have made is greater than the initial amount passed to the outer function.
+
+You will have to make use of closure to solve this problem.*/
+
+/*var game = guessingGame(5)
+game(1) // "You're too low!" 
+game(8) // "You're too high!"
+game(5) // "You're too low!"
+game(7) // "You got it!" 
+game(1) // "You are all done playing!" 
+
+var game2 = guessingGame(3)
+game2(5) // "You're too low!" 
+game2(3) // "You're too low!"
+game2(1) // "No more guesses the answer was 0" 
+game2(1) // "You are all done playing!*/
+
+
+function guessingGame(amount){
+  var answer = Math.floor(Math.random()*11);
+  var guesses = 0;
+  return function(guess){
+    guesses++;
+    if(guesses > amount){
+      return "You are all done playing!";
+    } else{
+      if(guess === answer){
+        return "You got it!";
+      } else if(guess > answer){
+        return "You're too high!";
+      } else{
+        return "You're too low!";
+      }
+    }
+  }
+}

canvas_exercise/shapes_game/index.js

@@ -1,15 +1,56 @@
 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) {
+    clear(ctx, canvas.width, canvas.height);
+    var shapes = ["wTri", "wSq", "rTri", "rSq"];
+    var randomShape = shapes[Math.floor(Math.random()*shapes.length)];
+
+    var randomX = Math.floor(Math.random()*(canvas.width - 2*width) + width);
+    var randomY = Math.floor(Math.random()*(canvas.height - 2*height) + height);
+
+
+    if(randomShape === "wSq" || randomShape === "wTri") {
+      ctx.fillStyle = "white";
+    } else {
+      ctx.fillStyle = "red";
+    }
+
+    if(randomShape === "wSq" || randomShape === "rSq") {
+      ctx.fillRect(randomX, randomY, width, height);
+    } else {
+      ctx.beginPath();
+      ctx.moveTo(randomX, randomY);
+      ctx.lineTo(randomX + width, randomY + height);
+      ctx.lineTo(randomX, randomY + height);
+      ctx.fill();
+      ctx.closePath();
+    }
+
+    return randomShape;
   }
 
   function drawGameStartText(ctx, width, height, score) {
+    ctx.fillStyle = "white";
+    ctx.font = '30px arial';
+    ctx.textAlign = "center";
+    ctx.fillText('Press the space bar to start a new game', width/2, height/2);
   }
 
+
   function restartGame(ctx, width, height) {
+    clear(ctx, canvas.width, canvas.height);
+    ctx.fillStyle = "white";
+    ctx.font = '30px arial';
+    ctx.textAlign = "center";
+    ctx.fillText('Press the space bar to play again', width/2, height/2);
+    ctx.fillText("You scored " + score + " points", width/2, height/2 + 50);
+    gameOn = false;
+    score = 0;
+    seconds = 30;
   }
 
   var canvas = document.getElementById("shapes-game"),
@@ -20,17 +61,47 @@ window.addEventListener("load", function() {
       ctx = canvas.getContext('2d'),
       // white triangle = up, red square = down,
       // red triangle = left, white square = right
-      expectedKeysMap = {white0: 38, red1: 40, red0: 37, white1: 39},
+      expectedKeysMap = {wTri: 38, rSq: 40, rTri: 37, wSq: 39},
       timerSpan = document.getElementById("time-remaining"),
       scoreSpan = document.getElementById("score-val"),
-      seconds = 3,
+      seconds = 30,
+      score = 0,
       intervalId;
 
   canvas.width = width;
   canvas.height = height;
 
-  document.addEventListener("keyup", function() {
-
+  document.addEventListener("keyup", function(e) {
+    e.preventDefault(); //doesn't work
+    if(e.keyCode === 32 && !gameOn){
+      gameOn = true;
+      scoreSpan.innerText = score;
+      timerSpan.innerText = seconds;
+      intervalId = setInterval(function(){
+        seconds--;
+        timerSpan.innerText = seconds;
+      },1000)
+
+      setTimeout(function(){
+        clearInterval(intervalId);
+        clear(ctx, canvas.width, canvas.height);
+        restartGame(ctx, canvas.width, canvas.height);
+      },seconds * 1000);
+
+      expectedKey = drawRandomShape(ctx, 50, 50)
+    } else if(e.keyCode === expectedKeysMap[expectedKey] && gameOn){
+        score++;
+        scoreSpan.innerText = score;
+        expectedKey = drawRandomShape(ctx, 50, 50);
+    } else if(gameOn){
+        score--;
+        scoreSpan.innerText = score;
+        expectedKey = drawRandomShape(ctx, 50, 50);
+    }
   });
+
+  drawGameStartText(ctx, canvas.width, canvas.height)
+
 });
 
+

es2015_exercise/readme.md

@@ -11,23 +11,42 @@ var person = {
         }.bind(this),1000)
     }
 }
+
+var person = {
+    fullName: "Harry Potter",
+    sayHi(){
+        setTimeout(() =>
+            console.log(`Your name is ${this.fullName}`)
+        ,1000)
+    }
+}
 ```
 
 ```javascript
 var name = "Josie"
 console.log("When " + name + " comes home, so good")
+
+var name = "Josie"
+console.log(`When ${name} comes home, so good`)
 ```
 
 ```javascript
 var DO_NOT_CHANGE = 42;
 DO_NOT_CHANGE = 50; // stop me from doing this!
+
+const DO_NOT_CHANGE = 42;
+DO_NOT_CHANGE = 50; // Uncaught TypeError: Assignment to constant variable.
 ```
 
 ```javascript
 var arr = [1,2]
 var temp = arr[0]
 arr[0] = arr[1]
 arr[1] = temp
+
+var arr = [1,2]
+var [temp,temp2] = arr
+[temp,temp2] = [temp2,temp]
 ```
 
 ```javascript
@@ -36,6 +55,8 @@ function double(arr){
         return val*2
     });
 }
+
+let double = arr => arr.map(val => val*2)
 ```
 
 ```javascript
@@ -48,6 +69,9 @@ var obj = {
 
 var a = obj.numbers.a;
 var b = obj.numbers.b;
+
+
+var {a,b} = obj.numbers;
 ```
 
 ```javascript
@@ -62,14 +86,16 @@ function add(a,b){
     }
     return a+b
 }
+
+let add = (a=10, b=10) => a+b;
 ```
 
 Research the following functions - what do they do?
 
-`Array.from` -
+`Array.from` - creates a new Array instance from an array-like or iterable objects, such as arguments
 
-`Object.assign` -
+`Object.assign` - creates a shallow copy of an object by copying the vaules of all enumerable and own properties from one or more source objects to a target object and returning the target object
 
-`Array.includes` -
+`Array.includes` - determines whether an array includes a certain element, returning true if found and false if not found; if we need the index of the element, need to use indexOf
 
-`String.startsWith` -
+`String.startsWith` - determines whether a string begins with the characters of a specified string, returning true if the characters are found and false if not found

jquery_exercise/index.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Hack or Snooze</title>
+	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+	<link rel="stylesheet" href="styles.css">
+</head>
+<body>
+	<div class="container">
+		<div class="row">
+			<div class="col-xs-10 col-xs-offset-1	">
+				<header>
+					<span><b>Hack or Snooze</b></span>
+					<span class="links">
+						<span id="submit">submit</span> | <span id="favorites">favorites</span>
+					</span>
+				</header>
+				<section id="add-story" class="hide">
+					<div class="row">
+					    <div class="col-xs-10">
+					        <form class="form">
+					            <div class="form-group">
+					                <label for="title">title</label>
+					                <input type="text" class="form-control" id="title" placeholder="title">
+					            </div>
+					            <div class="form-group">
+					                <label for="title">url</label>
+					                <input type="url" class="form-control" id="url" placeholder="http://">
+					            </div>
+					            <div class="form-group">
+					                <button type="submit" class="btn btn-default">Submit</button>
+					            </div>
+					        </form>
+					    </div>
+					</div>
+				</section>
+				<section id="story-list">
+					<ol>
+						<li><span class="glyphicon glyphicon-star-empty"></span><a href="http://visualgo.net" target="_blank">Visualizing Algorithms </a>
+							<span class = "small">(visualgo.net)</span>
+						</li>
+						<li><span class="glyphicon glyphicon-star-empty"></span><a href="http://www.rithmschool.com" target="_blank">Problem Solving with Rithm </a>
+							<span class = "small">(rithmschool.com)</span>
+						</li>
+					</ol>	
+				</section>
+			</div>
+		</div>
+	</div>
+
+	<script
+	  src="http://code.jquery.com/jquery-3.2.1.min.js"
+	  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
+	  crossorigin="anonymous"></script>
+	<script src="script.js"></script>
+</body>
+</html>