PHP Tutorial for Beginners - Today’s Fortune Game -

PHP Tutorial for Beginners – Today’s Fortune Game – ( post, array, random, shuffle )

PHP Tutorial for Beginners - Today’s Fortune Game - ( post, array, random, shuffle )

Contents

Introduction & Demo
Sample Code
References

Introduction & Demo

Today, I updated new video “PHP Tutorial for Beginners – Today’s Fortune Game -” !

First, please check the demo page.

This is the fortune teller game that tells you today’s lucky number, color, and coding languages.

While creating this game, you will learn:
– HTML & CSS
– How to use POST method.
– How to get a random number.
– How to shuffle array and pick values out of it.

Hope you enjoy the video 🙂

Sample Code

<?php
	$messages = array('Great!', 'Good', 'Fine', 'Not bad', 'bad...');
	$colors = array('Red', 'Blue', 'Orange', 'Green', 'Pink', 'Black', 'White', 'Yellow', 'Purple', 'Brown');
	$codes = array('PHP', 'JavaScript', 'Java', 'Obj-C', 'Swift', 'C', 'C#', 'Ruby', 'HTML', 'CSS');
	
	$msg = '';
	$color = '';
	$coding = '';
	$number = '';
	
	
	// Hide result
	echo '<style>.result{display:none;} form{display:block;}</style>';
	
	
	if ($_SERVER['REQUEST_METHOD'] == 'POST') {
		
		// Generate a random number between 0 and 100
		$number = rand(0, 100);
		
		// Shuffle and pick one message out of an array.
		shuffle($messages);
		$msg = $messages[0];
		
		// This time, use array_rand() instead of shuffle()
		// array_rand() returns the key!!
		$i = array_rand($colors);
		$color = $colors[$i];
		
		
		// Pick out 2 items.
		$shuffled = array_rand($codes, 2);
		
		//foreach ($shuffled as $key) {
		//	$coding .= $codes[$key].' & ';
		//}
		// Get rid of the last '& '
		//$coding = substr($coding, 0, -2);
		
		// OR
		$coding .= $codes[$shuffled[0]].' & '.$codes[$shuffled[1]];
		
		
		// Show result & Hide submit button
		echo '<style>.result{display:block;} form{display:none;}</style>';
		
	}
	
 
?>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Today's Fortune</title>
	<link href='https://fonts.googleapis.com/css?family=Handlee' rel='stylesheet' type='text/css'>
	<style>
		* {
			font-family: 'Handlee', cursive;
			color: #6e6e6e;
		}
		body {
			background-color: lightblue;
		}
		.container {
			background-color: white;
			width: 300px;
			height: 500px;
			margin: 100px auto;
			padding: 20px;
		}
		h1 {
			text-align: center;
		}
		a {
			text-decoration: none;
		}
		a:hover {
			color: lightgrey;
		}
		.star {
			color: yellow;
		}
		table {
			width: 280px;
			margin: 10px auto;
			border-color: #efefef;
			font-size: 18px;
		}
		caption {
			margin-bottom: 10px;
			font-size: 18px;
		}
		td {
			padding: 14px;
		}
		form {
			text-align: center;
			margin-top: 100px;
		}
		input[type="submit"] {
			width: 160px;
			height: 50px;
			background-color: white;
			border-radius: 10px;
			font-size: 18px;
		}
	</style>
</head>
<body>
	<div class="container">
		<h1><a href="index.php"><span class="star">&#9733;</span> Today's Fortune <span class="star">&#9733;</span></a></h1>
		<br>
		<div class="result">
			<h1><?php echo $msg; ?></h1>
			<br><br>
			<table border="1" cellspacing="0">
				<caption>Lucky Item</caption>
				<tr>
					<td>Number</td>
					<td><?php echo $number; ?></td>
				</tr>
				<tr>
					<td>Color</td>
					<td><?php echo $color; ?></td>
				</tr>
				<tr>
					<td>Coding</td>
					<td><?php echo $coding; ?></td>
				</tr>
			</table>
		</div>
		<form method="post">
			<input type="submit" value="Tell Me!">
		</form>
	</div>
</body>
</html>

References

Google Fonts: https://fonts.google.com/