Newer
Older
express-blog-posts / html / word-guesser / index.html
<div class="form_container">
  <form id="gameForm" method="_POST">
    <div class="game-header">
      <h2>The Word Guessing Game</h2>
    </div>
    <div><p id="notifications"></p></div>
    <div class="formField word-display-field">
      <ul id="current_word"></ul>
    </div>
    <div class="formField">
      <p>Guess what the word is</p>
      <input
        type="text"
        name="guess_letter"
        id="guess_letter"
        size="1"
        maxlength="1"
        pattern="[a-zA-Z]"
        value=""
        required
        placeholder="?"
      />
    </div>
    <div>
      <p class="center-text">
        Please enter a single alphabetical character (A-Z) into the input
        box belowand and click &quot;Guess&quot; to see if the letter
        exists in the hidden word.</p>
      </p>
    </div>
    <div class="submitField">
      <input
        type="button"
        id="guess_button"
        name="guess_button"
        value="Guess"
      />
    </div>
    <div class="formField">
      <label>Attempts</label>
      <input type="number" step="1" id="guess_count" value="0" disabled />
    </div>
    <div class="formField">
      <label>Guesses</label>
      <ul id="guesses"></ul>
    </div>
  </form>
</div>
</main>