Type The TOS

index.html

<div class="tos-wrapper">
  <h1 class="title">TOS</h1>
  <div id="count"></div>
  <div id="tos"></div>
</div>

script.js

const tos = "TO THE MAXIMUM EXTENT PERMITTED BY APPLICABLE LAW, THE STATED ENTITIES SHALL NOT BE LIABLE FOR ANY INDIRECT, INCIDENTAL, SPECIAL, CONSEQUENTIAL OR PUNITIVE DAMAGES, OR ANY LOSS OF PROFITS OR REVENUES, WHETHER INCURRED DIRECTLY OR INDIRECTLY, OR ANY LOSS OF DATA, USE, GOODWILL, OR OTHER INTANGIBLE LOSSES, RESULTING FROM (i) YOUR ACCESS TO OR USE OF OR INABILITY TO ACCESS OR USE THE SERVICES;"

let index = 0;

updateProgress();

window.onkeypress = function(e) {
  let letter = e.key;
  
  if (tos.charAt(index).toLowerCase() === letter.toLowerCase()) {
    index++;
  }
  
  updateProgress();
};

function updateProgress() {
  let tosElem = document.getElementById("tos");
  let count = document.getElementById("count");
  
  tosElem.innerHTML = `<span id='tos-green'>${tos.substring(0, index)}</span><span id='tos-next'>${tos.charAt(index)}</span>${tos.substring(index + 1, tos.length)}`;
  
  count.innerText = `Section A: ${tos.substring(0, index).split(" ").length}/${tos.split(" ").length} words entered`
}

style.css

html,body {
  height: 100%;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
}

body {
  font-family: sans-serif;
  background: #f5f6fa;
}

#tos {
  font-size: 23px;
  line-height: 1.15em;
  margin-top: 20px;
  color: #cccccc;
}

.title {
  color: #00a887;
  font-size: 50px;
  margin: 5px 0px 25px 0px;
  text-align: center;
  text-decoration: underline;
}

.tos-wrapper {
  margin-left: auto;
  margin-right: auto;
  max-width: 500px;
  padding: 40px 40px;
  border-radius: 5px;
  box-shadow: 4px 4px 10px 8px rgba(0, 184, 148,.2);
  background: white;
  margin-top: 50px;
}

#count {
  text-transform: uppercase;
  text-align: center;
  font-size: 18px;
  font-style: italic;
  color: #636e72;
}

#tos-green {
  color: #00a887;
}

#tos-next {
  color: #333333;
  background: #ebebeb;
}

type-the-tos.markdown

Type The TOS

A Pen by Neal Agarwal on CodePen.

License.