arpitghura/typing-test

Web App to practice your typing skills.

Typing Test - Practice Your Typing Skills

Typing Test is a web app to test and practice your typing skills. Users can practice and improve their typing speed by practicing multiple times. The App generates a set of words (real words that we use in daily life) to practice so that the user will be able to type all types of words. Also, the App stores the session history of all the practice sessions the user takes, along with the time taken to complete the practice session and the efficiency (words per minute). The user has the functionality to reset all the stored values.

The Web App can be accessible from https://typing-test-project.vercel.app

Project Domain: Web

Tech Stack :

1. HTML5

2. CSS3

3. JavaScript

Test your Typing skills NOW!

Practice in the web app smoothly

About Page:

Practice Page:

Session Completion Message:

Report Generated on Completion:

Dark theme:

---

Contributors
Thanks to all the contributors for their efforts 💖

Arpit Ghura	Laaveshwaran P	Ayush Agrawal	Shreyash	Shantanu Dutta	Abdulbasit Yusuf
Giriraj Roy	Niladri Adhikary	Bhaskar Pandey	Alexander Samaniego	Riya Dangra	Imgbot
ANKIT KUMAR	Harsh Gautam	Sibayan Misra	Amit Sethi	Dhinesh M	zemetskiym
Himanshu Singh	Tapojita Kar	Pritam Roy	Festus Adeyemi	Ravi Yadav	Ayush Choubey
Sarthak Verma	TAMAL MALLICK	A_Kushal	Thiyagarajan Ravichandran	Nupoor Shetye	Maciek S
Harsh Yadav	ajay anuragi	Dissy Ulina	Emerson	PRIYANSHU PRASAD GUPTA	Shivansh Arora
Subham Choudhury	Veshraj Ghimire	Alok Pandey

Open-source Event

1. Code Peak'23
2. Diversion 2K23
3. InnoGeeks Winter of Code'23
4. Kharagpur Winter of Code'22
5. HacktoberFest 2022

Thanks for coming here!

Give a ⭐ if you liked this!

typing-test's Issues

Add Github Project Link on website

Add the GitHub Project link in the Navbar or the footer of the website so that visitors may view the GitHub repo and they can contribute to the project if they wanted to.

[ENHANCEMENT] Refactor the Code

The Code of the project is not yet refactored. I have seen the same code is available on different files.
I want that the code should be refactored so that there will be no repetition of the same code.

Current Folder Structure:

CSS files needs to be refactored first and then JavaScript files without breaking the working of the website.

[BUG] Night mode problem

There is a problem is night mode in website.
When we have turned on night mode, it should be intact until we again turn it off even we move from profile section to another section also, it should be turned on.
But here is bug ,
If we turn on night vision, the only current page will go to night mode and if we shift from another section, the entire web page automatically goes to light mode.

Participant of @Diversion 2K23

Improper showing of table on smartphones

Describe the bug
The history table on practice page is not showing responsively on small screen devices.

To Reproduce
Steps to reproduce the behavior:

1. Go to practice.html
2. Fill details and complete one practice session
3. Scroll down to history
4. You will see a table which is not responsive.

Expected behavior
Make the history table responsive by adding a horizontal scrollbar for small screen devices. This can easily be done using overflow property.

Screenshots

Smartphone (please complete the following information):

• Device: Realme X7
• OS: Android 12
• Browser: Chrome

[FEATURE] Put a 'Home button' in navigation

Hey @arpitghura
I think as there is only one button named as "Typing Test" to go to the landing page/home page. It may be problem to user to go to home page.
Can I make add a home button in navigation bar to put more clarification ?
It will look like:

Add Difficulty levels

Is your feature request related to a problem? Please describe.
Currently there is no option to set difficulty level. So, add an option to set the difficulty level for practice and test and based upon difficulty level, create sentence to type.

Describe the solution you'd like
Add a page similar to practice.html which also asks user to set difficulty level before proceeding and based on difficulty level, make sentence to type in.

Add Badges in README file

Is your feature request related to a problem? Please describe.
Currently the README file do not have badges for the events the project is participating in including DIVERSION 2023 and IWOC 2023.
Also the year of KWOC participation of the project is written wrong (it's 2022) at the end of the README file.

Describe the solution you'd like

• Badges similar to this for both events listed above.
  

• Update the Year of the participation in KWOC.

• Add a Badge to join the Discord server ( Link: https://discord.gg/7c3VGDutmS )

Describe alternatives you've considered
You can use https://shields.io/ for creating badges.

[FEATURE] About Section ui

Is your feature request related to a problem? Please describe.
The About section looks very basic

Describe the solution you'd like
To enhance the UI of the About section

Writing Documentation of Project in HIndi Language

Hello Respected Sir
If you like my idea then we can write a Documentation on this project in Hindi Language

Aim of writing Document of Project in Hindi Language is that Many people understand Hindi language well so one can read the documentation in Hindi language and understand Project well

If you like my idea than we can move ahead

Update Images in README file

The Webpage images available in the README file are outdated. Update the file as per the current state of the project.

Add Side Menu

Describe the bug
When the application in mobile view the navbar collapses.

Expected behavior
When the application's width is less than 450px(which is the most of mobile phone's width) an hamburger icon appears and a side menu is created.

Add animation to heading

Please assign this to me . I will do it for you.

when we click on reset btn then it delete data with user name

Is your feature request related to a problem? Please describe.
when we click on the reset button then it should only delete data of the practiced record not the user name
and to delete the user name we can provide another button.

I'm working on this issue plz assign it to me

after clicking on the reset button

User will not able to copy the practice text and paste into the text-area.

Is your feature request related to a problem? Please describe.
In this typing test game basically, users can copy the text and paste it into the input tag which will can give user a spam typing speed.

Describe the solution you'd like
So I resisted the user from copying and pasting.

[FEATURE]imroving the navbar

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
i will improve the nav var and make it more attractive
Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Footer missing in the about page

Improve Nav Bar UI & Footer Location

@arpitghura I have worked on the UI of the navbar to make it look more attractive and appealing.
Here is how it looked:

When we will hover on the nav buttons they will turn to black with white text on it.
Moreover, we can work on the footer to move it to the bottom center.

Center aligning the heading

Hi!

The heading - "Typing Test - Practice Your Typing Skills" in the README would look much better if it is center -aligned.
If you like my suggestion, do assign me to work on it!

Build About Page

Is your feature request related to a problem? Please describe.
The website contains a link to the about project page but the page is empty.

Describe the solution you'd like
Edit the about.html file and add content along with graphics to look like a about us/project page.

• add Navbar similar to homepage
• add hero section similar to homepage but add content related to about page-
• add details about the project.
• add footer similar to homepage

Want to add a "FAVICON".

please assign me this issue and add hacktoberfest tag.

[FEATURE] Profile data UI enhncement.

In profile section the data presentation table is not matching with website theme and other border related enhancement should be there.

Add Difficulty level in history

Add Difficulty level in history, also store it with individual practice session in local Storage.

Update the README.md file

Since the website has quite changed by our valuable contributors. So, it is required to update the screenshots and some content of the readme file.

[FEATURE] add a brand logo for typing-test

I will be adding svg icon for typing test brand to make it look more pleasing

[FEATURE] Updating footer

I want to add Footer for the website please assign this to me under hacktoberfest 2022.
@arpitghura

Add contact section

Contact section

Remove Extra Spacing of Name Div

Describe the bug
The NameModal div on practice page has unwanted vertical spacing that looks unprofessional.

To Reproduce
Steps to reproduce the behavior:

1. Go to practice.html
2. Click on Reset Data if already name and history is saved.
3. Scroll to name asking div
4. See extra spacing of name div in vertical direction

Expected behavior
The name div should have the height which contains the content not extra space.

Screenshots

Desktop (please complete the following information):

• OS: Windows
• Browser: Microsoft Edge

Expected Solution
This problem can easily be solved by removing the height property from the nameModal div.

[BUG] Improper Alignment of Footer Content on Profile and Practice Page on Smartphones

Describe the bug
Improper Alignment of Footer Content on Profile and Practice Page on Smartphones.

To Reproduce
Steps to reproduce the behavior:

1. Go to practice.html
2. Scroll down to footer section
3. See error

Expected behavior
The Footer content should be center aligned with relatively small font size similar to footer on index.html

Screenshots

Expected Solution
This bug can be solved by checking the CSS of footer content for the media queries of smartphones.

[BUG] Remove unwanted space between GitHub icon and dark mode button

Describe the bug
The GitHub Button and dark mode button has unwanted space in middle on all pages except index.html, remove it.

Expected behavior
Both the GitHub icon and dark mode button be adjacent.

Screenshots

[security issue] userName Vulnerable to XSS

Since username is user controlled,
it is possible to inject custom javascript code.
Read more about XSS

Better Navigation menu for more attraction

The UI of the website is not so good. we need to implement with modern and attractive designs.
We need to more attractive the About & Profile section.

[ENHANCEMENT] Update the UI of the Website

Currently the UI of the website is not so good.
Do come up with some designs which are modern and minimalist that can be implemented with the website.

Add Contributors.md

Add Contributors.md to thank all the contributors for their support.

Add average time and speed to history section

I'd like to add a section in the history table that shows the average typing speed and average time of all speed tests taken by the user.

Something like this:

I haven't seen any existing issues for this. I'd like to be assigned this, let me know if this is something I can add for Hacktoberfest.

Shifting to NextJS

SPA provides a better user experience & Fast loading of webpages.

NextJS is good option for the SSR and SPA
We can keep the current styling and markup maybe tweek something and shift this application to next and it would provide us with some of the great features of NextJS.

Also we will use containers since this is a production application.

Improve Documentation

Improve Readme.md file to give information about the project.
Add some badges relevant to the project.

Add Time Based Practice Sessions

Is your feature request related to a problem? Please describe.
Currently we have only level-based practice session but there is no way to give long practice session like 1 minute, 5 minutes, etc.

Describe the solution you'd like
We can implement the timing-based sessions in practice.html while choosing the difficulty level like we can give options auto or select time span

Additional context
In implementing the timing-based session, we need to generate a long paragraph so that the words will not lack.

[BUG] Quote is not sufficiently long/does not extend

Describe the bug
When taking the timed typing test, the sample text to copy can be completed before the timer runs out. When this happens, no extra text is allotted and the highlight disappears, leaving the visitor to wait until the timer runs out. The words per minute (WPM) displayed once the timer runs out is not representative of the end user's skill because the quote was not sufficient.

To Reproduce
Steps to reproduce the behavior:

1. Go to the "Practice" section
2. Click on the easy difficulty and the 5 minute option
3. Finish typing the sample text
4. See error

Expected behavior
The expected behavior would be the sample text extending as the user types or the original sample text being too long for any human to reasonably complete.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Firefox
• Version: 109.0 (64-bit)

Expected Solution
This bug can be solved by generating more sample text or checking for a completed test to create additional text.

Add CONTRIBUTING.md

For best practice, CONTRIBUTING.md can be added into this project.

improving ui [FEATURE]

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
the ui of the website should be very intresting and interacting

Describe the solution you'd like
A clear and concise description of what you want to happen.
i want to make the ui very beautiful
Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Add Navbar and Footer on practice page

There is no navigation menu and footer available on the practice.html page.

Add the navigation menu and footer similar to index.html

[Improvement] Update the Dark Mode button content from text to icon

What to do?
Remove the text of the dark Mode button and add icon to it.
You can check out the icon that I am saying on Reactjs documentation page, Click here to view.

Build Profile Page

Is your feature request related to a problem? Please describe.
The website contains a link to the profile page but the page is empty.

Describe the solution you'd like
Edit the profile.html file and add content along with graphics to look like a profile page.

• add Navbar similar to homepage
• add hero section similar to homepage
• show user data from local Storage like username, history of practice session.
• add button to delete all the data from the local Storage.
• add footer similar to homepage

[BUG] Removing GitHub logo from practice page to maintain consistency.

Describe the bug
The extra GitHub logo should not be present in the practice page.

KWOC

To Reproduce
Steps to reproduce the behavior:

1. Go to 'practice page'
2. See error

Expected behavior
Github logo should not be pesent in order to maintain consistency.

Screenshots

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Using meaningfull sentences instead of random words.

Let's use some API to get meaningfull sentences

[FEATURE] Improve the content of About Us Page

Describe the solution you'd like
The content available on about us page is not looking professional. Make some changes to the content and also fix the alignment of the content.

Currently the content is badly formatted and also not aligned properly.

[ENHANCEMENT] Code Documentation

Describe the bug
No Descriptions on the code blocks or snippets. Only identifier is the class of the html conponents.

To Reproduce
Steps to reproduce the behavior:

1. Open the source in an editor

Expected behavior
Need short description on code blocks to quickly grasp the structure of the code

Screenshots

Expected Solution
This bug can be solved by writing a short description on top of code blocks.

navbar brand name link

hello @arpitghura I think the navbar brand name Typing Test should be a link pointing to the homepage and not just a level one heading thereby the home button will not be needed, I could work on it if approved and assigned, thank you

Add testimonials section

As various user test their typing skill on this web application so some of them which have a fastest tying skill and are famous one we have add them as a testimonial

Adding light and Dark mode

Is your feature request related to a problem? Please describe.
No it is not a problem. Add this feature to make the website more appealing.

*Describe the solution you'd like
Enhancing the website with a light and dark mode option by adding toggle button