index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="assets/css/style.css">

    <title>Rock Paper Scissors Lizard Spock</title>
</head>
<body>
    <header>
        <a href="index.html">
<h1>Rock Paper Scissors Lizard Spock Game</h1>
        </a>
    </header>
    <section>
    </section>
     <nav>
        <ul id="page-nav">
            <li>
<a href="#rules">How to Play</a>
            </li>

            <li>
<a href="#game">Let's Play!</a>
            </li>
        </ul>
     </nav>
    <section id="rules">
        <h2>How to play.</h2>
        <p>Each player must choose by clicking one of the following gestures: Rock, Paper, Scissors, Lizard, Spock. After each player plays
        their gesture, the winner is determined by who's gesture beats the other. If you both happen to choose the same gesture
        then it is a draw. Below is a helpful graph to show you which match ups win. Good luck!!!
        </p>
        <table>
            <tr class = 'bold-upper'>
<th class='border-remove'></th>
<th>rock</th>
<th>paper</th>
<th>scissors</th>
<th>lizard</th>
<th>spock</th>
            </tr>

            <tr>
<td class = 'bold-upper border-remove'>win</td>
<td>lizard</td>
<td>rock</td>
<td>paper</td>
<td>paper</td>
<td>rock</td>
            </tr>

            <tr class='border-remove'>
<td class = 'bold-upper'>against</td>
<td>scissors</td>
<td>spock</td>
<td>lizard</td>
<td>spock</td>
<td>scissors</td>
            </tr>
    
        </table>
    </section>

<section id="scores">
    <h2 class="player">Player:<span id="player-score">0</span><h2>
    <h2 class="computer">Computer:<span id="comp-score">0</span></h2>
    <br>


</section>
<section>
                <div class="inline">
                    <h2>
                        <span id="player-choice">
                        </span>
                    </h2>
                    <h2>vs</h2>
                    <h2 id="color"><span id="comp-choice">
                        </span>
                    </h2>
                </div>
                <br>
                <h2><span id="result">affaf</span></h2>
</section>
<section id="game" class="controls">
    <button data-type="0" id="rock">
        ROCK
    </button>
    
    <button data-type="1">
        PAPER
    </button>
    
    <button data-type="2">
        SCISSORS
    </button>
    
    <button data-type="3">
        LIZARD
    </button>
    
    <button data-type="4">
        SPOCK
    </button>
</section>
    

    <footer>

    </footer>
    
    <script src="app.js" charset="UTF-8"></script>
</body>
</html>