title: How to add a word per minute calculator to a website using Javascript, html, or css?
body: <p>Iv'e been trying to complete a typing test website for some time and am stuck on how to add a word per minute counter. I have tried multiple ways but none of them work. What I want it do do is give the words per minute after the user types a prompt correctly.
  Code is below:</p>
  <p>HTML:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;&gt;
      &lt;title&gt;repl.it&lt;/title&gt;
      &lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
  &lt;/head&gt;
  &lt;h1&gt;
     &lt;span id=&quot;word-1&quot;&gt;man&lt;/span&gt; &lt;span id=&quot;word-2&quot;&gt;become&lt;/span&gt; &lt;span id=&quot;word-3&quot;&gt;as&lt;/span&gt;
     &lt;span id=&quot;word-4&quot;&gt;and&lt;/span&gt; &lt;span id=&quot;word-5&quot;&gt;through&lt;/span&gt; &lt;span id=&quot;word-6&quot;&gt;find&lt;/span&gt; &lt;span id=&quot;word-7&quot;&gt;would&lt;/span&gt; &lt;span id=&quot;word-8&quot;&gt;here&lt;/span&gt; &lt;span id=&quot;word-9&quot;&gt;and&lt;/span&gt; &lt;span id=&quot;word-10&quot;&gt;before&lt;/span&gt;
  &lt;/h1&gt;
  
  &lt;input type=&quot;text&quot; id=&quot;boch&quot;&gt;
  
          &lt;/div&gt;
          &lt;div id=&quot;typing-area&quot;&gt;
  
        &lt;button id=&quot;bocho&quot; onclick=&quot;document.getElementById('boch').value = ''&quot;&gt;Enter&lt;/button&gt;
  
  &lt;/html&gt;
  &lt;script src=&quot;main.js&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>JavaScript:</p>
  <pre><code>var input = document.getElementById(&quot;boch&quot;);
  input.addEventListener(&quot;keyup&quot;, function (event) {
    if (event.keyCode === 13) {
      event.preventDefault();
      document.getElementById(&quot;bocho&quot;).click();
    }
  });
  
  
  var element = document.querySelector(&quot;#boch&quot;);
  
  element.onkeyup = function () {
    var value = element.value;
  
    if (value.includes(&quot;man&quot;)) {
      document.getElementById('word-1').style.backgroundColor = 'green';
    } else {
      document.getElementById('word-1').style.backgroundColor = 'transparent';
    }
  
    if (value.includes(&quot;man become&quot;)) {
      document.getElementById('word-2').style.backgroundColor = 'green';
    } else {
      document.getElementById('word-2').style.backgroundColor = 'transparent';
    }
  
    if (value.includes(&quot;man become as&quot;)) {
      document.getElementById('word-3').style.backgroundColor = 'green';
    } else {
      document.getElementById('word-3').style.backgroundColor = 'transparent';
    }
  
    if (value.includes(&quot;man become as and&quot;)) {
      document.getElementById('word-4').style.backgroundColor = 'green';
    } else {
      document.getElementById('word-4').style.backgroundColor = 'transparent';
    }
  
    if (value.includes(&quot;man become as and through&quot;)) {
      document.getElementById('word-5').style.backgroundColor = 'green';
    } else {
      document.getElementById('word-5').style.backgroundColor = 'transparent';
    }
  
    if (value.includes(&quot;man become as and through find&quot;)) {
      document.getElementById('word-6').style.backgroundColor = 'green';
    } else {
      document.getElementById('word-6').style.backgroundColor = 'transparent';
    }
  
    if (value.includes(&quot;man become as and through find would&quot;)) {
      document.getElementById('word-7').style.backgroundColor = 'green';
    } else {
      document.getElementById('word-7').style.backgroundColor = 'transparent';
    }
  
    if (value.includes(&quot;man become as and through find would here&quot;)) {
      document.getElementById('word-8').style.backgroundColor = 'green';
    } else {
      document.getElementById('word-8').style.backgroundColor = 'transparent';
    }
  
    if (value.includes(&quot;man become as and through find would here and&quot;)) {
      document.getElementById('word-9').style.backgroundColor = 'green';
    } else {
      document.getElementById('word-9').style.backgroundColor = 'transparent';
    }
  
    if (value.includes(&quot;man become as and through find would here and before&quot;)) {
      document.getElementById('word-10').style.backgroundColor = 'green';
    } else {
      document.getElementById('word-10').style.backgroundColor = 'transparent';
    }
  
   
  
  }
  let tagArr = document.getElementsByTagName(&quot;input&quot;);
  for (let i = 0; i &lt; tagArr.length; i++) {
    tagArr[i].autocomplete = 'off';
  }
  </code></pre>
  <p>Thank you for the help!</p>
  <p>Irfan</p>