Initializing
Liveweave
Web
expand_more
home
Home
data_object
CSS Explorer
arrow_outward
Palette
Color Explorer
arrow_outward
Polyline
Graphics Editor
arrow_outward
outbox_alt
Generative AI
arrow_outward
frame_source
Python Playground
New
arrow_outward
build
Tools
expand_more
restart_alt
Load "Hello Weaver!"
post_add
Generate Lorem ipsum...
code
Format HTML
code_blocks
Format CSS
data_object
Format JavaScript
library_add
Library
expand_more
A
Algolia JS
Animate CSS
Apex Charts JS
B
Bulma CSS
Bootstrap
C
Chart JS
Chartist
Create JS
D
D3
Dojo
F
Foundation
Fullpage JS
G
Granim JS
Google Charts
H
Halfmoon
J
jQuery
M
Materialize
Moment JS
Masonry JS
Milligram CSS
P
Pure CSS
Primer CSS
Popper JS
Pattern CSS
Picnic CSS
R
React JS
Raphael JS
Raisin CSS
S
Semantic UI
Skeleton CSS
Spectre CSS
Tachyons CSS
T
Tailwind
Three JS
U
UI Kit
Vis JS
W
Water CSS
download
Download
expand_more
developer_mode
Download as HTML
folder_zip
Download as .ZIP
cloud_upload
Save
account_circle
Login
settings
Settings
expand_more
14
px
Live mode
Night mode
Line number
Mini map
Word wrap
sync_alt
Reset Settings
smart_display
Run
<!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>
.blur { border: 2px solid #C00; outline: none; } .guessesLeft { font-weight:bold; color:#C00; } div:nth-child(odd) { color: #CCC; background-color: black; display: inline; } div:nth-child(even) { color: black; background-color: #CCC; display: inline; } p.line { line-height:0.5px; }
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