jnf/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Magic 8 Ball</title>
  <meta charset="utf-8">
  <style type="text/css">
    body {
      font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    }
    header {
      background: #7B68EE;
      background: url("https://www.freewebheaders.com/wordpress/wp-content/gallery/clouds-sky/clouds-sky-header-2069-1024x300.jpg");
      background-size: cover;
      text-align: center;
      color: white;
      padding: 1rem;
    }

    img {
      max-width: 100%;
    }

    form {
      border: 1px solid #7B68EE;
      padding: 2rem;
    }

    section.container {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
      margin-top: 15vh;
    }
  </style>
</head>
<body>
<header>
  <h1>Magic 8 Ball</h1>
  <small id="subhead">All of your questions answered, just maybe not in the order you ask them.</small>
</header>

<section class="container">
  <img onclick="handleClick()" src="http://appinventor.mit.edu/explore/sites/all/files/Teach/media/image_8_ball.jpg" alt="a magic 8 ball">
  <div id="fortune-container"></div>
  <div>
    <form name="magic8" onsubmit="answerQuestion()">
      <label for="question">What do you want to know?</label>
      <input type="text" name="question" id="question">
      <input type="submit" name="submitQuestion" value="ASK">
    </form>
  </div>
  <div>
    <form name="addForm" onsubmit="addAnswer()">
      <label for="addInput">What answer would you like to add?</label>
      <input type="text" name="answerToAdd" id="addInput" value="">
      <input type="submit" name="submitAddAnswer" value="ADD">
    </form>
  </div>
</section>
<script type="text/javascript" src="scripts.js"></script>
</body>
</html>

## scripts.js
// this is an anonymous function
function windowReady () {
  var subhead = document.getElementById("subhead");
  var container = document.getElementById("fortune-container");
  console.log(subhead);
  console.log(container);
}

window.onload = windowReady;
// window.onload = function () {
//   console.log("zomg ready!");
// }

var spices = ["clove", "nutmeg", "ancho"];

// this is a named function
function countEmUp(arr) {
  // count how many letters are in each word of the array
  // var allSpices = arr.join("");
  // return allSpices.length
  // return arr.join("").length

  var sum = 0;
  for (var i = 0; i < arr.length; i++) {
    sum += arr[i].length;
  }

  return sum
}

// console.log(countEmUp(spices)); // => 16

function toggleSpice(name) {
  // checks for the spice in the array
  var spiceIndex = spices.indexOf(name);

  if (spiceIndex == -1) { // not in the array
    spices.push(name);
    console.log('added to spices: ' + name);
  } else { // must be in the array
    // splice takes two params: index of spice, how many to remove
    spices.splice(spiceIndex, 1);
    console.log('removed from spices: ' + name);
  }
}

// toggleSpice("vanilla");
// toggleSpice("ancho");
// console.log(spices); // => ["clove", "nutmeg", "vanilla"]

var numbers = [1, 2, 3, 4, 5];
// console.log(numbers.indexOf(3)); // => 2
// console.log(numbers.indexOf(10)); // => -1
// if (number.indexOf(3) < 0) { console.log('nope!'); } // never a nope

// function isBigEnough(element) {
//   console.log('checking ' + element);
//   return element >= 4;
// }
//
// var index = numbers.findIndex(isBigEnough);
// console.log(index + ' is the answer');

// for (var i = 0; i < numbers.length; i++) {
//   var n = numbers[i];
//   console.log(n * n);
// }
//
// function squareMe(n) {
//   console.log(n * n);
// }
// numbers.forEach(squareMe);
// squareMe(1);
// squareMe(2);
// squareMe(3);
// squareMe(4);
// squareMe(5);

var cart = [
  { name: "Blue chukka boots", price: 17.99, id: "item001" },
  { name: "comfortable slippers", price: 50, id: "item002" }
]
function findInCart(item) {
  // check to see if this is the item you're looking for
}


// alert("Let's get to work! ")
// TODO: Build an array of strings that could be answers to magic 8 ball type questions.
var answers = [
  "Yes",
  "No",
  "It Depends...",
  "Signs point to no.",
  "No way José",
  "Ummmmm. Nerp.",
  "Call your mom.",
  "Of course!",
  "Obvs.",
  "Cheyah boi!",
  "Certainly!",
  "I guess..."
]

function handleClick () {
  // alert("AHHH! You clicked me!");
  console.log(event.target);
}

function answerQuestion () {
  event.preventDefault();

  var question = document.magic8.question.value;
  var rando = Math.floor(Math.random() * answers.length);
  var answer = answers[rando];

  var container = document.getElementById("fortune-container");
  container.innerHTML = "<p>" + answer + "</p>";

  // console.log(["Oh, you asked...", question, "? ", "Well I think...", answer].join(" "))
}

function addAnswer () {
  event.preventDefault();

  var answerToAdd = document.addForm.answerToAdd.value;
  answers.push(answerToAdd);
  console.log("Added " + answerToAdd + " to answers.");
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Magic 8 Ball</title>
	<meta charset="utf-8">
	<style type="text/css">
	body {
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	}
	header {
	background: #7B68EE;
	background: url("https://www.freewebheaders.com/wordpress/wp-content/gallery/clouds-sky/clouds-sky-header-2069-1024x300.jpg");
	background-size: cover;
	text-align: center;
	color: white;
	padding: 1rem;
	}

	img {
	max-width: 100%;
	}

	form {
	border: 1px solid #7B68EE;
	padding: 2rem;
	}

	section.container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	margin-top: 15vh;
	}
	</style>
	</head>
	<body>
	<header>
	<h1>Magic 8 Ball</h1>
	<small id="subhead">All of your questions answered, just maybe not in the order you ask them.</small>
	</header>

	<section class="container">
	<img onclick="handleClick()" src="http://appinventor.mit.edu/explore/sites/all/files/Teach/media/image_8_ball.jpg" alt="a magic 8 ball">
	<div id="fortune-container"></div>
	<div>
	<form name="magic8" onsubmit="answerQuestion()">
	<label for="question">What do you want to know?</label>
	<input type="text" name="question" id="question">
	<input type="submit" name="submitQuestion" value="ASK">
	</form>
	</div>
	<div>
	<form name="addForm" onsubmit="addAnswer()">
	<label for="addInput">What answer would you like to add?</label>
	<input type="text" name="answerToAdd" id="addInput" value="">
	<input type="submit" name="submitAddAnswer" value="ADD">
	</form>
	</div>
	</section>
	<script type="text/javascript" src="scripts.js"></script>
	</body>
	</html>
	// this is an anonymous function
	function windowReady () {
	var subhead = document.getElementById("subhead");
	var container = document.getElementById("fortune-container");
	console.log(subhead);
	console.log(container);
	}

	window.onload = windowReady;
	// window.onload = function () {
	// console.log("zomg ready!");
	// }

	var spices = ["clove", "nutmeg", "ancho"];

	// this is a named function
	function countEmUp(arr) {
	// count how many letters are in each word of the array
	// var allSpices = arr.join("");
	// return allSpices.length
	// return arr.join("").length

	var sum = 0;
	for (var i = 0; i < arr.length; i++) {
	sum += arr[i].length;
	}

	return sum
	}

	// console.log(countEmUp(spices)); // => 16

	function toggleSpice(name) {
	// checks for the spice in the array
	var spiceIndex = spices.indexOf(name);

	if (spiceIndex == -1) { // not in the array
	spices.push(name);
	console.log('added to spices: ' + name);
	} else { // must be in the array
	// splice takes two params: index of spice, how many to remove
	spices.splice(spiceIndex, 1);
	console.log('removed from spices: ' + name);
	}
	}

	// toggleSpice("vanilla");
	// toggleSpice("ancho");
	// console.log(spices); // => ["clove", "nutmeg", "vanilla"]

	var numbers = [1, 2, 3, 4, 5];
	// console.log(numbers.indexOf(3)); // => 2
	// console.log(numbers.indexOf(10)); // => -1
	// if (number.indexOf(3) < 0) { console.log('nope!'); } // never a nope

	// function isBigEnough(element) {
	// console.log('checking ' + element);
	// return element >= 4;
	// }
	//
	// var index = numbers.findIndex(isBigEnough);
	// console.log(index + ' is the answer');

	// for (var i = 0; i < numbers.length; i++) {
	// var n = numbers[i];
	// console.log(n * n);
	// }
	//
	// function squareMe(n) {
	// console.log(n * n);
	// }
	// numbers.forEach(squareMe);
	// squareMe(1);
	// squareMe(2);
	// squareMe(3);
	// squareMe(4);
	// squareMe(5);

	var cart = [
	{ name: "Blue chukka boots", price: 17.99, id: "item001" },
	{ name: "comfortable slippers", price: 50, id: "item002" }
	]
	function findInCart(item) {
	// check to see if this is the item you're looking for
	}


	// alert("Let's get to work! ")
	// TODO: Build an array of strings that could be answers to magic 8 ball type questions.
	var answers = [
	"Yes",
	"No",
	"It Depends...",
	"Signs point to no.",
	"No way José",
	"Ummmmm. Nerp.",
	"Call your mom.",
	"Of course!",
	"Obvs.",
	"Cheyah boi!",
	"Certainly!",
	"I guess..."
	]

	function handleClick () {
	// alert("AHHH! You clicked me!");
	console.log(event.target);
	}

	function answerQuestion () {
	event.preventDefault();

	var question = document.magic8.question.value;
	var rando = Math.floor(Math.random() * answers.length);
	var answer = answers[rando];

	var container = document.getElementById("fortune-container");
	container.innerHTML = "<p>" + answer + "</p>";

	// console.log(["Oh, you asked...", question, "? ", "Well I think...", answer].join(" "))
	}

	function addAnswer () {
	event.preventDefault();

	var answerToAdd = document.addForm.answerToAdd.value;
	answers.push(answerToAdd);
	console.log("Added " + answerToAdd + " to answers.");
	}