bogoreh/Project: Word game.html

## Project: Word game.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Project: Word game </title>
        <style>
            body {
                font-family: Arial, sans-serif;
            }
            form {
                font-size: 1.5em;
            }
            .scrambled, input, button {
                font-family: monospace;
                font-size: 2em;
            }

        </style>
    </head>
    <body>

    <h1>Word game!</h1>
    <form id="joke-form">
        <label>
            Unscramble these letters to form a word:<Br>
            <span class="scrambled">REYJUQ</span>
            <br>
            <input type="text" size="10">
        </label>
        <button type="submit">Check</button>
    </form>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        //add instruction for user
$("<p>")
  .appendTo("h1")
  .css("font-size", "15" + "px")
  .text("Please use all caps.");
// add element for result
$("<p>")
  .addClass("result")
  .appendTo("body");
// when the user submits the form,
$("#joke-form").on("submit", function(event) {
  event.preventDefault();
  var $sub = $(this).find("[type=text]");
  var answer = $sub.val();
  //   check that their answer is correct
  if (answer === "JQUERY") {
    //   and show them appropriate message
    $(".result")
      .css("color", "blue")
      .css("text-align", "center")
      .text("You Win!");
    var but = $("<button>")
      .addClass("next")
      .attr("type", "reset")
      .css("margin", "10" + "px")
      .text("Next")
      .appendTo(".result");
  } else {
    $(".result")
      .css("color", "red")
      .css("text-align", "center")
      .text("Try Again!");
  }
  $(".result").on("click", function(event) {
    event.preventDefault();
    console.log("buttonworks");
    $('input[type="text"]').val("");
    //  RAASTCPIJV JAVASCRIPT
    $(".scrambled").text("RAASTCPIJV");
    $("#joke-form").on("submit", function(event) {
      event.preventDefault();
      var $sub = $(this).find("[type=text]");
      var answer = $sub.val();
      //   check that their answer is correct
      if (answer === "JAVASCRIPT") {
        //   and show them appropriate message
        $(".result")
          .css("color", "blue")
          .css("text-align", "center")
          .text("You Win!");
        var but = $("<button>")
          .addClass("next")
          .attr("type", "reset")
          .css("margin", "10" + "px")
          .text("Reset")
          .insertAfter("button[type=submit]");
        $(".next").on("click", function() {
          $(".result").text("Reload to play again!");
        });
      } else {
        $(".result")
          .css("color", "red")
          .css("text-align", "center")
          .text("Try Again!");
      }
    });
  });
});

    </script>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Project: Word game </title>
	<style>
	body {
	font-family: Arial, sans-serif;
	}
	form {
	font-size: 1.5em;
	}
	.scrambled, input, button {
	font-family: monospace;
	font-size: 2em;
	}

	</style>
	</head>
	<body>

	<h1>Word game!</h1>
	<form id="joke-form">
	<label>
	Unscramble these letters to form a word:<Br>
	<span class="scrambled">REYJUQ</span>
	<br>
	<input type="text" size="10">
	</label>
	<button type="submit">Check</button>
	</form>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<script>
	//add instruction for user
	$("<p>")
	.appendTo("h1")
	.css("font-size", "15" + "px")
	.text("Please use all caps.");
	// add element for result
	$("<p>")
	.addClass("result")
	.appendTo("body");
	// when the user submits the form,
	$("#joke-form").on("submit", function(event) {
	event.preventDefault();
	var $sub = $(this).find("[type=text]");
	var answer = $sub.val();
	// check that their answer is correct
	if (answer === "JQUERY") {
	// and show them appropriate message
	$(".result")
	.css("color", "blue")
	.css("text-align", "center")
	.text("You Win!");
	var but = $("<button>")
	.addClass("next")
	.attr("type", "reset")
	.css("margin", "10" + "px")
	.text("Next")
	.appendTo(".result");
	} else {
	$(".result")
	.css("color", "red")
	.css("text-align", "center")
	.text("Try Again!");
	}
	$(".result").on("click", function(event) {
	event.preventDefault();
	console.log("buttonworks");
	$('input[type="text"]').val("");
	// RAASTCPIJV JAVASCRIPT
	$(".scrambled").text("RAASTCPIJV");
	$("#joke-form").on("submit", function(event) {
	event.preventDefault();
	var $sub = $(this).find("[type=text]");
	var answer = $sub.val();
	// check that their answer is correct
	if (answer === "JAVASCRIPT") {
	// and show them appropriate message
	$(".result")
	.css("color", "blue")
	.css("text-align", "center")
	.text("You Win!");
	var but = $("<button>")
	.addClass("next")
	.attr("type", "reset")
	.css("margin", "10" + "px")
	.text("Reset")
	.insertAfter("button[type=submit]");
	$(".next").on("click", function() {
	$(".result").text("Reload to play again!");
	});
	} else {
	$(".result")
	.css("color", "red")
	.css("text-align", "center")
	.text("Try Again!");
	}
	});
	});
	});

	</script>
	</body>
	</html>