xavi-/index.html

## index.html
<!DOCTYPE html>
<html>
    <head>
        <title>Rock Paper Scissors Checker</title>
    </head>
    <body>
    <h1>Step 1: Complete this logic chart</h1>
    <p> Hint: In the HTML look for #completeLogicOne and #completeLogicTwo to find where you can write the results.</p>


<table>
    <tr>
        <th></th>
        <th id="user-choice" colspan="4">User choice</th>
    </tr>
    <tr>
        <th id="computer-choice"  rowspan="4">Computer choice</th>
        <th></th>
        <th>Rock</th>
        <th>Paper</th>
        <th>Scissors</th>
    </tr>
    <tr>
        <th>Rock</th>
        <td>result: Tie </td>
        <td>result: You Win </td>
        <td>result: Computer Wins </td>

    </tr>
    <tr id="completeLogicOne">
        <th >Paper</th>
        <td>result: </td>
        <td>result: </td>
        <td>result: </td>
    </tr>


    <tr id="completeLogicTwo">
        <th>Scissors</th>
        <td>result: </td>
        <td>result:  </td>
        <td>result:  </td>
    </tr>

</table>


<h1>Step 2: Complete the Conditional Statement in the JavaScript according to the results of the logic chart above</h1>
        <p>
            Player1: <input id="player-1">
        </p>
        <p>
            Player2: <input id="player-2">
        </p>
        <p>
            <button>Who's the winner?</button>
        </p>
        <p id="winner">No one yet!</p>
    </body>
</html>

## popcode.json
{"enabledLibraries":["jquery"]}

## script.js
// This clicker handler checks the values of the inputs,
// determines the winnder (using if-statements), and shows
// the winner on the page.
$("button").click(function(){
    // get the value of player choices
    var player1 = $("#player-1").val();
    var player2 = $("#player-2").val();

    var winnerText = "not sure yet";

    // determine who won
    // to do: fill in the other possibilities
    if(player1 === "rock" && player2 === "rock") {
        winnerText = "It's a tie!";
    } /* else if (...) {
        Add conditionals for all the other possibilities
    } */

    // show the winner text on the page
    $("#winner").text(winnerText);
});

## styles.css
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}


#user-choice, #computer-choice {
    text-align: center;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Rock Paper Scissors Checker</title>
	</head>
	<body>
	<h1>Step 1: Complete this logic chart</h1>
	<p> Hint: In the HTML look for #completeLogicOne and #completeLogicTwo to find where you can write the results.</p>


	<table>
	<tr>
	<th></th>
	<th id="user-choice" colspan="4">User choice</th>
	</tr>
	<tr>
	<th id="computer-choice" rowspan="4">Computer choice</th>
	<th></th>
	<th>Rock</th>
	<th>Paper</th>
	<th>Scissors</th>
	</tr>
	<tr>
	<th>Rock</th>
	<td>result: Tie </td>
	<td>result: You Win </td>
	<td>result: Computer Wins </td>

	</tr>
	<tr id="completeLogicOne">
	<th >Paper</th>
	<td>result: </td>
	<td>result: </td>
	<td>result: </td>
	</tr>


	<tr id="completeLogicTwo">
	<th>Scissors</th>
	<td>result: </td>
	<td>result: </td>
	<td>result: </td>
	</tr>

	</table>


	<h1>Step 2: Complete the Conditional Statement in the JavaScript according to the results of the logic chart above</h1>
	<p>
	Player1: <input id="player-1">
	</p>
	<p>
	Player2: <input id="player-2">
	</p>
	<p>
	<button>Who's the winner?</button>
	</p>
	<p id="winner">No one yet!</p>
	</body>
	</html>
	// This clicker handler checks the values of the inputs,
	// determines the winnder (using if-statements), and shows
	// the winner on the page.
	$("button").click(function(){
	// get the value of player choices
	var player1 = $("#player-1").val();
	var player2 = $("#player-2").val();

	var winnerText = "not sure yet";

	// determine who won
	// to do: fill in the other possibilities
	if(player1 === "rock" && player2 === "rock") {
	winnerText = "It's a tie!";
	} /* else if (...) {
	Add conditionals for all the other possibilities
	} */

	// show the winner text on the page
	$("#winner").text(winnerText);
	});
	table {
	font-family: arial, sans-serif;
	border-collapse: collapse;
	width: 100%;
	}

	td, th {
	border: 1px solid #dddddd;
	text-align: left;
	padding: 8px;
	}


	#user-choice, #computer-choice {
	text-align: center;
	}