How to traverse through text in a textbox?

I'm trying to make a typing speed test counter. The goal is to move the blinking cursor throughout the text only if the correct character is entered. I'm unable to understand how to move through the text. I shall then count the number of minutes taken and calculate wpm.

function timer() {
  var seconds = 3;
  var element = document.getElementById('timer');
  var timerId = setInterval(countdown, 1000);

  function countdown() {
    if (seconds == -1) {
      clearTimeout(timerId);
      element.innerHTML = "Time Up";
      var value = 1;
      wpm();
    } else {
      element.innerHTML = "Time Left: " + seconds + " " + "seconds";
      seconds--;
    }
  }
}

body {
  font-family: monospace;
}

.title-of-page>h1 {
  text-align: center;
  font-family: monospace;
}

.title-of-page {
  background-color: #414a4c;
  color: #ced3db;
}

.jumbotron {
  margin: 0;
}

.navigation-bar {
  background-color: #46494f;
}

a {
  color: green;
}

.nav>li>a:hover {
  background-color: #878f9b;
}

.navbar-nav>li {
  text-align: center;
  float: none;
  display: table-cell;
}

.navbar-nav {
  display: table;
  width: 100%;
  margin: 0;
}

.navbar {
  margin: 0;
  padding: 0;
  border-radius: 0;
}

.typing-field {
  width: 60em;
  height: 8em;
  background-color: #7e7e7f;
  opacity: 0.4;
  margin-left: 15em;
  margin-top: 5em;
  border: 3px solid black;
  padding: 0.8em;
}

#display-text {
  color: white;
  font-size: 2em;
}

.user-input {
  font-size: 1em;
  padding-left: 35em;
  padding-top: 2em;
}

#timer {
  padding-top: 4em;
  padding-left: 10em;
  font-size: 1.5em;
  color: red;
}

.typed-cursor {
  opacity: 1;
  -webkit-animation: blink 0.7s infinite;
  -moz-animation: blink 0.7s infinite;
  animation: blink 0.7s infinite;
  color: black;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<body>
  <div class="jumbotron title-of-page container-fluid">
    <h1>Typing Counter</h1>
  </div>
  <nav class="navbar navigation-bar container-fluid">
    <div class="">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Contest</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Leaderboard</a></li>
      </ul>
    </div>
  </nav>
  <div>
    <div id="timer">
      <button type="button" class="btn" onclick="timer();">Start</button>
    </div>
    <div class="typing-field">
      <p id="display-text"><span class="typed-cursor">T</span>his is to test your typing speed. So type like you'll never type again.</p>
    </div>
    <div class="user-input">
      <input type="text" name="user-input-text-box" id="user-input" />
    </div>
  </div>
</body>

For javascript I tried to do something like this. It's mostly wrong. I'm still a beginner.

window.onload = function wpm() {
  var text = document.getElementById('user-input').innerHTML;
  var i=0;
  document.getElementById('user-input').onkeyup = function() {
    var letter = this.value;
    if(letter==text[i])
    {
      letter.style.color="green";
      i++;
    }
  }
}

Solution

Here is what I ended up with after playing a little with your code:

var display = document.getElementById('display-text');
var userInput = document.getElementById('user-input');

userInput.onkeyup = function() {
  for (var i = 0; i < userInput.value.length; i++) { // Counts correct letters
    if (display.innerText[i] != userInput.value[i])
      break; // Exit loop if incorrect
  }
  display.innerHTML = '<span style="color: green;">' + display.innerText.substr(0, i) + '</span>' + '<span class="typed-cursor">' + display.innerText.substr(i, 1) + '</span>' + display.innerText.substr(i + 1);
}

body {
  font-family: monospace;
}

.typing-field {
  width: auto;
  /* Modified for snippet */
  height: auto;
  /* Modified for snippet */
  background-color: #7e7e7f;
  opacity: 0.4;
  margin-left: 0;
  /* Modified for snippet */
  margin-top: 0;
  /* Modified for snippet */
  border: 3px solid black;
  padding: 0.8em;
}

#display-text {
  color: white;
  font-size: 2em;
}

.user-input {
  font-size: 1em;
  padding-left: 0;
  /* Modified for snippet */
  padding-top: 0;
  /* Modified for snippet */
}

#timer {
  padding-left: 0;
  /* Modified for snippet */
  padding-top: 0;
  /* Modified for snippet */
  font-size: 1.5em;
  color: red;
}

.typed-cursor {
  opacity: 1;
  -webkit-animation: blink 0.7s infinite;
  -moz-animation: blink 0.7s infinite;
  animation: blink 0.7s infinite;
  color: black;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<body>
  <div>
    <div id="timer">
      <button type="button" class="btn" onclick="timer();">Start</button>
    </div>
    <div class="typing-field">
      <p id="display-text"><span class="typed-cursor">T</span>his is to test your typing speed. So type like you'll never type again.</p>
    </div>
    <div class="user-inputs">
      <input type="text" name="user-input-text-box" id="user-input" />
    </div>
  </div>
</body>

This code compares the displayed and the typed strings, highlights in green the correct letters and put the blinking cursor on the one to be typed.

I hope it helps. :)