Reactjs Speed typing game

Last update: Mar 22, 2022

React speed typing game

Test your typing speed with this small react project

speed-typing game

how it works

  • Click start button
    • The keyborad focus with automatically be in the input field
      • Input field will be enabled for typing
    • The time will start counting from deafult time which is 30 secs
    • At the end of the time you will see how many words you typed in as many seconds
      • input field will be disabled
      • The function below will return the exact word count without spaces
      word !== "").length } ">
       	function calculateWordCount(text) {
       			const wordsArr = text.trim().split(" ")
       			return wordsArr.filter(word => word !== "").length
       		}

React feautures covered

  1. Hooks

    • useEffect
    • useState
    • useRef
    • custom hooks
  2. Functional components

Quick start:

$ yarn # npm install
$ yarn start # npm start

Contact me [email protected]

Happy Coding!

GitHub

https://github.com/Didier187/SpeedTypingGame
You might also like...

A Hangman game built with React and Typescript

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: ya

May 21, 2022

React Tetris Game

React Tetris Game A simple Tetris game made with React ๐ŸŽจ . Technologies used Re

Feb 7, 2022

Warwordly - Word guessing game to compete with your friends

Warwordly - Word guessing game to compete with your friends

Battle your friends in a word guessing game WarWordly is an Open Source and Free

Apr 20, 2022

React exercicio challenge for this class is a memory game

React exercicio challenge for this class is a memory game

React exercicio challenge for this class is a memory game

Mar 31, 2022

A lottery simulator of the Loto-Quebec 6/49 lottery game

Lotto 6/49 lottery simulator This is a lottery simulator of the Loto-Quebec 6/49 lottery game

May 2, 2022

An SVG loader component for ReactJS

react-inlinesvg Load inline, local or remote SVGs in your React components. Highlights ๐Ÿ– Easy to use: Just set the src ๐Ÿ›  Flexible: Personalize the o

Jul 28, 2022

Render visualizer for ReactJS

Render visualizer for ReactJS

React Render Visualizer A visual way to see what is (re)rendering and why. Features Shows when component is being mounted or updated by highlighting (

Aug 5, 2022

๐ŸŽ‰ ๅŸบไบŽ reactjs ๅผ€ๅ‘็š„ๅฏ่ง†ๅŒ–้กน็›ฎๅฎžๆˆ˜

๐ŸŽ‰ ๅŸบไบŽ reactjs ๅผ€ๅ‘็š„ๅฏ่ง†ๅŒ–้กน็›ฎๅฎžๆˆ˜

Aug 2, 2022

Calculadora simples usando classes do ReactJS

React Calc This calculator was developed by me using ReactJS during my JavaScript studies.

Jun 23, 2021
A Magic Memory Game Built with ReactJS

A Magic Memory Game Built with ReactJS

Jun 30, 2022
Heads or Tails game built with React
Heads or Tails game built with React

Heads or Tails game built with React

May 4, 2022
Tetromino - A tetris-style game created with React, Redux and TailwindCSS.
Tetromino - A tetris-style game created with React, Redux and TailwindCSS.

Tetromino - A tetris-style game created with React, Redux and TailwindCSS.

Jul 15, 2022
A small 3D game built with react-three-fiber
A small 3D game built with react-three-fiber

Avoid the cubes while the speed progressively increases! Can you beat the rainbow level? The game is inspired by an old flash game I used to play in t

Aug 5, 2022
Memory, the Card Game.
Memory, the Card Game.

Memory, the Card Game Concentration, also known as Match Match, Match Up, Memory, Pelmanism, Shinkei-suijaku, Pexeso or simply Pairs, is a card game i

Nov 4, 2021
A game with two independent units โ€“ the players โ€“ communicating with each other using an API
A game with two independent units โ€“ the players โ€“ communicating with each other using an API

gameofthree Demo Click Here to access the demo. Description The goal of this project is to implement a game with two independent units โ€“ the players โ€“

Oct 28, 2021
React XOX(Tic-Tac-Toe) Game with TypeScript and Hooks

React tutorial XOX(Tic-Tac-Toe) game with TypeScript and Hooks Demo Available Scripts In the project directory, you can run: npm start or npm run dev

Nov 15, 2021
PixelsMetaverse, Truffle and react and web3js team up to develop a metaverse game

English Pixels Metaverse Pixels Metaverse Introduction๏ผš Pixel Metaverse was born during the competition of the first Metaverse Training Camp held

Jul 21, 2022
An interactive, animated card memory game developed with React
An interactive, animated card memory game developed with React

Game Screenshots Click on the back of a card to flip it. If 2 cards match, they will remain face up. Unsuccessful matches increase the number of turns

Jul 28, 2022
๐ŸŽ Open source racing game developed by everyone willing
๐ŸŽ Open source racing game developed by everyone willing

??๏ธ @pmndrs/racing-game Live demo (current state): https://racing.pmnd.rs/ This project is a showcase for the feasibility of React in gaming. Every th

Aug 9, 2022