html, body, #container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

#wrapper{

  width: 100vw;

  height:100vh;

  display: grid;

  grid-template-rows: 2fr 1fr;

}

#display{

  width: 100%;

  height: 100%;

  display: grid;

  text-align: center;

  place-items: center;

}

#displayInputField{

  width: 50%;

  height: 50%;

  min-width: 200px;

  min-height: 100px;

  text-align: center;

  font-size: 22px;

  resize: none;

  border-radius: 10px;

}

#resultText, #restartTest{

  display: none;

  font-family: "courier new";

}

// create a symbol counter

var numberOfSymbolsEntered = 0;

​

// create a typing speed test

var speedTypingTest = function(gauge){

  // get dom elements

  var inputFieldElement = document.getElementById("displayInputField");

  inputFieldElement.focus();

  var restartButton = document.getElementById("restartTest");

  var scoreHeader = document.getElementById("resultText");

  // instantiate app variables

  var symbolsPerSecond = 0;

  var iterationCounter = 0;

  var isCounterOn = false;

  // calculate symbols per second rate

  var getSymbolsPerSecond = function(){

    if(isCounterOn){

      symbolsPerSecond = (numberOfSymbolsEntered/(iterationCounter / 10)).toFixed(2);

      gauge.data().set(0,"value", symbolsPerSecond);

    } 

  }

​

  // instantiate a timeout id

  var timeoutID;

  // create a timer counter function

  var startTimerCounter = function(){

    iterationCounter++;

    timeoutID = setTimeout(startTimerCounter, 100);

    if(!isCounterOn){

      clearTimeout(timeoutID);

    }

  }

  // start a new session of the typing speed test

  var startSpeedTypingTest = function(){

​

    // turn on the timer

    if(!isCounterOn){

      isCounterOn = true;

      startTimerCounter();

    }

​

    // turn off the timer, hide input field, and show results

    if(numberOfSymbolsEntered >= 125){

​

      // switch the counter boolean

      isCounterOn = false;

​

      // show a reset button and set it in focus

      restartButton.style.display = "block";

      restartButton.focus();

​

      // show a deadline text and add a final value

      scoreHeader.style.display = "inline-block";

      scoreHeader.textContent = `You are typing ${symbolsPerSecond} symbols per second`;

​

      // hide the text area dom element and disable its functionality

      inputFieldElement.style.display = "none";

      inputFieldElement.removeEventListener("input", startSpeedTypingTest);

​

    }

​

    // update the counter of entered symbols and calculate the rate per second

    numberOfSymbolsEntered++;

    getSymbolsPerSecond();

​

  }

  // start the typing speed test by typing in the text field

  inputFieldElement.addEventListener("input", startSpeedTypingTest)

​

  // restart the test by clicking the button

  restartButton.addEventListener("click", function(){

​

    // reset the variables to the initial values

    iterationCounter = 0;

    symbolsPerSecond = 0;

    numberOfSymbolsEntered = 0;

​

    // reset the apperance and values of the dom elements

    inputFieldElement.value = "";

    restartButton.style.display = "none";

    scoreHeader.style.display = "none";

    inputFieldElement.style.display = "block";

​

    // set the input in focus and add functionality

    inputFieldElement.focus();

    inputFieldElement.addEventListener("input", startSpeedTypingTest)

​

    // reset the gauge's marker to the initial value

    gauge.data().set(0,"value", 0);

​

  })

}

​

anychart.onDocumentReady(function () {

  // create a linear gauge

  var gauge = anychart.gauges.linear();

  // set the horizontal layout

  gauge.layout("horizontal");

  // add data

  gauge.data([numberOfSymbolsEntered]);

  // configure the scale

  var scale = gauge.scale();

  scale.minimum(-2);

  scale.maximum(30);

  scale.ticks().interval(2);

  // configure the axis

  var axis = gauge.axis(0);

  axis.offset("5%");

  axis.orientation("bottom");

  // configure the scale bar

  var scaleBar = gauge.scaleBar(0);

  scaleBar.width("5%");

  // create a color scale

  var scaleBarColorScale = anychart.scales.ordinalColor().ranges([

    {from: -2, to: 0, color: ["grey 0.9"]},

    {from: 0, to: 10, color: ["green 0.9"]},

    {from: 10, to: 20, color: ["yellow 0.9"]},

    {from: 20, to: 27, color: ["red 0.9"]},

    {from: 27, to: 30, color: ["darkRed 0.9"]}

  ]);

​

  // apply the color scale

  scaleBar.colorScale(scaleBarColorScale);

  // remove the background color

  gauge.background("transparent");

  // configure the marker pointer

  var pointer = gauge.marker(0);

  pointer.color("black");

  pointer.zIndex(1);

  pointer.type("triangle-down");

  pointer.offset("-5%");

  // get labels

  var labels = pointer.labels();

  labels.enabled(true);

  labels.fontColor("#black");

  labels.offsetY("-10%");

  labels.useHtml(true);

  labels.format(function(){

    return `<b>${this.value}</b><br>symbols/sec`

  });

​

  // set the container id

  gauge.container("container");

​

  // initiate the drawing of the linear gauge

  gauge.draw();

  // initialize typing speed test

  speedTypingTest(gauge);

​

});