Magic 8 Ball is a browser based implementation of a "Magic 8 Ball". This project features autoloading PHP classes, HTML and CSS to create a virtual 8 Ball that will soon become your goto oracle with all important questions in your life!
You can preview a running version of this project here: Magic 8 Ball
Every now and then I like to post a complete project for you all to enjoy and often times that means it's just a simple proof of concept example rather a full featured project. The Magic 8 Ball project is completely functional but there isn't anything really fancy like animation or a neural network at work in this project, however I have a great set of tutorials on neural networks here: Getting Started With Neural Networks... if you'd prefer to read about that topic instead. :-)
The origins of this project was I was looking for "spooky" and fun projects or code to work on/blog about during the Halloween 2016 season but ultimately I didn't post this project.
Despite not posting it on my blog at that time, I uploaded it to my github account because liked how this project turned out so recently I thought I would blow the dust off and show it to you.
If you just want to dig in and start playing with the code, you can access everything for this project on my github: https://github.com/geekgirljoy/PHP/tree/master/Projects/magic-8-ball or copy the code segments below into the correct files.
Otherwise the tutorial starts now 😉
There is a caveate with this project, for simplicity/speed I used Bootstrap to reduce the CSS I had to write but you could eliminate that from the project very easily if you want to rely entirely on your own grid system and CSS.
Setting up the folders for this project is very straight forward, .css files in the [css] folder and .php files (other than index.php) in the [php] folder.
Inside the [php] folder there is a sub-folder called [classes] where the class files for the project will reside.
[magic-8-ball]
├── index.php
└── [css]
│ └── magic-8-ball.css
└── [php]
├── Magic8Ball.php
└── [classes]
└── Magic8Ball.class.php
Our Index file creates the framework for the Magic 8 Ball. We link to all the CSS used by the project including Bootstrap and JQuery.
Inside the body of the page we create a form with with a text input field along with a submit input. The form uses GET so the 'Question' field will be accessible in the URL however if you would prefer to use the POST method all you need to do is change method attribute on the form from GET to POST as the PHP code uses $_REQUEST['Question'] so it will work however you need for your situation
Beneath the form we include Magic8Ball.php on the page by doing <?php include('php/Magic8Ball.php'); ?>.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Magic 8 Ball</title>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Creepster" rel="stylesheet">
<link href="css/magic-8-ball.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 text-center">
<h1>Magic 8 Ball</h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-12 text-center">
<form action='#' method='get'>
<input name='Question' placeholder="Ask a question..." />
<input class='btn btn-success' type='submit' value='Ask' />
</form>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-5"></div>
<div class="col-sm-4 col-md-4 col-lg-4">
<?php include('php/Magic8Ball.php'); ?>
</div>
<div class="col-sm-4 col-md-4 col-lg-3"></div>
</div>
</div>
</div>
</div>
</body>
</html>
The CSS is all pretty straight forward, nothing unusual here. :-)
body{ background-color:#444444; }h1{ font-family: 'Creepster', cursive; color:#00bb00; }
#eight{ font-size:400%; color: #000000; }
.black-ball{ border-radius: 50%; background-color: #000; width: 200px; height: 200px; display:table; text-align:center; padding: 50px; box-shadow: 5px 5px 5px #333333; }
.white-ball{ border-radius: 50%; background-color: #fff; width: 22%; height: 22%; display:table-cell; vertical-align:middle; font-family: 'Creepster', cursive; }
.answer{ color: #bb0000; }
The PHP code that generates the 8 Ball is pretty simple. We start by setting up an auto-loader to auto include all classes we put in our classes subfolder.
Note: In order for your classes to get auto loaded by the code as written you will need to name the class file using this naming convention: <Class or File Name>.class.php If you would prefer not to use that naming convention you can modify the auto-loader to meet your needs.
We follow that up with the Div tags that become the body of the 8 Ball when styled with our CSS.
After that we use $_REQUEST['Question'] to check if the user has asked a question. If no question was asked the #8 placeholder is used.
Once the user asks a question we create an array of strings containing of all possible responses which we call $answers.
After that we instantiate the Eight Ball object by passing the class the count of how many items are in our $answers array using: $EightBall = new Magic8Ball(count($answers)-1);. The class will return a number as it's answer.
Once we have the $EightBall answer all we need to do is echo the the result in a span assigned the 'answer' class: echo '<span class="answer">' . $answers[ $EightBall>answer ] . '</span>' . PHP_EOL;.
<?php
function ClassAutoloader($class) {
include 'php/classes/' . $class . '.class.php';
}
spl_autoload_register('ClassAutoloader');
?>
<div class="black-ball">
<div class="white-ball">
<?php
if(isset($_REQUEST['Question'])){
$answers = array("It is certain",
"It is decidedly so",
"Without a doubt",
"Yes, definitely",
"You may rely on it",
"As I see it, yes",
"Most likely",
"Outlook good",
"Yes",
"Signs point to yes",
"Reply hazy try again",
"Ask again later",
"Better not tell you now",
"Cannot predict now",
"Concentrate and ask again",
"Don't count on it",
"My reply is no",
"My sources say no",
"Outlook not so good",
"Very doubtful");
/*
* Invoke the wisdom of the Magic 8 Ball.
*
* Oh great magic eight ball. We beseach thee to answer our question :-P
* Display the answer.
*/
$EightBall = new Magic8Ball(count($answers)-1);
echo '<span class="answer">' . $answers[ $EightBall->answer ] . '</span>' . PHP_EOL;
}
else{
// Initial value of of the ball
echo'<div id="eight">8</div>' . PHP_EOL;
}
?>
</div>
</div>
The class file defines the Magic 8 Ball. It has a single property '$answer' and a single method (the constructor). When the class is instantiated, it takes a single argument ($total) which it uses as the $max value for mt_rand().
<?php
/*
* Magic8Ball.class.php
*
* Joy Harvel
*
* 09/18/2016
*
*/
class Magic8Ball{
public $answer;
function __construct($total) {
$this->answer = mt_rand( 0 , $total);
}
}
?>
If you have gotten this far all that is left to do is test the code and get top notch advice on all your tough questions! :-P
Live Preview: Magic 8 Ball
View Source: Magic 8 Ball on Github
As always I hope you found this post and project both interesting and informative. Please share this post with your friends and followers on your social media platforms and don't forget to click the follow button over on the top right of this page.
Notice: I am seeking paid sponsors for my content so if you would like to sponsor my work please contact me.
Much Love, ~Joy