Simple Online Typing Test Created with HTML/CSS/JS/jQuery

fluxTyper is a simple typing test webpage that aims to calculate a user’s WPM (words per minute) based on their typing performance.

The aim of this project was to refresh my understanding and strengthen the basics of HTML/CSS/JavaScript.

typing speed test javascript source code, javascript typing test, typing test website template, typing speed test project, typing test

How to make use of it:

1. Code the HTML for the typing speed check app.

<div class="mainContent_Container">
  <div class="passage_Container"></div>
  <div class="passageInput_Container"><input class="passageInput" type="text"/></div>
  <div class="passageInput_hint">Type above to begin</div>
  <div class="passageInput_miss">&#10006;</div>
  <div class="stats_Container">
    <div class="stats">
      <div class="header">Statistics</div>
      <div class="baseContent">
        <h1><span id="stats_wordsPerMinute">0</span> wpm</h1>
        <div class="baseContent_allStats">
          <table>
            <tr>
              <td>Time Remaining</td>
              <td class='right'><span id="stats_timeRemaining">0s</span></td>
            </tr>
            <!---
              <tr>
                  <td>Words Remaining</td>
                  <td class='right'><span id="stats_wordsRemaining">0</span></td>
              </tr>
              -->
            <tr>
              <td>Correct Words</td>
              <td class='right'><span id="stats_correctWords">0</span></td>
            </tr>
            <tr>
              <td>Total Characters</td>
              <td class='right'><span id="stats_totalChars">0</span></td>
            </tr>
            <tr>
              <td>Character Accuracy</td>
              <td class='right'><span id="stats_charAcc">0%</span></td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
  <div class="endgame_Container">
    <div class="button" onclick="reload();">Start new test</div>
  </div>
</div>

2. Load the mandatory JavaScript and CSS information within the web page.

<link rel="stylesheet" href="stylesheet/styles.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="scripts/words.js"></script>
<script src="scripts/main.js"></script>

Typing Speed Test App In jQuery, fluxTyper Plugin/Github