Rnadom Quotes Typing JavaScript Program

We will create a quote typing practice JavaScript program in which the program keeps displaying random quotes fetched from the random quotes API and the user has to type for his practice, and the program also shows the typing status.

STEPS

Create a root folder with 3 files index.html, style.css, and script.js or you can use internal CSS and JavaScript.
Paste it into index.html (HTML)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Quotes Typing Program</title>

    <link rel="stylesheet" href="style.css">

    <script src="script.js" defer></script>
</head>

<body>
    <div class="timer" id="timer">0</div>
    <div class="container">
        <div id="quoteDisplay" class="quote-display"></div>
        <textarea id="quoteInput" class="quote-input" placeholder="Start Typing..." autofocus></textarea>
        <div class="button-parent">
            <button onclick="renderNewQuote()" id="startButton" class="start-button">Start</button>

            <p id="oneMinStats">Start</p>
        </div>
    </div>
</body>

</html>

Paste it into style.css (CSS)

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  background-color: #1c1c1c;
}

body,
quote-input {
  font-family: Arial, Helvetica, sans-serif;
}

.container {
  background-color: rgb(255, 136, 0);
  padding: 1rem;
  border-radius: 0.5rem;
  width: 700px;
  max-width: 90%;
}

.timer {
  position: absolute;
  top: 2rem;
  font-size: 4rem;
  color: rgb(255, 136, 0);
  font-weight: bold;
}

.quote-display {
  margin-bottom: 1rem;
  margin-right: calc(1rem + 2px);
  margin-left: calc(1rem + 2px);
  font-weight: bold;
  color: rgb(65, 65, 65);
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -o-user-select: none;
  user-select: none;
}

.quote-input {
  background-color: transparent;
  border: 2px solid #1c1c1c;
  outline: none;
  width: 100%;
  height: 8rem;
  margin: auto;
  resize: none;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
}

.quote-input:focus {
  border-color: black;
}

.correct {
  color: black;
  opacity: 1;
}

.incorrect {
  color: red;
  text-decoration: underline;
}

.button-parent {
  width: 100%;
  text-align: center;
}

.start-button {
  padding: 0.5rem 2rem;
  background-color: red;
  color: white;
}

.start-button:active {
  background-color: green;
}

#oneMinStats {
  margin-top: 1rem;
}

Paste it into script.js (JavaScript)

const RANDOM_QUOTE_API_URL = "https://api.quotable.io/random";
const quoteDisplayElement = document.getElementById("quoteDisplay");
const quoteInputElement = document.getElementById("quoteInput");
const timerElement = document.getElementById("timer");
const startButtonElement = document.getElementById("startButton");
const oneMinStatsElement = document.getElementById("oneMinStats");

quoteInputElement.addEventListener("input", () => {
  const arrayQuote = quoteDisplayElement.querySelectorAll("span");
  const arrayValue = quoteInputElement.value.split("");

  let correct = true;

  arrayQuote.forEach((characterSpan, index) => {
    const character = arrayValue[index];

    if (character == null) {
      characterSpan.classList.remove("correct");
      characterSpan.classList.remove("incorrect");
      correct = false;
    } else if (character === characterSpan.innerText) {
      characterSpan.classList.add("correct");
      characterSpan.classList.remove("incorrect");
    } else {
      characterSpan.classList.remove("correct");
      characterSpan.classList.add("incorrect");
      correct = false;
    }
  });

  if (correct) renderNewQuote();

  const oneMinArrayValue = arrayValue.length;
  const oneMinQuoteDisplayElement = quoteDisplayElement.innerText.length;

  if (oneMinArrayValue === oneMinQuoteDisplayElement) {
    oneMinStatsElement.innerText =
      "Congratulations! You typed that entire quote.";
  } else {
    oneMinStatsElement.innerText = "Proccessing";
  }
});

function getRandomQuoate() {
  return fetch(RANDOM_QUOTE_API_URL)
    .then((response) => response.json())
    .then((data) => data.content);
}

async function renderNewQuote() {
  const quote = await getRandomQuoate();
  quoteDisplayElement.innerHTML = "";
  quote.split("").forEach((character) => {
    const characterSpan = document.createElement("span");
    characterSpan.innerText = character;
    quoteDisplayElement.appendChild(characterSpan);
  });
  quoteInputElement.value = null;

  startTimer();

  startButtonElement.innerText = "Start Over";
}

let startTime;
function startTimer() {
  timerElement.innerText = 0;
  startTime = new Date();
  setInterval(() => {
    timer.innerText = getTimerTime();
  }, 1000);
}

function getTimerTime() {
  return Math.floor((new Date() - startTime) / 1000);