Magic 8 Ball

Fun to show the kids

by Justin Hale

HTML

<h1>Magic 8 Ball</h1>
<!-- a div is a container -- notice each one has an open and a close -- see the </ -- that is how we know it's a closing tag. This is standard XML syntax; which HTML is based on. Notice some DIV have an ID attribute -- In our Javascript and our this is how we will find the right DIV element. An ID should always be unique -- in other words only used once. A more generic identifier is the class attribute. An element can have multiple classes and multiple elements can share the same class. Mixing an ID and classes allows us to make choices about things that are generic and things that are specific. This allows us to be smart and efficient with how we reuse code that we write. -->
<div id="eightball">
    <div id="showmessage" class="div_shadow text_shadow"></div>
    <button id="getmessage">Get Your Answer!</button>
</div>
<p>Simply say (or think) your question, and click the button.</p>
<!--unordered list used as menu-->
<ul id="menu">
    <li><a id="normal-mode" class="selected">normal</a></li> 
    <!-- the class 'selected' here will become dynamic in our code. For starters at first load however this will be our 'selected item' -->
    <li><a id="positive-mode">positive</a></li>
    <li><a id="negative-mode">negative</a></li>
</ul>
<p class="footnote">A magical lesson just or you.</p>

CSS

body { font-family: futura; }
h1, p { text-align:center } /* the comma lets us list multiple elements and give them the same rule. In this case all h1 tags and all p tags are targeted. */
p.footnote { text-align: right; font-size: 10px } /* this rule will override the one above it. It is more specifically targeted and it comes later than the one above it. */
#eightball { width: 200px; height: 200px; border-radius: 100px; background: black; position: relative; margin: 50px auto; }
#showmessage { font-size: 15px;
font-weight: bold;
margin: 2px auto;
background: rgb(200, 153, 200);
width: 134px;
height: 36px;
top: 50px;
position: absolute;
left: 50%;
margin-left: -76px;
border-radius: 27px;
color: #240324;
padding: 10px; text-align: center; }
#getmessage { 
    position: absolute;
    bottom: 38px;
    height: 35px;    
    left: 40px;
    border-radius: 6px;
    font-weight: bold;
}
/* I created this with an online tool http://www.css3generator.in/box-shadow.html */
.div_shadow {
box-shadow: inset 0px 0px 50px 8px #2F0045;
-webkit-box-shadow: inset 0px 0px 50px 8px #2F0045;
-moz-box-shadow: inset 0px 0px 50px 8px #2F0045;
-o-box-shadow: inset 0px 0px 50px 8px #2F0045;
}
/* http://css3gen.com/text-shadow/ */
.text_shadow {
  text-shadow: 2px 2px 2px rgba(255, 192, 255, 1);
}
#menu li { margin: 3px; }
#menu a { padding 3px 6px; display: inline-block;  border: 1px solid #FFF; cursor: pointer; }
#menu a.selected { border-color: #000; }

JavaScript

$( document ).ready(function() { 
/* 
$ = jQuery, which means the $ is an alias to jQuery. So writing jQuery() is the same as writing $(). The parameter it takes is normally a target element. You'll understand what that means as you read on; but essentially it is the HTML element that you want to interact with.

The ready() function is an event function that is normally bound to 'document'; which is an important object. The ready function will execute soon as the document is fully prepared and rendered... since we are binding events to elements in the document this gives us insurance that the element we need is really there! The document object is the mother of all -- meaning in a heirachy, it is at the top and everything else is below or part of it (although there are some objects above it, as well; such as 'window' and 'browser'. It is interesting to note that the code passed as a parameter to ready() will get read and compiled by the browser but any code not inside it will actually be executed ahead of this code -- even though it sits below it. This is because the document can't become in 'ready' state until it does everything else in the document -- including executing any other javascript. So in our code look below were we have our messages in arrays and assigned to variables, we can know that all of those variables are available BEFORE the code inside of ready() gets executed. Notice also that all of our code is actually wrapped inside of what is called an anonymous function and this function is actually the only parameter of ready(). Anytime you see "function()" called like this, it is a call to an inline anonymous function. Look below to the on() function; it's first parameter is 'click'... that's the event and it's second parameter is what it does but you can't pass a big block of code as a parameter so it has to be packaged in a function -- this is how we do it. */
    
    $('#getmessage').on('click',function(event){
        event.preventDefault(); /*...