Do you need a Typing Speed Test Game Using HTML, CSS, and JavaScript Html code? You are in the right place!

Typing Speed Test Game Using HTML, CSS, and JavaScript (Free Source Code)

Byjvcodes

Do you need a Typing Speed Test Game Using HTML, CSS, and JavaScript Html code? You are in the right place!

I am going to give you the free source code that will be well formatted and which will actually follow the good coding standard. It makes users type and make mistakes, record them, and track WPM – this is the main goal of this game.

GitHub Source: Typing Speed Test Game

Features

  • Real-time Typing Accuracy: The game keeps track of the mistakes that have been made and signals an incorrect character immediately.
  • Live Timer Countdown: Typing is initiated when a countdown of 60 seconds begins and elapses when typing stops.
  • Dynamic Text Generation: This means that the game selects a random paragraph to make each time you play a different typing experience.
  • Restart Option: In its design, a “Start Again” button allows the users to restart the game without having to reload the page.

Technologies Used

  • HTML (Hypertext Markup Language)
  • CSS (Cascading Style Sheets)
  • JS (JavaScript)

Recommended for You

Video Tutorial

Video thumbnail Watch on YouTube

Steps to Build Typing Speed Test Game

This Typing Speed Test Game is easy to implement in any of your project. Just copy the HTML, CSS, and JavaScript files given and then replace them with the project’s corresponding files. HTML creates the layout for the game; CSS provides aesthetic appeal to the interface of the game and JavaScript controls gameplay, text generation, timing and input recognition.

HTML

Here is the HTML code for your index.html file:

<!DOCTYPE html>
<!-- Coding By JV Codes - youtube.com/@jvcodes -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">  
    <title>Typing Speed Test Game | JV Codes</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div class="wrapper">
      <input type="text" class="input-field">
      <div class="content-box">
        <div class="typing-text">
          <p></p>
        </div>
        <div class="content">
          <ul class="result-details">
            <li class="time">
              <p>Time Left:</p>
              <span><b>60</b>s</span>
            </li>
            <li class="mistake">
              <p>Mistakes:</p>
              <span>0</span>
            </li>
            <li class="wpm">
              <p>WPM:</p>
              <span>0</span>
            </li>
            <li class="cpm">
              <p>CPM:</p>
              <span>0</span>
            </li>
          </ul>
          <button>Start Again</button>
        </div>
      </div>
    </div>
    <script src="paragraphs.js"></script>
    <script src="script.js"></script>
</body>
</html>

CSS

Here is the complete code for style.css file to style the Typing Speed Test Game:

/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  padding: 0 10px;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #b43301;
}
::selection{
  color: #fff;
  background: #b43301;
}

.wrapper{
    width: 770px;
    padding: 35px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 15px rgba(0,0,0,0.05);
  }
  .wrapper .input-field{
    opacity: 0;
    z-index: -999;
    position: absolute;
  }
  .wrapper .content-box{
    padding: 13px 20px 0;
    border-radius: 10px;
    border: 1px solid #bfbfbf;
  }

.content-box .typing-text{
  overflow: hidden;
  max-height: 256px;
}
.typing-text::-webkit-scrollbar{
  width: 0;
}
.typing-text p{
  font-size: 21px;
  text-align: justify;
  letter-spacing: 1px;
  word-break: break-all;
}

.typing-text p span{
    position: relative;
  }
  .typing-text p span.correct{
    color: #0d8000;
  }
  .typing-text p span.incorrect{
    color: #b1070d;
    outline: 1px solid #fff;
    background: #ff8a9d;
    border-radius: 4px;
  }

.typing-text p span.active{
  color: #b43301;
}

.typing-text p span.active::before{
    position: absolute;
    content: "";
    height: 2px;
    width: 100%;
    bottom: 0;
    left: 0;
    opacity: 0;
    border-radius: 5px;
    background: #b43301;
    animation: blink 1s ease-in-out infinite;
  }

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

.content-box .content{
    margin-top: 17px;
    display: flex;
    padding: 12px 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #bfbfbf;
  }

.content button{
  outline: none;
  border: none;
  width: 105px;
  color: #fff;
  padding: 8px 0;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  background: #b43301;
  transition: transform 0.3s ease;
}

.content button:active{
    transform: scale(0.97);
  }
  .content .result-details{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: calc(100% - 140px);
    justify-content: space-between;
  }
  .result-details li{
    display: flex;
    height: 20px;
    list-style: none;
    position: relative;
    align-items: center;
  }
  .result-details li:not(:first-child){
    padding-left: 22px;
    border-left: 1px solid #bfbfbf;
  }
  .result-details li p{
    font-size: 19px;
  }
  .result-details li span{
    display: block;
    font-size: 20px;
    margin-left: 10px;
  }

li span b{
  font-weight: 500;
}
li:not(:first-child) span{
  font-weight: 500;
}

@media (max-width: 745px) {
    .wrapper{
      padding: 20px;
    }
    .content-box .content{
      padding: 20px 0;
    }
    .content-box .typing-text{
      max-height: 100%;
    }
    .typing-text p{
      font-size: 19px;
      text-align: left;
    }
    .content button{
      width: 100%;
      font-size: 15px;
      padding: 10px 0;
      margin-top: 20px;
    }
    .content .result-details{
      width: 100%;
    }
    .result-details li:not(:first-child){
      border-left: 0;
      padding: 0;
    }
    .result-details li p, 
    .result-details li span{
      font-size: 17px;
    }
  }

@media (max-width: 518px) {
  .wrapper .content-box{
    padding: 10px 15px 0;
  }
  .typing-text p{
    font-size: 18px;
  }
  .result-details li{
    margin-bottom: 10px;
  }
  .content button{
    margin-top: 10px;
  }
}

JavaScript

Here is the complete code for script.js file to function the game:

const typingText = document.querySelector(".typing-text p"),
inpField = document.querySelector(".wrapper .input-field"),
tryAgainBtn = document.querySelector(".content button"),
timeTag = document.querySelector(".time span b"),
mistakeTag = document.querySelector(".mistake span"),
wpmTag = document.querySelector(".wpm span"),
cpmTag = document.querySelector(".cpm span");

let timer,
maxTime = 60,
timeLeft = maxTime,
charIndex = mistakes = isTyping = 0;

function loadParagraph() {
    const ranIndex = Math.floor(Math.random() * paragraphs.length);
    typingText.innerHTML = "";
    paragraphs[ranIndex].split("").forEach(char => {
        let span = `<span>${char}</span>`
        typingText.innerHTML += span;
    });
    typingText.querySelectorAll("span")[0].classList.add("active");
    document.addEventListener("keydown", () => inpField.focus());
    typingText.addEventListener("click", () => inpField.focus());
}

function initTyping() {
    let characters = typingText.querySelectorAll("span");
    let typedChar = inpField.value.split("")[charIndex];
    if(charIndex < characters.length - 1 && timeLeft > 0) {
        if(!isTyping) {
            timer = setInterval(initTimer, 1000);
            isTyping = true;
        }
        if(typedChar == null) {
            if(charIndex > 0) {
                charIndex--;
                if(characters[charIndex].classList.contains("incorrect")) {
                    mistakes--;
                }
                characters[charIndex].classList.remove("correct", "incorrect");
            }
        } else {
            if(characters[charIndex].innerText == typedChar) {
                characters[charIndex].classList.add("correct");
            } else {
                mistakes++;
                characters[charIndex].classList.add("incorrect");
            }
            charIndex++;
        }
        characters.forEach(span => span.classList.remove("active"));
        characters[charIndex].classList.add("active");

        let wpm = Math.round(((charIndex - mistakes)  / 5) / (maxTime - timeLeft) * 60);
        wpm = wpm < 0 || !wpm || wpm === Infinity ? 0 : wpm;
        
        wpmTag.innerText = wpm;
        mistakeTag.innerText = mistakes;
        cpmTag.innerText = charIndex - mistakes;
    } else {
        clearInterval(timer);
        inpField.value = "";
    }   
}

function initTimer() {
    if(timeLeft > 0) {
        timeLeft--;
        timeTag.innerText = timeLeft;
        let wpm = Math.round(((charIndex - mistakes)  / 5) / (maxTime - timeLeft) * 60);
        wpmTag.innerText = wpm;
    } else {
        clearInterval(timer);
    }
}

function resetGame() {
    loadParagraph();
    clearInterval(timer);
    timeLeft = maxTime;
    charIndex = mistakes = isTyping = 0;
    inpField.value = "";
    timeTag.innerText = timeLeft;
    wpmTag.innerText = 0;
    mistakeTag.innerText = 0;
    cpmTag.innerText = 0;
}

loadParagraph();
inpField.addEventListener("input", initTyping);
tryAgainBtn.addEventListener("click", resetGame);

Download Source Code

There is no copyright associated with this source code; you can download it and use it freely. All files are unique and ready for your use, simply click on the button provided below to download them and apply to your website.

Download Source Code

Conclusion

This is a free Typing Speed Test Game, the use of this game will enable the users to type faster than before.

You may have to put JV Source Codes wherever you found this helpful in order to support the developer. Finally, do not miss the chance to subscribe to the channel if you want more coding tips! If you are having any problems, please leave a comment; I’ll be glad to assist you!

Download JV Source Codes

Similar Posts

Responsive Sidebar Menu with Social Media Buttons
| | |

Responsive Sidebar Menu with Social Media Buttons Using HTML and CSS

Having an active sidebar menu using social media icon will help in enhancing the navigation of the sections in a website while having buttons to social media accounts. Here in this article, I will help you how you can create a responsive sidebar menu with proper icons and nice animation. For your convenience, you will…

Responsive Periodic Table of Elements Using HTML and CSS (Free Source Code)
| |

Responsive Periodic Table of Elements Using HTML and CSS (Free Source Code)

A Responsive Periodic Table of Elements Using HTML and CSS allows the elegant and engaging display of the periodic table on your site. No matter if you are creating an educational site, a scientific website or if you just found an interesting idea for a project, this free source code can offer you a clean…

Breakout Game Using HTML, CSS, and JavaScript (Free Source Code)
| | |

Breakout Game Using HTML, CSS, and JavaScript (Free Source Code)

Breakout game is a great plain arcade-styled game when the player uses a paddle to bounce the ball and destroy the bricks. This game demands high speed and concentration; therefore, it is an interesting project for learners in web development. Let me share with you high-quality and easy-to-modify source code for the Breakout Game, which…

Leave a Reply

Your email address will not be published. Required fields are marked *