stomatocode/app.js

## app.js
$(document).ready(function() {
  $(document).on('keyup', function(event) {
    if(event.which === 81) {
     advance_player('#player1_strip .active');
    }
    else if (event.which === 80) {
    advance_player('#player2_strip .active');
    }
    else {
    console.log("Start Your Engines! VROOM!");
    }
  });
    if ($('#player1_strip td:last').hasClass('end active')) {
      $(".Player1").show();
    }

    if ($('#player2_strip .active') == $('#player2_strip .end')) {
      $(".Player2").show();
    }
    // else {
    //   $(".Player1").hide();
    //   $(".Player2").hide();
    // }
});

  // $('#q')advance_player('#player1_strip .active');
  // Detect which key was pressed and call the appropriate function
  // Google "jquery keyup what key was pressed" if you don't know how
  // });


// movePlayerOneForward(){$('#player1_strip .active').removeClass('active').next().addClass('active')}
// var $bob = $('#player1_strip .active')


var advance_player = function (player) {
   // var player = ("#" + "player")

   $(player).removeClass('active').next().addClass('active');

 };


// function area(w1, w2, h){
//   var area=(w1+w2)*h/2
//   alert(area+" sq ft")
// }

// def area(x,y,z)
//   area = "hello"
//   puts area
//   puts x
//   puts y
//   puts z

// end

## gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
  <!--
    normalize.css removes cross-browser differences in defaults, e.g.,
    differences in how form elements appear between Firefox and IE
    See: http://necolas.github.com/normalize.css/
  -->
<link rel="stylesheet" href="normalize.css">

  <!-- Put your challenge-specific CSS in here -->
  <link rel="stylesheet" href="main.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="app.js"></script>


<title>Java Racist</title>
</head>
<body>
<table class="racer_table">
  <tr id="player1_strip">
    <td class="active"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="end"></td>
  </tr>
  <tr id="player2_strip">
    <td class="active"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="end"></td>
  </tr>
</table>
 <div class="Player1"><p>Player 1 wins!</p></div>
 <div class="Player2"><p>Player 2 wins!</p></div>

</body>

## main.css
.racer_table td {
  background-color: #FF3444;
  height: 20px;
  width: 20px;
  border: solid 1px black;
}

.racer_table td.active {
  background-color: black;
}

.Player1 {
  display: none;
}

.Player2 {
  display: none;
}
	$(document).ready(function() {
	$(document).on('keyup', function(event) {
	if(event.which === 81) {
	advance_player('#player1_strip .active');
	}
	else if (event.which === 80) {
	advance_player('#player2_strip .active');
	}
	else {
	console.log("Start Your Engines! VROOM!");
	}
	});
	if ($('#player1_strip td:last').hasClass('end active')) {
	$(".Player1").show();
	}

	if ($('#player2_strip .active') == $('#player2_strip .end')) {
	$(".Player2").show();
	}
	// else {
	// $(".Player1").hide();
	// $(".Player2").hide();
	// }
	});

	// $('#q')advance_player('#player1_strip .active');
	// Detect which key was pressed and call the appropriate function
	// Google "jquery keyup what key was pressed" if you don't know how
	// });



	// movePlayerOneForward(){$('#player1_strip .active').removeClass('active').next().addClass('active')}
	// var $bob = $('#player1_strip .active')


	var advance_player = function (player) {
	// var player = ("#" + "player")

	$(player).removeClass('active').next().addClass('active');

	};




	// function area(w1, w2, h){
	// var area=(w1+w2)*h/2
	// alert(area+" sq ft")
	// }

	// def area(x,y,z)
	// area = "hello"
	// puts area
	// puts x
	// puts y
	// puts z

	// end
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<!--
	normalize.css removes cross-browser differences in defaults, e.g.,
	differences in how form elements appear between Firefox and IE
	See: http://necolas.github.com/normalize.css/
	-->
	<link rel="stylesheet" href="normalize.css">

	<!-- Put your challenge-specific CSS in here -->
	<link rel="stylesheet" href="main.css">
	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
	<script src="app.js"></script>


	<title>Java Racist</title>
	</head>
	<body>
	<table class="racer_table">
	<tr id="player1_strip">
	<td class="active"></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td class="end"></td>
	</tr>
	<tr id="player2_strip">
	<td class="active"></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td class="end"></td>
	</tr>
	</table>
	<div class="Player1"><p>Player 1 wins!</p></div>
	<div class="Player2"><p>Player 2 wins!</p></div>

	</body>
	.racer_table td {
	background-color: #FF3444;
	height: 20px;
	width: 20px;
	border: solid 1px black;
	}

	.racer_table td.active {
	background-color: black;
	}

	.Player1 {
	display: none;
	}

	.Player2 {
	display: none;
	}