keyboard-pro

Description

keyboard-pro is a fun, fairly simple project to get started with HTML, CSS, and Javascript.

This is a development project with known list of issues, intended for accepting hacktoberfest contributions. Checkout issues board for more info.

Features

keyboard-pro features color-based state indicators:

Reset: Silver
Correct text (in progress): Mightnight Blue
Incorrect text (in progress): Orange Red
Complete: Green

The website runs a timer once the user starts typing in the test area, and stops once the text in test area matches the origin text. You may reset the test area along with the timer anytime during the test.

The test area border as such changes color to indicate current state as listed above.

Built with

HTML
CSS
Javascript
Love

Getting started

Prerequisites

Nothing special. Just a javascript-enabled browser should do.

Setup

Checkout this awesome guide on how to get started with your first open source contribution as a beginner.

Contribution

This project has two major feature implementation requirements. Any PRs that achieve the features illustrated in this section are acceptable.

State representation

Reset (initial) state:
Correct (in-progress) state
Incorrect (in-progress) state
Complete (finish) state

Reset button hover effect

The reset button is supposed to have hover animation (button and text color change):

Miscellaneous

If you can find any other project issue not listed here, then please feel free to raise one.

License

This project is licensed under the MIT License.