Made a Basic Typing Speed Test Using Js
Welcome to my Typing Speed Test website! This project is designed to measure and improve your typing speed. Below you will find detailed information about the technologies used, file structure, responsiveness, and how to access the website.
I chose React for this project due to its component-based architecture, which allows for reusable and maintainable code. React's virtual DOM ensures efficient updates and rendering, leading to a smoother user experience. Additionally, React's rich ecosystem and community support make it an excellent choice for building modern web applications.
YES, the website is responsive. It adapts to different viewports, ensuring a consistent experience across various devices.
The project is organized into several components and directories for better maintainability, Here are these:
less
src/components: Contains all React components, such as SpeedTypingGame and TypingArea. src/styles: Includes CSS modules for styling components. public: Public assets and the main HTML file.
Main Components:
less
App.js: The root component that includes the main layout. SpeedTypingGame.js: Manages game state and logic, including paragraph generation and user input. TypingArea.js: Renders typing area and stats, tracks time, mistakes, and provides a reset button.
Currently, I haven't hosted my website anywhere as it is in development. But in the future, I will surely host it and will update the things on this repo.
Clone the Repository
bash
git clone https://github.com/akshatrajsaxena/typing-speed-test.git
cd typing-speed-test
Install Dependencies
bash
npm install
Run the Development Server
bash
npm start
Open http://localhost:3000 in your browser to view the website.
The purpose of this website is to help users measure and improve their typing speed. It serves as a fun and interactive tool for practice and improvement. How is the Website Styled?
The website uses CSS modules for styling, ensuring scoped and maintainable CSS. Additionally, it utilizes CSS Flexbox and Grid for layout management, ensuring a responsive design. How to Contribute?
If you find any issues or have suggestions for improvements, feel free to open an issue or submit a pull request. Contributions are welcome!
If you have any questions or would like to get in touch, you can reach me at mailto:[email protected]
@vitejs/plugin-react uses Babel for Fast Refresh
@vitejs/plugin-react-swc uses SWC for Fast Refresh
This project was bootstrapped with Create React App.