New Project "Phoenix" - Numeric keypad control

For our new project we need a numeric keypad control. This control should be programmed in HTML5, CSS3, JavaScript Example: *Picture1* In the above example from our present pos system a standard numeric keypad was generated. Each key triggers an event with the corresponding character The characters of the pressed keys are displayed in the upper red field *Picture2* With the function key "C" you can delete a character that has been entered. With the function key "X" you can enter the multiplier symbol. *Picture3* The control element must have the following characteristics: - The entire control element should be responsive. - The design of the individual keys should be modifiable. It should be possible to change the form and color of the keys. - Clicking on a key should trigger an event passing the corresponding character. - Depending on the country setting a comma must be replaceable by a period. - A function should be used to read and modify the value in the red field. - Clicking on the "OK" key should trigger an event passing the entered value.