finished testing exercises in testing.js and testingSpec.js

call_apply_bind_exercise/callApplyBind.js

@@ -0,0 +1,136 @@
+// Fix the following code:
+
+var obj = {
+    fullName: "Harry Potter",
+    person: {
+        sayHi: function(){
+            return "This person's name is " + this.fullName
+        }
+    }
+}
+obj.person.sayHi.call(obj)
+
+
+
+var obj = {
+    fullName: "Harry Potter",
+    sayHi: function(){
+        return "This person's name is " + this.fullName
+    }
+}
+
+
+
+
+
+
+// Write a function called sumEvenArguments which takes all of the arguments passed to a function and returns the sum of the even ones.
+// sumEvenArguments(1,2,3,4) // 6
+// sumEvenArguments(1,2,6) // 8
+// sumEvenArguments(1,2) // 2
+
+//I feel like there should be an easier way to do this with less code ....
+function sumEvenArguments() {
+	var arr = [].slice.call(arguments)
+	var evens = []
+	arr.forEach(function(element) {
+		if (element % 2===0) {
+			evens.push(element)
+		}
+	})
+
+	var sum = 0
+	evens.forEach(function(element) {
+		sum = sum + element
+	})
+	return sum
+}
+
+
+// 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() {
+	var arr = [].slice.call(arguments)
+	return arr
+}
+
+
+// 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 outerArgs = [].slice.call(arguments)
+	var counter = 0
+
+	return function() {
+		if (counter === max) {
+			return "Maxed Out!"
+		} else {
+			counter++
+			return fn.apply(this,arguments) //ES 5
+			// return fn(...arguments) //ES2015
+		}
+	}
+}
+
+
+
+// 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() {
+		var guess = [].slice.call(arguments);
+		// var guess = args[0]
+		guesses++
+		if (guesses > amount) {
+			return "No more guesses, the answer was " + answer
+		} else if (guess > answer) {
+			return "You're too high!"
+		} else if (guess < answer) {
+			return "You're too low!"
+		} else {
+			return "You got it!"
+		}
+
+	}
+
+}
+
+
+

canvas_exercise/shapes_game/index.js

@@ -1,15 +1,67 @@
 window.addEventListener("load", function() {
 
-  function clear(ctx, width, heigt) {
+
+  function clear(ctx, width, height) {
+    ctx.clearRect(0,0,canvas.width,canvas.height)
+  }
+
+  function createTriangle(x,y) {
+    ctx.beginPath();
+    ctx.moveTo(x,y);
+    ctx.lineTo(x+100,y+100);
+    ctx.lineTo(x,y+100);
+    ctx.fill();
+    ctx.closePath();
   }
 
+
   function drawRandomShape(ctx, width, height) {
+    var shape = (Math.floor(Math.random() *4))+1  //number from 1-4
+    var x = (Math.floor(Math.random() * 700))+1   //wont go out of bounds on x axis
+    var y = (Math.floor(Math.random() * 650))+1   //wont go out of bounds on y axis
+
+
+    if (shape === 1) {
+      ctx.fillStyle = "white"
+      createTriangle(x,y)
+      expectedKey = 38
+
+    } else if (shape === 2) {
+      ctx.fillStyle = "red"
+      ctx.fillRect(x,y,100,100)
+      expectedKey = 40
+
+    } else if (shape === 3) {
+      ctx.fillStyle = "red"
+      createTriangle(x,y)
+      expectedKey = 37
+
+    } else if (shape === 4) {
+      ctx.fillStyle = "white"
+      ctx.fillRect(x,y,100,100)
+      expectedKey = 39
+
+    }
   }
 
-  function drawGameStartText(ctx, width, height, score) {
+  function drawGameStartText(ctx, width, height) {
+
+    ctx.fillStyle = "white"
+    ctx.font = "38px serif"
+    ctx.fillText("Press the space bar to start a new game",100, 350)
+}
+
+  function restartGame(ctx, width, height, score) {
+
+    drawGameStartText(ctx,width,height)
+    ctx.font = "25px serif"
+    ctx.fillText("Score: " + score, 350,400)
+
   }
 
-  function restartGame(ctx, width, height) {
+  function clearAndShow(ctx,width,height) {
+    clear(ctx,width,height)
+    drawRandomShape(ctx,width,height)
   }
 
   var canvas = document.getElementById("shapes-game"),
@@ -23,14 +75,42 @@ 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,
+      seconds = 0,
       intervalId;
 
   canvas.width = width;
   canvas.height = height;
 
-  document.addEventListener("keyup", function() {
-
+  drawGameStartText(ctx, width, height)
+
+  document.addEventListener("keyup", function(e) {
+    //I feel like this nested if statements can be condensed.
+    if (timerSpan.innerHTML > 29) {
+      if (e.keyCode === 32) {
+        clearAndShow(ctx,width,height) // when space is first pressed, clear the words and show the first shape.
+        var decreaseTimerId = setInterval(function(){
+          timerSpan.innerHTML --; // decrease timer span
+          seconds ++ // variable to check when 30 seconds has elapsed ... somehow I could not use timerSpan.innerHTML to check??
+          if (seconds === 30) {
+            clearInterval(decreaseTimerId);
+            clear(ctx, width, height)
+            //show score on the screen and reset all the variables.
+            restartGame(ctx,width,height,scoreSpan.innerHTML) 
+            seconds = 0;
+            timerSpan.innerHTML = 30
+            scoreSpan.innerHTML = 0
+          }
+        },1000) 
+      }
+      //^ everything above checks if the space key is pressed and do some action based on a condition.
+    } else if (e.keyCode === expectedKey) {
+      scoreSpan.innerHTML ++
+    } else {
+      scoreSpan.innerHTML --
+    }
+
+  clearAndShow(ctx,width,height)
   });
+
 });
 

es2015_exercise/readme.md

@@ -12,24 +12,43 @@ var person = {
     }
 }
 ```
+var person = {
+    fullName: "Harry Potter",
+    sayHi(){
+        setTimeout(() => console.log("Your name is " + this.fullName).bind(this),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; // stop me from doing this!
+
 ```javascript
 var arr = [1,2]
 var temp = arr[0]
 arr[0] = arr[1]
 arr[1] = temp
 ```
 
+var [b,a] = arr
+-- or --
+var [a,b] = arr
+var arr = [b,a]
+
 ```javascript
 function double(arr){
     return arr.map(function(val){
@@ -38,6 +57,10 @@ function double(arr){
 }
 ```
 
+var double = (arr) => arr.map(val => val*2);
+
+
+
 ```javascript
 var obj = {
     numbers: {
@@ -50,6 +73,10 @@ var a = obj.numbers.a;
 var b = obj.numbers.b;
 ```
 
+var{a,b} = obj.numbers
+
+
+
 ```javascript
 function add(a,b){
     if(a === 0) a = 0
@@ -64,12 +91,18 @@ function add(a,b){
 }
 ```
 
+var add = (a=10, b=10) => a+b
+
+
+
+
+
 Research the following functions - what do they do?
 
-`Array.from` -
+`Array.from` - Creates an array from an array-like object
 
-`Object.assign` -
+`Object.assign` - Creates a new object with key-value pairs copied from another array.
 
-`Array.includes` -
+`Array.includes` - checks if a value is in the array but does not return the index
 
-`String.startsWith` -
+`String.startsWith` - returns true or false based on whether the string begins with the argument passed.