Fun bits

I thought I'd share some of the things I've made on this page. This isn't me showing off or anything, as most of them aren't really very impressive. I just hope someone may find something here entertaining, interesting or useful.

 

SVG Dartboard

http://djave.co.uk/free-svg-dartboard/

Made for my brother and posted on my blog, this actually gets me a fair bit of traffic! An SVG dartboard, with all the ID's put in as the right numbers so you can parse them with jQuery. #great

Timer

http://djave.co.uk/timer/

I get excited about stuff. And OCD. What could be better than a way to check how many days, hours, minutes and seconds are remaining until a certain day? NOT MUCH.

Djipsum

http://djave.co.uk/djipsum/

I seem to spend most of my life looking for lorem ipsum text. I gave up and just made my own, and kept it here. Maybe you can use it one day too.

Swear word tester

http://djave.co.uk/swearing/

My friends and I regularly call each other silly names, such as "you sausage", and often replace some more abrasive words with sillier ones. I thought it might be fun to make a page dedicated to testing the robustness of these words with a little web app.

Code

I won't show you how its all done as its nothing taxing and was just for fun (and especially as there is some very hit and miss language parsing done server side!) but it is a great example of one of my favourite php functions: shuffle(), which ensured a random order of items in an array.

<?php
		// First, fill up an array with the sentences (the last one uses a variable $conj - 'a' or 'an' depending on the first letter of the word)
		$word_array = array(
			"<p>\"Not this guy - he knows his {$word}.\"</p>",
"<p>\"We're in deep {$word}.\"</p>",
"<p>\"I'm up {$word}creek without a paddle.\"</p>",
"<p>\"Yeah, I hate them too... that band are seriously {$word}.\"</p>",
"<p>\"I just wish my boss wasn't such {$conj} {$word}.\"</p>", ); // Later on... shuffle($word_array); // Now we have a random order, we can choose to either show all of them:
if($_GET['viewall'] == "yes")
{
foreach($word_array as $sentence)
{
echo $sentence;
}
echo "<a href=\"" . $root . "?w=" . $_GET['w'] . "\">View less</a>";
} // or just show the first 10 or so
else
{
while($i <= 10) {
echo $word_array[$i];
$i++;
}
echo "<a href=\"" . $root . "?w=" . $_GET['w'] . "&viewall=yes\">View all</a>";
}
?>

Carl Cox - The Game

http://djave.co.uk/cox/

My friends created a drinking game called 'Carl Cox'. It is easily one of the most complicated games I have every had the pleasure of taking part in, including such brilliant attributes as every player having 3 hands of cards at a time, and almost every card in the pack having its own rule - each rule a name of a DJ or partying technique. In order to play this as a new comer, I thought it made for a perfect opportunity to make a jQuery Mobile app, listing all the cards and their meanings.

The grid

http://djave.co.uk/grid/

I wrote a fun little function that makes an invisible grid, divs or table cells pop up and fade away with random colours. I used to use it throughout my site.

Code

A brief commentary on how it does what it does.

// JavaScript file

// First set up an array with all the colours you'll need in it.  Some of the hex codes here are repeated, but that was just a technique to make some colours show up more often than others
var theColours = new Array("E6F9FF","CDF3FF","B3ECFF","9AE6FF","80E0FF","67DAFF","4DD4FF","34CEFF","1AC8FF","E6F9FF","CDF3FF","B3ECFF","9AE6FF","80E0FF","67DAFF","4DD4FF","34CEFF","1AC8FF","E6F9FF","CDF3FF","B3ECFF","9AE6FF","80E0FF","67DAFF","4DD4FF","34CEFF","1AC8FF","E6F9FF","CDF3FF","B3ECFF","9AE6FF","80E0FF","67DAFF","4DD4FF","34CEFF","1AC8FF","E6F9FF","CDF3FF","B3ECFF","9AE6FF","80E0FF","67DAFF","4DD4FF","34CEFF","1AC8FF","E6F9FF","CDF3FF","B3ECFF","9AE6FF","80E0FF","67DAFF","4DD4FF","34CEFF","1AC8FF","1f1f1f","6a6a6a", "f7cc57");

// When everything has loaded
$(document).ready(function(){

	// Every time the mouse enters an element with the class name...
	$(".grid-10-per").mouseenter(function() {
	
		// Choose at random one of the colours from the array
		var newColour = theColours[Math.floor(Math.random()*theColours.length)];
		
		  // Assign the background colour to that one
		  $(this).css("background-color","#" + newColour);
		  
		  // Change the opacity to 1...
		  $(this).css("opacity", 1);
		  
		  // ... and then fade it quickly to 0
		  $(this).fadeTo(3000, 0);
  });
});

Last one

http://djave.co.uk/space/

I don't even know what this is, but its never going to see the light of day. Have a look, check it out : )