Skip to content

Instantly share code, notes, and snippets.

@jnf
Last active May 16, 2017 04:17
Show Gist options
  • Save jnf/73b1b4069ea052c68d935505a883e6ef to your computer and use it in GitHub Desktop.
Save jnf/73b1b4069ea052c68d935505a883e6ef to your computer and use it in GitHub Desktop.
<!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.");
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment