mcsuth/puppies.html

## puppies.html
<html>
<head>
  <title>Puppies</title>
	<link rel="stylesheet" type="text/css" href="puppies.css">
	<script src="puppies.js"></script>
</head>
<body>
<center>
	<div class="top">
		<h1>Puppies - wait, is that a puppy?! </h1>
		<button id="biggerPuppies">Bigger Puppies</button>
		<button id="smallerPuppies" >Smaller Puppies</button>
		<button id="movePuppiesRight" >Move Puppies Right</button>
		<button id="movePuppiesLeft" >Move Puppies Left</button>
		<button id="movePuppiesUp" >Move Puppies Up</button>
		<button id="movePuppiesDown" >Move Puppies Down</button>
		<button id="stopPuppies" >Stop Puppies</button>
	</div>
	<div class="middle">
		<img id="daPuppies" src="images/puppies.jpg" width="300" />
	</div>
</center>
<script type="text/javascript">

// _ ___ _ _ ___ _____
// | |/ _ \| | | |_ _|__ /
// | | | | | | | || | / /
// |_| |_| | |_| || | / /_
// (_)\__\_\\___/|___/____|
// Week two notQuiz in JavaScript
// Please test your answers in Chrome dev console


// 1. make an array of 5 puppies by name

// 2. iterate through your puppies using a for loop // & print their names to the console


// 3. your puppies are in the wrong places!
// create a function that swaps two elements in an
// array then returns the array out again, then call
// it to rearrange puppies.

// 4. create an array of ages (type int) for all
// your puppies then define a function that returns // average puppy age

// 5. sort your array of puppy ages and puppy names, and print to the console


// 6. visit the url https://www.jasondavies.com/maps/ // open Chrome console
// using JavaScript in the console
// find out how many images are on the page

// 7. using JavaScript in the console
// find out what the width is of the 1st image

// 8. define a function that makes your puppy
// image grow continuously larger and another
// that shrinks it, then attach these to the
// buttons above


// 9. define a function that moves your puppy
// to the right then call that function when the
// "move puppy" button is pushed.


// 10. define a function that stops the puppy when
// the button "stop puppy" is pressed. Stop it before
// it gets away!


// 11. Don't forget to stretch, breath &
// get some sleep! ☺
</script>
</html>

## puppies.js
var growth = 0;
var move = 0;
var moveTop = 0;
var leftMargin = 0;
var topMargin = 0;

window.onload = function(){

  setInterval(doStuff, 1000);

	document.getElementById("biggerPuppies").onclick = function(event){
		if (growth < 0) {
			growth = 0;
		}
		growth += 1;
	}

	document.getElementById("smallerPuppies").onclick = function(event){
		if (growth > 0) {
			growth = 0;
		}
		growth += -1;
	}

	document.getElementById("movePuppiesRight").onclick = function(event){
		if (move < 0) {
			move = 0;
		}
		move += 1;
	}

	document.getElementById("movePuppiesLeft").onclick = function(event){
		if (move > 0) {
			move = 0;
		}
		move += -1;
	}

	document.getElementById("movePuppiesUp").onclick = function(event){
		if (moveTop > 0) {
			moveTop = 0;
		}
		moveTop += -1;
	}

	document.getElementById("movePuppiesDown").onclick = function(event) {
		if (moveTop < 0){
			moveTop = 0;
		}
		moveTop += 1;
	}

	document.getElementById("stopPuppies").onclick = function(event){
		growth = 0;
		move = 0;
		moveTop = 0;
	}
}

function doStuff() {
	document.getElementById("daPuppies").width += growth;
	leftMargin += move;
	document.getElementById("daPuppies").style.marginLeft = leftMargin + "px";
	topMargin += moveTop;
	document.getElementById("daPuppies").style.marginTop = topMargin + "px";
}

## puppyArray.js
var puppies = ["Leonardo", "Michelangelo", "Donatello", "Raphael", "Splinter"];
var ages = ["1", "2", "2", "1", "3"];

function switchArray(myArray, index1, index2) {
  var newArray = myArray;
	var temp = newArray[index1];
	newArray[index1] = newArray[index2];
	newArray[index2] = temp;
	return newArray;
}

function averageAge(myArray) {
	var average = 0;
	for (var i = 0; i < myArray.length; i++) {
		average += myArray[i];
	}
	return average / myArray.length;
}

function sortArray(myArray) {
	var newArray = myArray;
	var temp = myArray[0];
	for (var x = newArray.length - 1; x >= 0; x--) {
		for (var y = 0; y < x - 1; y++){
			if (newArray[y] > newArray[y + 1]){
				temp = newArray[y];
				newArray[y] = newArray[y + 1];
				newArray[y + 1] = temp;
			}
		}
	}
	return newArray;
}

console.log(puppies);
console.log(ages);
switchArray(puppies, 0, 2);
console.log("switched puppies at 0 and 2");
console.log(puppies);
console.log("The average age is: " + averageAge(ages));
sortArray(puppies);
sortArray(ages);
console.log("After sorting the arrays they are: ");
console.log(puppies);
console.log(ages);
	<html>
	<head>
	<title>Puppies</title>
	<link rel="stylesheet" type="text/css" href="puppies.css">
	<script src="puppies.js"></script>
	</head>
	<body>
	<center>
	<div class="top">
	<h1>Puppies - wait, is that a puppy?! </h1>
	<button id="biggerPuppies">Bigger Puppies</button>
	<button id="smallerPuppies" >Smaller Puppies</button>
	<button id="movePuppiesRight" >Move Puppies Right</button>
	<button id="movePuppiesLeft" >Move Puppies Left</button>
	<button id="movePuppiesUp" >Move Puppies Up</button>
	<button id="movePuppiesDown" >Move Puppies Down</button>
	<button id="stopPuppies" >Stop Puppies</button>
	</div>
	<div class="middle">
	<img id="daPuppies" src="images/puppies.jpg" width="300" />
	</div>
	</center>
	<script type="text/javascript">

	// _ ___ _ _ ___ _____
	// \| \|/ _ \\| \| \| \|_ _\|__ /
	// \| \| \| \| \| \| \| \|\| \| / /
	// \|_\| \|_\| \| \|_\| \|\| \| / /_
	// (_)\__\_\\___/\|___/____\|
	// Week two notQuiz in JavaScript
	// Please test your answers in Chrome dev console


	// 1. make an array of 5 puppies by name

	// 2. iterate through your puppies using a for loop // & print their names to the console


	// 3. your puppies are in the wrong places!
	// create a function that swaps two elements in an
	// array then returns the array out again, then call
	// it to rearrange puppies.

	// 4. create an array of ages (type int) for all
	// your puppies then define a function that returns // average puppy age

	// 5. sort your array of puppy ages and puppy names, and print to the console


	// 6. visit the url https://www.jasondavies.com/maps/ // open Chrome console
	// using JavaScript in the console
	// find out how many images are on the page

	// 7. using JavaScript in the console
	// find out what the width is of the 1st image

	// 8. define a function that makes your puppy
	// image grow continuously larger and another
	// that shrinks it, then attach these to the
	// buttons above


	// 9. define a function that moves your puppy
	// to the right then call that function when the
	// "move puppy" button is pushed.


	// 10. define a function that stops the puppy when
	// the button "stop puppy" is pressed. Stop it before
	// it gets away!


	// 11. Don't forget to stretch, breath &
	// get some sleep! ☺
	</script>
	</html>
	var growth = 0;
	var move = 0;
	var moveTop = 0;
	var leftMargin = 0;
	var topMargin = 0;

	window.onload = function(){

	setInterval(doStuff, 1000);

	document.getElementById("biggerPuppies").onclick = function(event){
	if (growth < 0) {
	growth = 0;
	}
	growth += 1;
	}

	document.getElementById("smallerPuppies").onclick = function(event){
	if (growth > 0) {
	growth = 0;
	}
	growth += -1;
	}

	document.getElementById("movePuppiesRight").onclick = function(event){
	if (move < 0) {
	move = 0;
	}
	move += 1;
	}

	document.getElementById("movePuppiesLeft").onclick = function(event){
	if (move > 0) {
	move = 0;
	}
	move += -1;
	}

	document.getElementById("movePuppiesUp").onclick = function(event){
	if (moveTop > 0) {
	moveTop = 0;
	}
	moveTop += -1;
	}

	document.getElementById("movePuppiesDown").onclick = function(event) {
	if (moveTop < 0){
	moveTop = 0;
	}
	moveTop += 1;
	}

	document.getElementById("stopPuppies").onclick = function(event){
	growth = 0;
	move = 0;
	moveTop = 0;
	}
	}

	function doStuff() {
	document.getElementById("daPuppies").width += growth;
	leftMargin += move;
	document.getElementById("daPuppies").style.marginLeft = leftMargin + "px";
	topMargin += moveTop;
	document.getElementById("daPuppies").style.marginTop = topMargin + "px";
	}
	var puppies = ["Leonardo", "Michelangelo", "Donatello", "Raphael", "Splinter"];
	var ages = ["1", "2", "2", "1", "3"];

	function switchArray(myArray, index1, index2) {
	var newArray = myArray;
	var temp = newArray[index1];
	newArray[index1] = newArray[index2];
	newArray[index2] = temp;
	return newArray;
	}

	function averageAge(myArray) {
	var average = 0;
	for (var i = 0; i < myArray.length; i++) {
	average += myArray[i];
	}
	return average / myArray.length;
	}

	function sortArray(myArray) {
	var newArray = myArray;
	var temp = myArray[0];
	for (var x = newArray.length - 1; x >= 0; x--) {
	for (var y = 0; y < x - 1; y++){
	if (newArray[y] > newArray[y + 1]){
	temp = newArray[y];
	newArray[y] = newArray[y + 1];
	newArray[y + 1] = temp;
	}
	}
	}
	return newArray;
	}

	console.log(puppies);
	console.log(ages);
	switchArray(puppies, 0, 2);
	console.log("switched puppies at 0 and 2");
	console.log(puppies);
	console.log("The average age is: " + averageAge(ages));
	sortArray(puppies);
	sortArray(ages);
	console.log("After sorting the arrays they are: ");
	console.log(puppies);
	console.log(ages);