Build a Speed Typing Word TypeRacer Game in HTML5 CSS3 and Javascript Full Project For Beginners

You are currently viewing Build a Speed Typing Word TypeRacer Game in HTML5 CSS3 and Javascript Full Project For Beginners


Welcome folks today in this blog post we will be building a speed typing  game in javascript. All the full source code of the application is shown below



Get Started



In order to get started you need to make an index.html file and copy paste the following code




<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>typing game</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="style.css" />
    <!--[if lt IE 7]>
      <p class="browsehappy">
        You are using an <strong>outdated</strong> browser. Please
        <a href="#">upgrade your browser</a> to improve your experience.
    <button id="setting-btn" class="setting-btn">
      <i class="fas fa-cog"></i>
    <div id="setting" class="setting">
      <form action="" id="setting-form">
        <div class="">
          <label for="difficulty">🛠️difficulty</label>
          <select name="" id="difficulty">
            <option value="easy">easy</option>
            <option value="medium">medium</option>
            <option value="hard">hard</option>

    <div class="container">
      <h2>✍️Speed typing</h2>
      <small>💻type the following word</small>
      <h1 id="word"></h1>
        placeholder="please type the word here"
      <p class="time-container">⏲️time left : <span id="time">10s</span></p>
      <p id="score-container" class="score-container">
        💥score: <span id="score">0</span>
      <div id="end-game-container" class="end-game-container"></div>
    <script src="script.js" async defer></script>



Now make an style.css file and copy paste the following code




@import url("");
* {
  box-sizing: border-box;
body {
  font-family: "IM Fell DW Pica SC", serif;
  background-color: #99a8b2;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  min-height: 100vh;
button {
  cursor: pointer;
  font-size: 14px;
  border-radius: 4px;
  padding: 5px 15px;
select {
  width: 200px;
  padding: 5px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 0;
  background-color: #e6d5b8;
button:focus {
  outline: none;
.setting-btn {
  position: absolute;
  bottom: 30px;
  left: 30px;
.setting {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: #e6d5b8;
  background-color: #1f6f8b;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(0);
  transition: transform 0.3s ease-in-out;
.setting.hide {
  transform: translateY(-100%);
.container {
  background-color: #e6d5b8;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.4);
  position: relative;
  text-align: center;
  width: 500px;
h2 {
  background-color: #99a8b2;
  padding: 8px;
  border-radius: 5px;
  margin: 0 0 40px;
h1 {
  margin: 0;
input {
  border: 0;
  border-radius: 5px;
  font-size: 14px;
  width: 300px;
  padding: 12px 20px;
  margin-top: 10px;
.score-container {
  position: absolute;
  top: 60px;
  right: 20px;
.time-container {
  position: absolute;
  top: 60px;
  left: 20px;
.end-game-container {
  background-color: inherit;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;



Now make an script.js file and copy paste the following code




const word = document.getElementById("word");
const text = document.getElementById("text");
const scoreEl = document.getElementById("score");
const timeEl = document.getElementById("time");
const endgameEl = document.getElementById("end-game-container");
const settingBtn = document.getElementById("setting-btn");
const settings = document.getElementById("setting");
const settingsForm = document.getElementById("setting-form");
const difficultySelect = document.getElementById("difficulty");

//list of words
const words = ["apple", "steer", "eight", "drags", "loving"];

//init word
let randomWord;
let score = 0;
let time = 10;
let difficulty =
  localStorage.getItem("difficulty") !== null
    ? localStorage.getItem("difficulty")
    : "medium";
//set diff select value
difficultySelect.value = difficulty;
//focus on text
//start count down
const timeInterval = setInterval(updateTime, 1000);
//generate random word
function getRandomWord() {
  return words[Math.floor(Math.random() * words.length)];
//add word to dom
function addWordToDOM() {
  randomWord = getRandomWord();
  word.innerHTML = randomWord;
//update score
function updateScore() {
  scoreEl.innerHTML = score;

//update time
function updateTime() {
  timeEl.innerHTML = time + "s";
  if (time === 0) {
//game over
function gameOver() {
  endgameEl.innerHTML = `
        <h1>Time ran out</h1>
        <p>Your final score is ${score}</p>
        <button onclick="location.reload()">Restart</button>
    `; = "flex";
text.addEventListener("input", (e) => {
  const insetedText =;
  if (insetedText === randomWord) {
    //clear = "";
    if (difficulty === "hard") {
      time += 2;
    } else if (difficulty === "medium") {
      time += 3;
    } else {
      time += 4;

settingBtn.addEventListener("click", () => settings.classList.toggle("hide"));
//setting select
settingsForm.addEventListener("change", (e) => {
  difficulty =;
  localStorage.setItem("difficulty", difficulty);



Now if you open index.html inside the browser you will see the following output as shown below


Leave a Reply