furqananwar / typing-simulator

A typing simulator

Typing-Simulator

Overview

Typing Simulator is a front end project which allows user to do typing, but there is a catch user won't be able to type more swiftly as there will be a delay of 0.8s when ever user pushes the right word by pressing space bar.

Instructions !

General

Typing Simulator is not like other typing testers as it introduces pop up animation which pushes the word out of the container when a user successfully completes a word and hit spacebar to move on to the next word.

For Focus 💫

By default focus will be on the container having words in it, when ever user click any where else on the screen the focus is lost (unset by default), so in order to regain focus click any where near text and start typing.

For Typing 💬

Start typing and when you are about to complete the word hit spacebar to pop that word out ( word will pop out using some specified animation). If you don't hit space bar when you reach the end of a word nothing will happen, so inorder to move to the next word you need to hit spacebar This project is still in progress and will be completed soon!.

Live Preview (Till Now)

https://typing-simulator-eta.vercel.app/

Getting Started

1. Clone the project

git clone https://github.com/FurqanAnwar/Typing-Simulator.git/

2. Install dependencies

yarn install

3. Run Project

yarn start (For live-server to run)
yarn compile:sass (For compiling sass code into css file)

Want to contribute ❓

For more information visit CONTRIBUTION.md

typing-simulator's Issues

UI design needs to be improved

Can I work on this issue?

Animation Slowing down typing & accuracy

For typing speeds <30 WPM, it works just fine. But as speed increases, It seems to hinder the user's typing.
Typer would already type the word but it doesn't record until the animation has stopped.

UI color scheme need to be improved

Right now the UI of app isn't looking fine, need to refactor the color scheme

Start, stop and reset buttons are not responsive

@FurqanAnwar can I work on it?

Double cursor appearing on right letter(typed) followed by a wrong letter(typed)

When we type a wrong letter, the wrong letter animation starts and if we type the right letter right after the wrong letter the animation stops and puts 2 cursors on the letter.

Reason is when we type wrong letter we are setting up a function that will remove the animation and add cursor(class) back to the wrong letter. Since we typed the right letter right after typing the wrong letter we successfully added the new cursor but after 0.8s the wrong lettter function( which was being set by setTimeout earlier) removes the animation and add cursor(class) back to the element.

This PR include a fix for this issue.

Bug: Two Cursors on word!

When cursor is at the end of word, and we press any wrong key(other than space & correct letter key) we get two cursors!

Want to add clock

I want to add a clock so that user cant get how much time he spent here, also from this he get to know about daily practice time.
Please assign me the task under hacktoberfest2021

Bug: User can skip words by pressing spacebar.

When user complete one word and switch to other; just in time between them, if player press SPACEBAR key rapidly he can skip words!

.

Wrong text styles remains even after pressing the right letter!

When the animation runs (there is a time frame of 0.8sec for animation) if a user press the right keyword the animation won't stop and cursor moves onto the next letter leaving the previous letter with red color (indicating wrong letter)

Want to work on timer

I want to change the css of button and also want to include some properties such as font size weight its position etc..
plz assign me this @FurqanAnwar

Typo on the title (?)

I'm not sure if it is really a typo because "stimulator" is actually a word (and it kinda makes sense), but now the title is Typing Stimulator instead of Typing Simulator as in the title of this repo.

Stop Watch Buttons Not Working

Issue: