xtina-starr/adopt-a-pet.html

## adopt-a-pet.html
<!doctype html>
<html>
  <head>
    <meta charset=utf-8>
    <title>Adopt A Pet</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <style>
      #size-choice {
        display: none;
      }

      #training-choice {
        display: none;
      }

      body {

      }

      img {
        margin: 40px auto;
        width: 350px;
        height: 350px;
        border-radius: 50%;
        border: 1px solid black;
      }

      #container {
        margin-top: 120px;
        margin-right: auto;
        margin-left: auto;
        text-align: center;
      }

      .pickagain {
        display: block;
        margin: 20px auto;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <h1>Adopt A Pet</h1>

      <p>Get a pet based on the answers to the following questions:</p>

      <form>
        <div id="texture-choice">
          <h3>Would you like a pet that was...</h3>
          <input type="radio" name="texture" id="fuzzy" value="fuzzy"/>
          <label for="fuzzy">Fuzzy</label><br>

          <input type="radio" name="texture" id="scaly" value="scaly" />
          <label for="scaly">Scaly</label><br>
          <button id="petTexture">Next</button>
        </div>

        <div id="size-choice">
          <h3>Would you rather your pet... </h3>
          <input type="radio" name="size" id="small" value="small" />
          <label for="small">Cute and small.</label><br>

          <input type="radio" name="size" id="big" value="big" />
          <label for="big">Huge and something you might need to have papers for.</label><br>
          <button id="petSize">Next</button>
        </div>

        <div id="training-choice">
          <h3>Should your pet...</h3>
          <input type="radio" name="train" id="trainee" value="trainee" />
          <label for="trainee">Be trained.</label><br>

          <input type="radio" name="train" id="trainer" value="trainer" />
          <label for="trainer">Train you.</label><br>

          <input id="submit" type="submit" value="Submit">
        </div>
      </form>

      <div id="result"></div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

    <script>
      $(document).ready(function() {
        var pet = [],
            textureButton = $('#texture-choice button#petTexture'),
            sizeButton = $('#size-choice button#petSize'),
            submitButton = $('#training-choice #submit');

        function chooseTexture(e) {
          e.preventDefault();
          if ($('#texture-choice input:radio:checked').length < 1) {
            alert('You must select a fuzzy of scaly animal before moving on.');
          }

          if ($('input[name=texture]:checked').val() === "fuzzy") {
            pet.push('a');
          } else {
            pet.push('b');
          }

          $('#texture-choice').css('display', 'none');
          $('#size-choice').show(400);
        }

        function chooseSize(e) {
          e.preventDefault();
          if ($('#size-choice input:radio:checked').length < 1) {
            alert('You must select small or tiny before moving on.');
          }

          if ($('input[name=size]:checked').val() === "small") {
            pet.push('a');
          } else {
            pet.push('b');
          }

          $('div#size-choice').css('display', 'none');
          $('div#training-choice').show(400);
        }

        function generatePet(pet) {
          switch (pet) {
            case 'aaa':
              alert('puppy');
              $('#result').append($('<img src="pet_images/dog.png">'));
              // $('#result').append($('img'));
              // $('#result').load('pet_images/dog.png', function(data) {
              //   $('<img>', {
              //     id: "puppy-img",
              //     src: "pet_images/dog.png"
              //   });
              break;
            case 'aba':
              alert('horse');
              $('#result').append($('<img src="pet_images/horse.png">'));
              //$('#result').load("<img src=" + "pet_images/horse.png" + ">");
              break;
            case 'aab':
              alert('kitten');
              $('#result').append($('<img src="pet_images/kitten.png">'));
              // $('#result').load("<img src=" + "pet_images/kitten.png" + ">");
              break;
            case 'baa':
              alert('hedgehog');
              $('#result').append($('<img src="pet_images/hedgehog.png">'));
              // $('#result').load('pet_images/hedgehog.png');
              break;
            case 'abb':
              alert('silverback gorilla ');
              $('#result').append($('<img src="pet_images/gorilla.png">'));
              // $('#result').load('pet_images/gorilla.png');
              break;
            case 'bbb':
              alert('snake');
              $('#result').append($('<img src="pet_images/snake.png">'));
              // $('#result').load('pet_images/snake.png');
              break;
            case 'bab':
              alert('gecko');
              $('#result').append($('<img src="pet_images/gecko.png">'));
              // $('#result').load('pet_images/gecko.png');
              break;
            case 'bba': // ['b','b','a']:
              alert('Littlefoot from The Land Before Times');
              $('#result').append($('<img src="pet_images/littlefoot.png">'));
              // $('#result').load('pet_images/littlefoot.png');
              break;
            default:
              alert('you gets nada');
              // $('#result').load('');
              break;
          }
        }

        function chooseTraining(e) {
          e.preventDefault();
          if ($('#training-choice input:radio:checked').length < 1) {
            alert('You must select small or tiny before moving on.');
          }

          if ($('input[name=train]:checked').val() === 'trainee') {
            pet.push('a');
          } else {
            pet.push('b');
          }

          pet = pet.join('');
          generatePet(pet);

          $('#submit').hide();
          // $('<button>', {id: 'reset'}).prepend('#result');
          var $resetButton = $("<button>", {id: 'start-over', class: 'pickagain'}).html('Reset');

          $resetButton.click(function(e) {
            e.preventDefault();
            $('form')[0].reset();
            $('#result').html('');
            $('#texture-choice').show();
            $('#submit').show();
            $('#training-choice').hide();
            pet = [];
          });

          $("#result").prepend($resetButton);
        }

        textureButton.on('click', chooseTexture);
        sizeButton.on('click', chooseSize);
        submitButton.on('click', chooseTraining);

      });
    </script>

  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset=utf-8>
	<title>Adopt A Pet</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
	<style>
	#size-choice {
	display: none;
	}

	#training-choice {
	display: none;
	}

	body {

	}

	img {
	margin: 40px auto;
	width: 350px;
	height: 350px;
	border-radius: 50%;
	border: 1px solid black;
	}

	#container {
	margin-top: 120px;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	}

	.pickagain {
	display: block;
	margin: 20px auto;
	}
	</style>
	</head>
	<body>
	<div id="container">
	<h1>Adopt A Pet</h1>

	<p>Get a pet based on the answers to the following questions:</p>

	<form>
	<div id="texture-choice">
	<h3>Would you like a pet that was...</h3>
	<input type="radio" name="texture" id="fuzzy" value="fuzzy"/>
	<label for="fuzzy">Fuzzy</label><br>

	<input type="radio" name="texture" id="scaly" value="scaly" />
	<label for="scaly">Scaly</label><br>
	<button id="petTexture">Next</button>
	</div>

	<div id="size-choice">
	<h3>Would you rather your pet... </h3>
	<input type="radio" name="size" id="small" value="small" />
	<label for="small">Cute and small.</label><br>

	<input type="radio" name="size" id="big" value="big" />
	<label for="big">Huge and something you might need to have papers for.</label><br>
	<button id="petSize">Next</button>
	</div>

	<div id="training-choice">
	<h3>Should your pet...</h3>
	<input type="radio" name="train" id="trainee" value="trainee" />
	<label for="trainee">Be trained.</label><br>

	<input type="radio" name="train" id="trainer" value="trainer" />
	<label for="trainer">Train you.</label><br>

	<input id="submit" type="submit" value="Submit">
	</div>
	</form>

	<div id="result"></div>
	</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

	<script>
	$(document).ready(function() {
	var pet = [],
	textureButton = $('#texture-choice button#petTexture'),
	sizeButton = $('#size-choice button#petSize'),
	submitButton = $('#training-choice #submit');

	function chooseTexture(e) {
	e.preventDefault();
	if ($('#texture-choice input:radio:checked').length < 1) {
	alert('You must select a fuzzy of scaly animal before moving on.');
	}

	if ($('input[name=texture]:checked').val() === "fuzzy") {
	pet.push('a');
	} else {
	pet.push('b');
	}

	$('#texture-choice').css('display', 'none');
	$('#size-choice').show(400);
	}

	function chooseSize(e) {
	e.preventDefault();
	if ($('#size-choice input:radio:checked').length < 1) {
	alert('You must select small or tiny before moving on.');
	}

	if ($('input[name=size]:checked').val() === "small") {
	pet.push('a');
	} else {
	pet.push('b');
	}

	$('div#size-choice').css('display', 'none');
	$('div#training-choice').show(400);
	}

	function generatePet(pet) {
	switch (pet) {
	case 'aaa':
	alert('puppy');
	$('#result').append($('<img src="pet_images/dog.png">'));
	// $('#result').append($('img'));
	// $('#result').load('pet_images/dog.png', function(data) {
	// $('<img>', {
	// id: "puppy-img",
	// src: "pet_images/dog.png"
	// });
	break;
	case 'aba':
	alert('horse');
	$('#result').append($('<img src="pet_images/horse.png">'));
	//$('#result').load("<img src=" + "pet_images/horse.png" + ">");
	break;
	case 'aab':
	alert('kitten');
	$('#result').append($('<img src="pet_images/kitten.png">'));
	// $('#result').load("<img src=" + "pet_images/kitten.png" + ">");
	break;
	case 'baa':
	alert('hedgehog');
	$('#result').append($('<img src="pet_images/hedgehog.png">'));
	// $('#result').load('pet_images/hedgehog.png');
	break;
	case 'abb':
	alert('silverback gorilla ');
	$('#result').append($('<img src="pet_images/gorilla.png">'));
	// $('#result').load('pet_images/gorilla.png');
	break;
	case 'bbb':
	alert('snake');
	$('#result').append($('<img src="pet_images/snake.png">'));
	// $('#result').load('pet_images/snake.png');
	break;
	case 'bab':
	alert('gecko');
	$('#result').append($('<img src="pet_images/gecko.png">'));
	// $('#result').load('pet_images/gecko.png');
	break;
	case 'bba': // ['b','b','a']:
	alert('Littlefoot from The Land Before Times');
	$('#result').append($('<img src="pet_images/littlefoot.png">'));
	// $('#result').load('pet_images/littlefoot.png');
	break;
	default:
	alert('you gets nada');
	// $('#result').load('');
	break;
	}
	}

	function chooseTraining(e) {
	e.preventDefault();
	if ($('#training-choice input:radio:checked').length < 1) {
	alert('You must select small or tiny before moving on.');
	}

	if ($('input[name=train]:checked').val() === 'trainee') {
	pet.push('a');
	} else {
	pet.push('b');
	}

	pet = pet.join('');
	generatePet(pet);

	$('#submit').hide();
	// $('<button>', {id: 'reset'}).prepend('#result');
	var $resetButton = $("<button>", {id: 'start-over', class: 'pickagain'}).html('Reset');

	$resetButton.click(function(e) {
	e.preventDefault();
	$('form')[0].reset();
	$('#result').html('');
	$('#texture-choice').show();
	$('#submit').show();
	$('#training-choice').hide();
	pet = [];
	});

	$("#result").prepend($resetButton);
	}

	textureButton.on('click', chooseTexture);
	sizeButton.on('click', chooseSize);
	submitButton.on('click', chooseTraining);

	});
	</script>

	</body>
	</html>