Testing Exercise Commit

call_apply_bind_exercise/callApplyBind.js

@@ -0,0 +1,66 @@
+function sumEvenArguments() {
+	var result = 0;
+	for(var i = 0; i < arguments.length; i++) {
+		if(arguments[i] % 2 === 0) {
+			result += arguments[i];
+		}
+	}
+	return result
+}
+
+
+function arrayFrom() {
+	var finalArr = [];
+	for(var i = 0; i < arguments.length; i++) {
+		finalArr.push(arguments[i]);
+	}
+	return finalArr;
+}
+
+function invokeMax(fn, maxAmount) {
+
+    var counter = 0;
+
+    return function() {
+        counter++;
+
+        if(counter > maxAmount) {
+            return "Maxed Out!"
+        } else {
+            return fn.apply(this, [].slice.call(arguments))
+        }
+    }
+}
+
+
+var addOnlyThreeTimes = invokeMax(add,3);
+addOnlyThreeTimes(1,2); // 3
+addOnlyThreeTimes(2,2); // 4
+addOnlyThreeTimes(1,2); // 3
+addOnlyThreeTimes(1,2); // "Maxed Out!"
+
+
+
+function guessingGame(amount) {
+
+    var answer = Math.round(Math.random()*10)
+    var guesses = 0;
+
+
+    return function(guess) {
+        if(guesses < amount) {
+            guesses++
+        } else {
+            return "Game Over!"
+        }
+
+        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!"
+        }
+
+    }
+}

call_apply_bind_exercise/readme.md

@@ -5,17 +5,15 @@ Fix the following code:
 ```javascript
 var obj = {
     fullName: "Harry Potter",
-    person: {
-        sayHi: function(){
-            return "This person's name is " + this.fullName
-        }
+    sayHi: function(){
+        return "This person's name is " + this.fullName;
     }
 }
 ```
 
 - List two examples of "array-like-objects" that we have seen.
-    -
-    -
+    - arguments
+    - sets
 
 ### Functions to write:
 

canvas_exercise/shapes_game/index.js

@@ -1,22 +1,10 @@
 window.addEventListener("load", function() {
 
-  function clear(ctx, width, heigt) {
-  }
-
-  function drawRandomShape(ctx, width, height) {
-  }
-
-  function drawGameStartText(ctx, width, height, score) {
-  }
-
-  function restartGame(ctx, width, height) {
-  }
-
   var canvas = document.getElementById("shapes-game"),
       height = canvas.scrollHeight,
       width = canvas.scrollWidth,
-      gameOn = false,
-      expectedKey = undefined,
+      // gameOn = false,
+      // expectedKey = undefined,
       ctx = canvas.getContext('2d'),
       // white triangle = up, red square = down,
       // red triangle = left, white square = right
@@ -26,11 +14,165 @@ window.addEventListener("load", function() {
       seconds = 3,
       intervalId;
 
-  canvas.width = width;
-  canvas.height = height;
+      canvas.width = width;
+      canvas.height = height;
+
+  var shapeVal = 0;
+  var totalScore = 0;
+  var timerCountDown = 1;
+  var keyCodes = [37, 38, 39, 40];
+
+
+//-------------------------------------------------------------------  
+//Opening screen
+drawStartText();
+
+//-------------------------------------------------------------------  
+//Start Game
+  function startGame() {
+    clear(); //clear the canvas
+    drawRandomShape(); //add a random shape track scoring 
+    countDown(); //start timer countdown
+  }
+
+//-------------------------------------------------------------------
+
+function drawStartText() {
+  ctx.font = '40px serif';
+  ctx.fillStyle = 'orange';
+  ctx.fillText('Press the Space Bar to start a new game', 60, 340);
+}
+
+function drawStartTextAfterGame() {
+  ctx.font = '40px serif';
+  ctx.fillStyle = 'orange';
+  ctx.fillText('Game Over', 290, 340);  
+  ctx.fillText('Press the Space Bar to start a new game', 60, 380);  
+}
+
+//To start game, listen for spacebar keypress
+document.body.onkeypress = function(e){
+    if(e.keyCode === 32){
+      startGame();
+    } 
+}
+
+function clear() {
+  ctx.clearRect(0, 0, height, width); 
+}
+
+  function drawRandomShape() {
+    //draw random image
+    var randomImg = Math.floor(Math.random()*(5-1)+1);
+    switch(randomImg) {
+      case 1:
+        drawRedSquare()
+        break;
+      case 2:
+        drawWhiteSquare()
+        break;
+      case 3:
+        drawRedTriangle()
+        break;
+      case 4:
+        drawWhiteTriangle()
+    }
+    //compare image's value to keycode value, and calculate scoring
+    document.body.onkeydown = function(e){
+      if(e.keyCode == shapeVal) {
+        totalScore++
+        scoreSpan.innerHTML = totalScore;
+        clear()
+        drawRandomShape()
+      } else if(keyCodes.includes(e.keyCode)) {
+        totalScore--
+        scoreSpan.innerHTML = totalScore;
+        clear()
+        drawRandomShape()
+      }
+    }
+  }
+
+  function randomCoordinate() {
+    return Math.floor(Math.random()*(600-100)+100);
+  }
+
+//-------------------------------------------------
+
+function countDown() {
+    timerCountDown = 30;
+    var intervalID = setInterval(function () {
+        timerSpan.innerHTML = timerCountDown;
+        timerCountDown-- ;
+          if(timerCountDown < 1) {
+          clearInterval(intervalID);  //if i is 0, then stop the interval
+          endGame();
+          totalScore = 0;
+            if (event.onkeypress) {
+    event.preventDefault();
+  }
+          }
+    }, 1000);
+}
+
+
+function endGame() {
+  clear();
+  drawStartTextAfterGame(); 
+  timerSpan.innerHTML = "0";
+  scoreSpan.innerHTML = totalScore+1;
+
+}
+
+
+//-------------------------------------------------------------------
+//shape functions
+  function drawRedSquare() {
+    shapeVal = 40
+    var upperLeftX = randomCoordinate()
+    var upperLeftY = randomCoordinate()
+    var width = 100;
+    var height = 100;
+    ctx.fillStyle = "red";
+    ctx.fillRect(upperLeftX, upperLeftY, width, height); 
+  }
+
+  function drawWhiteSquare() {
+    shapeVal = 39
+    var upperLeftX = randomCoordinate()
+    var upperLeftY = randomCoordinate()
+    var width = 100;
+    var height = 100;
+    ctx.fillStyle = "white";
+    ctx.fillRect(upperLeftX, upperLeftY, width, height); 
+  }  
+
+function drawWhiteTriangle() {  
+    shapeVal = 38
+    var xCoord = randomCoordinate()
+    var yCoord = randomCoordinate()
+    var canvas = document.getElementById('shapes-game');
+    ctx.fillStyle = "white";
+    ctx.beginPath();
+    ctx.moveTo(xCoord, yCoord);    
+    ctx.lineTo(xCoord, yCoord + 100);
+    ctx.lineTo(xCoord + 100, yCoord + 100);    
+    ctx.fill();
+}
+
+function drawRedTriangle() {  
+    shapeVal = 37
+    var xCoord = randomCoordinate()
+    var yCoord = randomCoordinate()
+    var canvas = document.getElementById('shapes-game');
+    ctx.fillStyle = "red";
+    ctx.beginPath();
+    ctx.moveTo(xCoord, yCoord);    
+    ctx.lineTo(xCoord, yCoord + 100);
+    ctx.lineTo(xCoord + 100, yCoord + 100);    
+    ctx.fill();
+}
+
 
-  document.addEventListener("keyup", function() {
-
-  });
 });
 

canvas_exercise/shapes_game/styles.css

@@ -5,6 +5,7 @@ body {
 #shapes-game {
   border: 4px solid grey;
   background-color: black;
+
 }
 
 .canvas-container {

jquery_exercise/index.html

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Hacker News Clone</title>
+	<!-- Link to stylesheet -->
+	<link rel="stylesheet" type="text/css" href="style.css">
+
+    <!-- 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">
+
+  	<!-- jQuery script link -->
+  	<!-- jQuery should be included before JavaScript script -->
+    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
+    <!-- Latest compiled and minified JavaScript -->
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>    
+
+    <!-- script to main.js -->
+	<script src="main.js"></script>
+</head>
+
+<body>
+  	<div class="container">
+  		<div class="row">
+	  		<div class="col col-md-4" style="height: 100px; background-color: red;">
+	  			<h3>Hack or Snooze</h3>
+	  		</div>
+	  		<div class="col col-md-4" style="height: 100px; background-color: red;">
+				<a href="#addItems" data-toggle="collapse">submit</a>
+	  		</div>	
+  		</div>
+
+	  	<form action="">
+	  		<div class="row collapse" id='addItems'>
+		  		<!-- <div class="col col-md-12" style="height: 200px; background-color: yellow;"> -->
+		  	<div class="form-group row">
+				<label for="newTitle" class="col-md-2 col-form-label">Title</label>
+				<div class="col-md-6">
+					<input class="form-control" type="text" value="Input new title..." id="newTitle">
+				</div>
+			</div>
+
+		  	<div class="form-group row">
+			  	<label for="urlToAdd" class="col-md-2 col-form-label">Email</label>
+			  	<div class="col-md-6">
+			    	<input class="form-control" type="email" value="bootstrap@example.com" id="urlToAdd">
+			  	</div>
+			</div>
+
+		  	<div class="form-group row">
+				<button type="submit" class="btn btn-primary">Submit</button>
+			</div>
+
+		  		<!-- </div> -->
+	  		</div>
+	  		<div class="row">
+		  		<div class="col col-md-8" style="height: 200px; background-color: lightgreen;">
+		  			<!-- <h3>Ordered List</h3> -->
+					<ol>
+					</ol>
+		  		</div>
+	  		</div>  		
+		</form>
+
+  	</div>
+
+
+
+</body>
+</html>
+
+
+
+
+
+
+
+
+
+
+
+
+