Create a Speed Typing Game with HTML, CSS, and JavaScript

Learn how to build an exciting speed typing game using HTML, CSS, and JavaScript. Follow our step-by-step guide to create your own fun and interactive typing challenge.

Join us on Telegram

Create a Speed Typing Game with HTML, CSS, and JavaScript

Source Code

Step 1 (HTML Code):

To start building our speed typing game, let's create the initial HTML structure. Below is a breakdown of each key component:

1. `<!DOCTYPE html>`: This declaration specifies the document type and version of HTML being used, which is HTML5.

2. `<html lang="en">`: The opening tag for the HTML document, specifying that it is written in English ("en").

3. `<head>`: This section contains meta-information about the document, such as the character set, title, and links to external resources.

- `<title>Speed Typing Test</title>`: Sets the title of the web page to "Speed Typing Test."

- `<meta charset="UTF-8" />`: Specifies the character encoding for the document as UTF-8.

- `<meta name="viewport" content="width=device-width" />`: Configures the viewport settings for responsive design.

- `<link rel="stylesheet" href="styles.css" />`: Links an external CSS file named "styles.css" to apply styles to the HTML elements.

4. `<body>`: This section contains the main content of the HTML document.

- `<main>`: The <main> element encapsulates the primary content of the page.

- `<div class="quote-display" id="quoteDisplay"><span></span></div>`: A container for displaying the quote that users will type. It has a class "quote-display" and an ID "quoteDisplay."

- `<section class="typing">`: This section contains elements related to the typing test.

- `<hr />`: This horizontal rule creates a visual separation between sections.

- `<div class="score">`: A container for displaying the user's score.

- `<div class="timer">`: A container for displaying the timer for the typing test.

- `<span class="timer__label">Time:</span>`: Label for the timer.

- `<span class="timer__text" id="timer">0</span>`: The actual timer display, initially set to 0.

- `<div class="words-per-minute">`: A container for displaying the words per minute (WPM) count.

- `<span class="words-per-minute__label">Words/min:</span>`: Label for the WPM count.

- `<span class="words-per-minute__text" id="wpm">0</span>`: The actual WPM count, initially set to 0.

- `<textarea class="quote-input" name="quoteInput" id="quoteInput" placeholder="Start typing right here!" cdkFocusInitial></textarea>`: A text input field where users type the quote. It has a placeholder text and initial focus attribute.

5. `<script src="script.js"></script>`: This line includes an external JavaScript file named "script.js" to add interactivity and functionality to the webpage.

This HTML structure forms the foundation of our speed typing game. In the subsequent steps, we'll apply CSS styling and JavaScript functionality to bring our game to life. Let's proceed to style our game using CSS.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Speed Typing Test</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main>
      <div class="quote-display" id="quoteDisplay"><span></span></div>
      <section class="typing">
        <hr />
        <div class="score">
          <div class="timer">
            <span class="timer__label">Time:</span>
            <span class="timer__text" id="timer">0</span>
          </div>
          <div="words-per-minute">
            <span class="words-per-minute__label">Words/min:</span>
            <span class="words-per-minute__text" id="wpm">0</span>
        </div>
        </div>
        <textarea class="quote-input" name="quoteInput" id="quoteInput" placeholder="Start typing right here!" cdkFocusInitial></textarea>
      </section>
    </main>
    <script src="script.js"></script>
  </body>
</html>

Step 2 (CSS Code):

Now, let's delve into the CSS styling for our speed typing game. Below, we'll break down each section of the CSS code:

1. Font Import:

- `@import url(https://fonts.googleapis.com/css?family=Gotu);`: This line imports the "Gotu" font from Google Fonts to be used in the webpage.

2. Universal Selectors:

- `*, *::before, *::after`: These selectors target all elements, including pseudo-elements, and apply a reset style to remove default margins and paddings while ensuring proper box-sizing behavior.

3. Body Styling:

- `body`: Styles the <body> element, setting its width and height to 100% of the viewport, a white background color, and a default text color of gray.

4. Main Styling:

- `main`: Styles the <main> element, utilizing CSS Grid to create a two-row layout. It sets padding around the main content area.

5. Quote Display Styling:

- `.quote-display`: Styles the element with the class "quote-display," positioning it relatively within the grid and formatting the quote text.

6. Typing Section Styling:

- `.typing`: Styles the section with the class "typing," positioning it relatively within the grid and creating a layout with CSS Grid. It also includes styling for interactive elements within this section.

7. Horizontal Rule Styling:

- `hr`: Styles horizontal rule elements, positioning them across all columns and applying border styles for visual effects, particularly when hovered over.

8. Score Styling:

- `.score`: Styles the element with the class "score," giving it a background, box-shadow, and padding to resemble a card-like appearance.

9. Quote Input Styling:

- `.quote-input`: Styles the textarea input field for typing the quote, setting its width, height, padding, background color, border, and placeholder text color.

10. Text Styling for Correct, Incorrect, and Help Responses:

- `.right`, `.wrong`, `.halp`: Styles elements with classes "right," "wrong," and "halp," providing specific text decorations and colors for each response type.

11. Keyframe Animation for Glitch Effect:

- `@keyframes glitch`: Defines a keyframe animation called "glitch" to create a glitchy visual effect for elements with the class ".halp."

These CSS rules contribute to the visual appeal and interactivity of our speed typing game, enhancing the user experience. Save this CSS code in a file named styles.css to apply the styles to our HTML structure. Remember to link the CSS file to your HTML document for the styles to take effect.

@import url(https://fonts.googleapis.com/css?family=Gotu);
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Gotu", sans-serif;
  font-weight: normal;
  font-size: 18px;
}

body {
  width: 100vw;
  height: 100vh;
  background: #fff;
  color: #414244;
}

main {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  width: 100%;
  height: 100%;
  padding: 3rem;
}

.quote-display {
  position: relative;
  grid-row: 1/2;
  align-self: end;
}
.quote-display span {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.1rem;
}
.quote-display::before {
  content: open-quote;
  position: absolute;
  top: -5rem;
  left: -2rem;
  z-index: -1;
  font-size: 10rem;
  color: #d7d7d8;
}

.typing {
  position: relative;
  grid-row: 2/-1;
  display: grid;
  grid-template-columns: 33% auto 2rem auto 2rem;
  align-items: start;
  width: 100%;
  height: 100%;
}
.typing:hover hr {
  width: 75%;
}

hr {
  grid-column: 1/-1;
  margin-top: 1rem;
  border: 0.25rem solid #4fb578;
  width: 25%;
  transition: width 300ms ease-in-out;
  outline: 0;
}

.score {
  position: relative;
  grid-column: 3/-2;
  display: flex;
  justify-content: space-between;
  z-index: 2;
  width: 100%;
  margin-top: -1.375rem;
  margin-bottom: -1rem;
  background: #fff;
  padding: 0.25rem 2rem;
  box-shadow: 0 3px 6px rgba(52, 31, 97, 0.16), 0 3px 6px rgba(52, 31, 97, 0.23);
}

.quote-input {
  grid-column: 2/-1;
  height: calc(50vh - 4rem);
  width: 100%;
  padding: 0 1rem;
  padding-top: 2rem;
  background: #fff;
  border: 0;
  border-radius: 0.2rem;
  resize: none;
  outline: none;
  transition: border 300ms ease-in-out;
}
.quote-input::placeholder {
  color: #d7d7d8;
  transition: color 300ms ease-in-out;
}
.quote-input:hover::placeholder {
  color: #4fb578;
}

.right {
  color: #4fb578;
}

.wrong {
  color: #b55648;
  text-decoration: line-through;
}

.halp {
  position: relative;
  border-color: #b55648;
  animation: glitch 300ms;
}

@keyframes glitch {
  0% {
    transform: translateY(-2%);
    border-color: #414244;
    box-shadow: -1.5px 2.5px #4fa5b5;
  }
  15% {
    transform: translateY(5%);
    box-shadow: 2px -1px #d87dbb;
  }
  45% {
    border-color: #d7d7d8;
    box-shadow: 0.5px -2px #d7d7d8;
  }
  85% {
    border-color: #b55648;
    box-shadow: 1px -1.5px #d87dbb;
  }
  100% {
    transform: translateX(-1%);
    box-shadow: -0.5px 0.5px #4fa5b5;
  }
}

Step 3 (JavaScript Code):

Let's delve into the JavaScript code for our speed typing game. Below, we'll break down each section of the code:

1. Constants and DOM Element Selection:

- The code defines a constant `RANDOM_QUOTE_API_URL` containing the URL for an API that provides random quotes.

- It selects various HTML elements from the DOM using `document.querySelector()`, including elements for displaying quotes, the input field, timer, WPM, and a divider.

2. Event Listener:

- An event listener is added to the `quoteInputElement` to listen for the "input" event, which triggers whenever the user types in the input field.

3. Input Handling:

- Inside the event listener, the code retrieves an array of span elements representing individual characters in the displayed quote.

- It then compares each typed character with the corresponding character in the quote, adding CSS classes to indicate correctness and updating a count of correctly typed characters.

4. Words Per Minute (WPM) Calculation:

- The WPM is calculated based on the number of correctly typed characters and the time elapsed using a formula that considers 5 characters per word and adjusts for time.

5. Displaying WPM:

- The calculated WPM is updated in the `wordsPerMinuteElement`.

6. Fetching a New Random Quote:

- If the user types the entire quote correctly, the `getNextQuote()` function is called to fetch and display a new random quote.

7. Functions for Fetching and Displaying Quotes:

- `getRandomQuote()`: Fetches a random quote from the API.

- `getNextQuote()`: Calls `getRandomQuote()` to fetch a new quote, clears the previous quote display, and displays the new quote.

8. Timer Functions:

- `startTimer()`: Initializes a timer to track how long the user takes to type the quote.

- `getTimerTime()`: Calculates the time elapsed since the timer was started.

9. Initial Quote Display:

- Calls `getNextQuote()` to fetch and display the first random quote when the page loads.

Save this JavaScript code in a file named script.js and link it to your HTML document. This script will add interactivity and functionality to your speed typing game, allowing users to type quotes, track their typing speed, and fetch new quotes to continue playing.

const RANDOM_QUOTE_API_URL = "https://api.quotable.io/random";
const quoteDisplayElement = document.querySelector("#quoteDisplay");
const quoteInputElement = document.querySelector("#quoteInput");
const timerElement = document.querySelector("#timer");
const wordsPerMinuteElement = document.querySelector("#wpm");
const divider = document.querySelector("hr");

quoteInputElement.addEventListener("input", () => {
  const quoteArray = quoteDisplayElement.querySelectorAll("span");
  const valueArray = quoteInputElement.value.split("");
  let right = true;
  let count = 0;

  quoteArray.forEach((characterSpan, i) => {
    const character = valueArray[i];

    if (character == null) {
      characterSpan.classList.remove("right");
      characterSpan.classList.remove("wrong");
      right = false;
    } else if (character === characterSpan.textContent) {
      characterSpan.classList.add("right");
      characterSpan.classList.remove("wrong");
      divider.classList.remove("halp");
      count++;
    } else {
      characterSpan.classList.remove("right");
      characterSpan.classList.add("wrong");
      divider.classList.add("halp");
      right = false;
    }
  });

  let randomNumber = Math.round(count * 60  / (getTimerTime() * 5) * 10) / 10;

  if (isNaN(randomNumber)) {
    wordsPerMinuteElement.textContent = "0";
  } else {
    wordsPerMinuteElement.textContent = randomNumber;
  }

  if (right) getNextQuote();
});

function getRandomQuote() {
  return fetch(RANDOM_QUOTE_API_URL) //RANDOM_QUOTE_API_URL
    .then((response) => response.json())
    .then((data) => data.content)
    .catch(error => console.log(error));
}

async function getNextQuote() {
  const quote = await getRandomQuote();
  quoteDisplayElement.innerHTML = "";
  quote.split("").forEach((character) => {
    const characterSpan = document.createElement("span");
    characterSpan.textContent = character;
    quoteDisplayElement.appendChild(characterSpan);
  });
  quoteInputElement.value = null;
  startTimer();
}

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

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

getNextQuote();

Source Code: Download Files

Final Output:

how to create a speed typing game with html, css, and javascript.gif

Conclusion:

Congratulations on completing this tutorial on creating a speed typing game using HTML, CSS, and JavaScript. You've embarked on a rewarding journey in web development and successfully built an engaging and interactive typing challenge.

Throughout this guide, you've learned how to structure web content with HTML, style it to perfection with CSS, and bring it to life with JavaScript. You've integrated a timer, scoring system, and feedback mechanism, transforming a simple idea into a fully functional game.

We hope you've enjoyed this tutorial and that it has inspired you to explore the world of web development further. Building interactive web applications is not only a valuable skill but also a gateway to endless creativity. So, keep coding, keep learning, and keep creating. The digital world is yours to shape.

Thank you for choosing this tutorial, and we wish you the best of luck in all your web development endeavors!

Tags: speed typing game, html, css, javascript, source code, games development, html css javascript game tutorial, step-by-step typing game creation, web-based speed typing challenge, speed typing tools

الاستاذ محمد التميمي

Create a Speed Typing Game with HTML, CSS, and JavaScript

Source Code

Step 1 (HTML Code):

Step 2 (CSS Code):

Step 3 (JavaScript Code):

Final Output:

Conclusion:

إرسال تعليق

اسئلة الاجتماعيات الثالث متوسط 2024 الدور الاول

حل اسئلة اجتماعيات ثالث متوسط 2024 دور اول

حل اسئلة ضمان وأمن المعلومات قسم الحاسوب الجامعة المستنصرية نموذج رقم 1

حل اسئلة وسائط متعددة قسم الحاسوب الجامعة المستنصرية نموذج رقم 1

حل اسئلة ويب متقدم قسم الحاسوب الجامعة المستنصرية نموذج رقم 1

الأستاذ محمد التميمي