Build HTML/Javascript/jQuery converter tool

We need to create a simple Javascript tool to allow users to enter specific ‘identifier’ values in a text box and then view the ‘converted’ form of these identifier values. The logic behind the conversion is already implemented in an existing Google Sheet: [login to view URL] The Google sheet has 3 sheets, each of which we would like to “mimic” in the Javascript tool in a simplified form. To illustrate the structure of the tool, we have created a “sketch”, which showcases the same tool through 3 different views (controlled via the “tabs” in the upper right corner): [login to view URL] Here, the “CAN ID to PGN” view reflects the Google sheet “CAN-ID-to-PGN”, the “PGN to CAN ID” reflects “PGN-to-CAN-ID” and the “PGN list” reflects the “J1939/NMEA PGN List”. Below we describe the implementation for the tool: ----------------- General: 1) The tool should be based on simple HTML and Javascript code (optionally with jQuery). The code should be clean, readable and optimized for use across web browsers (Chrome, Edge, Firefox, ...). 2) CSS styling should be minimal and be done through classes. The aim is to achieve a similar “look & feel” (colors, fonts, table structure, ...) as in the PDF illustration 3) The tool should be suitable for a width of 940 px 4) Finished milestones for the tool should be presented via [login to view URL] 5) The tool should be “tested” to match the results in this CSV: [login to view URL] 6) The tool should support two number formats: Hexadecimal and Decimal, controlled via the select dropdown in the upper left corner. All values should be changed accordingly when the user changes the type in the dropdown 7) Across the 3 views in the tool, some columns (PGN, PGN label, In DBC) should be looked up from a CSV file, which should be loaded by the tool on-page-load for use across the 3 views in the tool: [login to view URL] 8) The implementation should ideally be done via table structures, with table dimensions not changing upon updates (all fields should stay in the same place) ----------------- CAN ID to PGN view 1) The user is able to input a number of identifiers in the text field table to the left (CAN ID column), separated by new-line (for example pasted form an Excel sheet) 2) If e.g. 5 IDs are added, the tool should show 5 lines of converted information 3) Each column should be calculated in the same way as in the Google Sheet 4) If a user changes a value in the text field, deletes a line, adds more lines etc, the output should be updated as a result 5) The tool should have the values shown in the PDF as the ‘default’ values 6) If a user enters a lot of values (e.g. 50 CAN IDs), the tool should retain the dimensions, but enable a scroll bar as illustrated in the PDF sketch ----------------- PGN to CAN ID view 1) This is similar to the above, but should use calculations from the Google sheet “PGN to CAN ID”. The table should display values from “Step 1/2” in the Google Sheet for the fields: "P (PRIORITY)" "R (Reserved)" "DP (Data Page)" "PF PDU Format)" "PS (PDU Specific)" "SA (Source Address)" 2) The tool should display values from “Step 2/2” for the fields “CAN ID” and “DBC ID” ----------------- PGN list view 1) This should simply be a listing of the contents of the pgn-list CSV already loaded ----------------- We are looking for a developer for many similar projects, so we hope for good pricing and results on this one.