index.html

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Darshin's Guessing Game</title>
    <link rel="stylesheet" href="main.css">
    <!-- the MAIN.CSS file is linked here -->
  </head>


  <body class='main'>
    <div id='app' class='center container overlay'>
      <div class='center'>
        <h1>My First Guessing Game!</h1>
        <span id='project-by'> --Project by Darshin Van Parijs--</span> 
      <h3 id='subtitle'><p>Guess a number between 1 and 100</p></h3>
      </div>

      <div id='guess-feedback' class='center'>
        <h6>  </h6>
      </div>

      <div id='hint-feedback' class='center'>
        <h6></h6>
      </div>

      <div>
        <div id='input-parent'>
          <input placeholder='enter guess here' class='center' id='player-input' maxlength='3' autofocus=autofocus></input>
          <button id='submit-text-btn'>Submit Guess</button>
          <button id='get-hint'>Hint</button>
          <button id='new-game'>New Game</button>
        </div>

        <div class='center'>
          <ul id='guess-list'>
            <li class='guess'>--</li>
            <li class='guess'>--</li>
            <li class='guess'>--</li>
            <li class='guess'>--</li>
            <!-- <li class='guess'>--</li> -->
          </ul>
        </div>
        </div>
      </div>
  
 
      </div>


      <script src='js/guessing-game.js'></script>
      <!-- uncomment the script tag above when you are ready to add JavaScript to your document -->
  </body>


</html>