HTML, CSS and JavaScript playground

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Magic Word 2.0 - Sample</title>
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
		<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
		<link rel="stylesheet" type="text/css" href="magicWord.css">
	    <script src="magicWord.js"></script>
	</head>
    <body>
        <p>
            <h2 align="center">WELCOME TO MAGIC WORD!</h2>
            <h3>Please enter your guess on the space below:</h3>
            <p>
                <input type="text" id="guestGuess" />
                <input type="submit" id="guessButton" value="Guess"/>
            </p>
        </p>
        <p>
            <h3>Your guesses so far are: </h3>
            <p id="userGuesses"></p>
            <p id="guessesUsed">You have guessed: <span id="userAttempts"></span> times out six(6) chances.</p>
            <p id="guessesLeft">You have <span id="attemptsLeft"></span> guesses left.</p>
        </p>
    </body>
    </html>

var numOfAttempts = 6;
	var numOfGuesses = 0;
	var magicWord = "Just";
	
	function listWordsUsed(wordUsed) {
		var userTrials = $('#userGuesses');
		var divisor = $("<p id ='line'><div>" + wordUsed + "</div></p>");
		divisor.hide().appendTo(userTrials).fadeIn(6000);
		return;
	} //End of function listWordsUsed(wordUsed)

$(document).ready(function() {	
		$("#guessButton").click(function enteredGuess() 
			{
				//A user will enter a word and the word will be checked against the magic word
				//var enterGuess = prompt("What is your guess?", "Enter your guess here");
				var theGuess = $('#guestGuess').val();
				var magicWordResult;
				if (theGuess == '')
				{
					$("input[type=text]").ready(function () { $("#guestGuess").addClass("blur"); });
					magicWordResult = "Please enter a guess\nDon't leave the box empty.";
				}
				
				else if (theGuess.toLowerCase() == magicWord.toLowerCase()) 
				{
					//The user guesses the correct word
					$("input[type=text]").ready(function () { $("#guestGuess").addClass("unblur"); });
					$("input[type=submit]").val("Start a New Game");
					$("input[type=submit]").attr("id","startNew");
					$('#guestGuess').val('');
						$('#startNew').click(function() {
                              location.reload();
						});
					magicWordResult = "Your guess was " + theGuess + "! Nice going!";
					//document.writeln("Your guess was: " + guestGuess + "\nand the magic word is " + magicWord);
				}
				// Used lower case for both instances to compare both words
				else  //The user guesses wrong
				{
					//When user gets it wrong increase by one the numOfGuesses
					numOfGuesses ++;
					$("input[type=text]").ready(function () { $("#guestGuess").removeClass("blur"); });
					magicWordResult = "Your guess was" + theGuess + ". Nice try, but that's wrong, try again. \nYou have used " + numOfGuesses + " guesses.";
					// Subtract the amount of guesses from the amount of attempts
					var guessesLeft = numOfAttempts - numOfGuesses;
					
					if (numOfGuesses == numOfAttempts)
					{
						// When the user has reached all its attemps
						magicWordResult = "Sorry, you ran out of guesses. The magic word was " + magicWord + ".";
						$("input[type=text]").ready(function () { $("#guestGuess").removeClass("blur"); });
						$("#userAttempts").text(numOfGuesses);
						$("#attemptsLeft").text(guessesLeft);
						$("input[type=submit]").val("Start a New Game");
						$("input[type=submit]").attr("id","startNew");
						$('#guestGuess').val('');
							$('#startNew').click(function() {
                                  location.reload();
							});
					}
					else if (guessesLeft <= 3)
					{
						magicWordResult = "You still have " + guessesLeft + " guesses left.";
						$("input[type=text]").ready(function () { 
							$("#guestGuess").removeClass("blur");
							$("#userAttempts").text(numOfGuesses);
							$("#attemptsLeft").text(guessesLeft);
							$("#guessesLeft").addClass("guessesLeft");
							$('#guestGuess').val('');
						});
					}
					else
					{
						magicWordResult = "You still have " + guessesLeft + " guesses left.";
						$("input[type=text]").ready(function () { 
							$("#guestGuess").removeClass("blur");
							$("#userAttempts").text(numOfGuesses);
							$("#attemptsLeft").text(guessesLeft);
							$('#guestGuess').val('');
						});
					}
					
					//Creates a list of the words used by the user
					listWordsUsed(theGuess);
					
				}
				
				// Display in an alert mode and show how the user is doing
				alert(magicWordResult);
			
			});//End of Button Clicked
		
	});//End of document ready

Check out our Python playground!