Buy an Insurance Policy – Take Home Test
Page 1 The first page is a welcome screen
User can click on the Start button and the wizard would start
Page 2 We need to collect:
country (user can select only one of:)
Hong Kong USA Australia
Each country will represent particular currency so that the user can see calculated premium with proper currency. It will be important on the next step where we do premium calculation
Hong Kong : HKD USA : USD
Australia : AUD
User has to choose which Package they want, only one of:
Standard Safe (it is 50% more expensive than Standard), it should show how much more user has to pay in the selected currency Super Safe (it is 75% more expensive than Standard), it should show how much more user has to pay in the selected currency
On this page, user can also see calculated Premium in correct currency
Formula for the premium is 10 * Age
Based on the selected country, premium will be adjusted accordingly based on the rate 10 * Age * Rate Based on the selected Package, premium will be adjusted accordingly, see Package options If user age is over 100, we direct him to Page 2 - age error when clicking on Next button Otherwise user can go step back or to the next page
Page 2 – age error
If user clicks on the button, he will be redirected to the Page 1
The final step of the journey where user can see the summary and proceed to buy Buy button lead to Page 1
The single Html file that is the starting point of the Wizard and is available under the root directory with the name “index.html”
The single Source file is available under the directory “./src”
The single Output file is available under the directory “./js”
The StyleSheet file is available under the directory “./css”
Node Modules are present in “node_modules” directory.
“tsconfig.json” is the standard TypeScript’s Configuration file.
“package.json” is the standard Node’s Configuration file. It also contains custom command.
I have used TypeScript because most of the errors are captured at the time of compilation. It was easy to make such a simple Wizard for a test purpose in TypeScript instead of using any other JS framework.
I have kept architecture very simple because it was just a test. The detail is given above.
I order to minimize the dependencies, I have created on one **Wizard.ts** file under the **./src** directory. It contains two classes (this approach is very common in Java to keep two classes in the same file) and several functions. I have used the switch statement for making decisions wherever possible, it is fast in such cases where just a single value is to be evaluated, while "else" takes some more time. The detail is given below: **PremiumCalculator** Class which is used to calculate the Premium on the basis of age, Package, country, and rate. It contains the following methods: constructor(age: number, country : string, packageSel: string) => It is the Constructor of the class and takes three parameters age as number, Country as string and Package as string. calculatePremium() => It is a private method and actually calculates the premium on the basis of the information gathered. getPremium() => it makes call to the private CalculatePremium() method and returns the calculated premium. **Wizard** Class is the main class which initializes the whole process. It contains the following methods: constructor() => Initializes the DOM Elements to be accessible throughout the class. initWizard () => this method initializes and assigns events to the DOM elements so that Wizard can work. hideAll() => hides all the elements showPage(e:Event, btn:string) => Hide and Show Pages logic is done in this method and it takes two parameters, **Event** and **btn** => Name of the current button Or page to be shown. showPremium() => it makes call to the private CalculatePremium() method and returns the calculated premium. highLightNav(nav:string) => This is used to highlight the current position or the page on the Wizard. clearText() => Clears the form Text Data in Case user Hits "Buy" button and gets back to the Welcome Screen: (Page # 1). premiumCal() => It make calls to PremiumCalculator.getPremium() method to calculate the premium and also assigns them to the DOM elements to display on the screen. validateForm(e:Event) = > It is the core to validate the provided input especially the Age. And the whole process is initiated on Document Ready State in order to avoid any error or warning of Dom Element not found etc. In the body, Wizard class is initiated and its **initWizard()** method is called. The output created "**Wizard.js**" file is included in index.html file for putting the Wizard in harness.
This test is using TypeScript version: “typescript”: “^4.7.4”
Install the TypeScript by following the instructions on this page: https://www.typescriptlang.org/docs/handbook/typescript-tooling-in-5-minutes.html
How to run the program
If TypeScript is installed globally, use the following command.
path-to-project-folder > tsc
If TypeScript’s compiler is installed in the node_modules directory and can be run with:
path-to-project-folder > npx tsc
If TypeScript’s compiler is installed in the node_modules directory and you can also run with custom command defined in “package.json”:
path-to-project-folder > npm run tsc_cmd
Syed Murtaza Hussain Kazmi @mailto: [email protected]
0.1 Initial Version contains very simple implementation of the Wizard.
This project is licensed under the GNU General Public License V3.0.