HTML, CSS and JavaScript playground

src="http://code.jquery.com/jquery-1.11.0.min.js"
src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"

var numOfAttempts = 6;
	var numOfGuesses = 0;
	var magicWord = "Just";

function guessesUsed(attemptsTaken) {
		var numGuessesLeft = $('#userAttempts').val();
		numGuessesLeft.innerHTML = attemptsTaken;
	} //End of function guessesUsed(attemptsTaken)
	
	function listWordsUsed(wordUsed) {
		var userTrials = $('#userGuesses');
		var divisor = $("<p><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"); });
							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"); });
							}
							else if (guessesLeft <= 3)
							{
								magicWordResult = "You still have " + guessesLeft + " guesses left.";
								$("input[type=text]").ready(function () { 
									$("#guestGuess").removeClass("blur");
									$("#guessesUsed").addClass("guessesLeft");
									$('#guestGuess').val('')
								});
							}
							else
							{
								magicWordResult = "You still have " + guessesLeft + " guesses left.";
								$("input[type=text]").ready(function () { 
									$("#guestGuess").removeClass("blur");
									$('#guestGuess').val('')
								});
							}
							
							//To show the number of guesses the user has used
							guessesUsed(numOfGuesses);
							
							//To show the number of guesses the user has left
							//guessesLeft(guessesLeft);
							
							//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!