typing-test

Typing test website build with React.

View Demo View Github

How to run locally

git clone https://github.com/salmannotkhan/typing-test.git
cd typing-test
npm install
npm start     # to start local server at `localhost:3000`
npm run build # to create production build run
Zsh

Got new theme ideas?

I'll be happy to merge your theme ideas into typing-test. To add new theme:

  1. Add theme colors into src/stylesheets/themes.scss in following format:
.theme-name {
	--bg-color: <background-color here> !important;
	--font-color: <font-color here> !important;
	--hl-color: <highlight-color here> !important;
	--fg-color: <forground-color here> !important;
}
CSS

Note:
highlight-color is used for caret, wrong characters, timer, selected and onhover colors
forground-color is used for correctly typed characters
Using hex codes for colors is recommended

  1. Add theme name into src/components/Header.tsx in options:
const options: Options = {
	time: [15, 30, 45, 60],
	theme: ["default", "mkbhd", "coral", "ocean", "azure", "forest", <theme-name>],
};
React TSX

Important:
theme-name in themes.scss and Header.tsx should always match otherwise themes won't work

  1. Make a pull request

  2. If it's good enough to merge, I'll merge it