Magic 8 Ball

Fun to show the kids

by Justin Hale

HTML

<div id="eightball">
    <div id="showmessage"></div>
    <button id="getmessage">Answer!</button>
</div>

CSS

#eightball { width: 300px; height: 300px; border-radius: 0px; background: black; position: relative; margin: 50px auto; }
#showmessage { 
font-size: 14px;
font-family: futura;
font-weight: Bold;
margin: 2px auto;
background: rgb(190, 120, 190);
width: 150px;
height: 50px;
top: 75px;
position: absolute;
left: 135px;
margin-left: -67.5px;
border-radius: 0px;
color: black;
padding: 8px; text-align: center; }
#getmessage { 
    font-size: 12px;
    font-family: futura;
    position: absolute;
    width: 100px;
    bottom: 85px;
    height: 40px;    
    left: 100px;
    border-radius: 0px;
    font-weight: bold;
}

JavaScript

$( document ).ready(function() {
    $('#getmessage').on('click',function(){
        var msg = randomIntFromInterval(0,no_messages.length - 1);
        $('#showmessage').html(no_messages[msg]);
    });
});


var messages = [
'I don\'t think so',
'Yes, for sure',
'No, definitely Not!',
'Maybe',
'Ask me again later'    
]
var no_messages = [
'Never!',
'Not on your life.',
'No way',
'Dream on!',
'No, definitely Not!',
'Ask someone else',
'Absolutely Not!'    
]

function randomIntFromInterval(min,max) {
    return Math.floor(Math.random()*(max-min+1)+min);
}