ieee-vit / razortype Goto Github PK

View Code? Open in Web Editor NEW

7.0 2.0 9.0 1.42 MB

A hacktoberfest React app of a fun type speed illustrator.

License: MIT License

HTML 10.29% CSS 31.20% JavaScript 58.51%

frontend hacktoberfest hacktoberfest-accepted javascript opensource react hacktoberfest2023 hacktoberfest2023-accepted

razortype's Introduction

Hacktoberfest 2023 with IEEE-VIT!

RazorType is a HacktoberFest React app of a type speed illustrator.

The purpose of the app revolves around successfully calculating and displaying the typing speed and the accuracy of the user.

Help your peers around the world to celebrate the fest of open-source! <3

Leave a ⭐ if you like our works!

Getting Started

Fork the repository to your GitHub account
Clone youre forked repository to your local machine and move inside it. git clone https://github.com/IEEE-VIT/RazorType.git && cd RazorType
Create a new branch to work on an issue. git checkout -b new-feature
Setup:
- To setup the project, run this command: $ yarn install or $ npm install.
This shall create a node-modules folder
- All the components are setup inside RazorType/src/components. Almost every code shall go in there.
- To start the project, run $ npm start or $ yarn start
Once you are done with the code, you shall push the project from your local machine to your created branch and then make a pull request. git add.

git commit -m "A short description about the feature."

push origin <new-feature>

Raise a PR to the main branch after opening your forked repository.

Contributing

To start contributing, check out CONTRIBUTING.md. New contributors are always welcome to support this project. If you want something gentle to start with, check out issues labelled as easy or good-first-issue. Check out issues labelled as hacktoberfest if you are up for some grabs! :)

License

This project is licensed under MIT

razortype's People

Contributors

Stargazers

Watchers

Forkers

hashtag7532 sujaljain16 kaviyakumarr gandholi-kumar yogeshp0012 praveenraj-rs ratikant-rout hrishit-b kristenekelly

razortype's Issues

Wrong Characters

The textarea that overlays the read-only textarea called "fetchText" has the class name "fetchTextOverlay".
The user would type the text in this box.
Turn all the wrong characters red.

#HINT: A character is considered to be wrong if the current index 'i' (which is to be implemented and maintained) of the entered character doesn't match with the character at the ith character of the fetched paragraph.

Results

Design a results page, name it "Results.jsx" in the src folder.
The results page shall contain:

Navigation Bar
A counter for the speed of the user
A counter for the accuracy of the user
A counter displaying the total words typed, the number of incorrect words typed along with the total time taken to type the assignment.

Responsiveness

Induce responsiveness to the app by inserting required media queries.

Call Results

Design an algorithm to call the contributed "Results.jsx" at the very moment the user enters the last word of the fetched paragraph without clicking any button.
Also implement a code to ensure that the actual results are being displayed as well. This can be done by modifying the Results.jsx file to replace the static values with the data fetched.
Update the display to reflect actual user statistics such as typing speed and accuracy.

Responsiveness

Make A Paragraph

You have a file named "words.json" located in "Assets/words.json" which contains several words in an array.
The task revolves around making several unique paragraphs not necessarily making sense from these words and storing them in another .json file called "paragraphs.json".

Speed Calculator

Design an algorithm to calculate the speed of the user.

#HINT: One possible way could be maintaining a track of the time required by the user to type the given paragraph and divide it by the number of words. However, this could be improved marginally

Timer

Develop a timer function that starts when a user starts typing and stops when the user completes their input.

This timer should be added to the application, ensuring a good user experience.

Disable spell check

Disable spell check when user inputs wrong spelling

Special Characters

Create an algorithm that allows the inclusion of special characters in text while maintaining correct grammar.

This algorithm should analyze the text and insert special characters where appropriate, ensuring that the resulting text remains grammatically correct.

Spacing

Create a function that checks if a user's input is just one word before a space. If it's one word, the system should accept it, but if it's more than one word, it should reject it.
In case of rejection, the system should display a friendly error message guiding the user on how to fix the input.

Accuracy Calculation

Design a code that can calculate the accuracy of the user.
It can be done by dividing the number of correct characters by the total characters from the given text.

Fetch A Paragraph

From the contributed file "paragraphs.json" located in "Assets/paragraphs.json", fetch a random element from an array (a paragraph) to the textarea of the class-name "fetchText" as a "placeholder".
Also implement the functionality of the reload button (which re-fetches a random paragraph from the .json file).

#HINT: By the help of react hooks like useEffects(), one could design a function that calls itself in a certain condition/time period.