Four simple HTML/JavaScript pages (within 24 hours, preferrably 12 hours)
Budget: $30 – $250 USD
Hello,
I'm looking to create four simple HTML pages with most of the work being done in JavaScript (aside from CSS styling and the basic HTML markup). All pages should be self-contained (i.e. no links to libraries over the internet. If you want to include jQuery, link it from the filesystem not CDN).
The idea is to simulate a price-comparison page that pulls data from the three other pages. Each of the three pages should contain a simple multi-step form that collects data from the user (with simple validation, e.g. mandatory fields should not be left blank, etc). The multi-step part can all be done in JavaScript/CSS on the very same page, no need to actually submit the form and move to a different page.
The three pages will be almost identical except for simple styling changes. Each page represents an insurance company's quote form. Here are the steps of the form:
Step 1: personal info:
First name (mandatory)
Last name (mandatory)
Date of birth (mandatory -- must be older than 18 years old, e.g. maximum value of 2004)
Driver license number (mandatory)
(user then hits next which shows the next step of the form)
Step 2: vehicle details
Car make (drop-down list)
Car model (drop-down list)
Car model year (drop-down list or regular text field)
Note: there are lots of simple lists available on the internet, a quick google search will get you a ready-made list (you can use this for example: https://codepen.io/przemek555/pen/NxxoWK)
(user then hits next)
Step 3: accident history
Yes/No: have you had any accident in the last year?
Drop-down: how many traffic violations have you had in the last year? (None, 1-3, 4-6, 7+)
Checkbox: "I certify that the above information is true to the best of my knowledge" (must be checked by the user)
Button: "Get quote now!"
When the user clicks this button (and all form fields are validated), the system should simulate an API call (you could do it as a simple JavaScript function since this is all mock-up data). The call will return a quote and displays it to the user. Use reasonable values based on the driver's age, vehicle info (vehicle year), and accident/violation history as per the form. Display the quote to the user. (e.g. "Congratulations! Based on the information you submitted, you can get your car insured with us for $XXX.XX)
That's it. The other two pages will be almost identical, just put a different fictitious insurance company name in the header with some different styling/colors.
The last page, which is the price-comparison page, will include a similar multi-step form to collect data, and then call the three different fake APIs (JS functions)
Please simulate a fake delay in the API (JS function) by introducing sleep() statements and a "Loading" or "Getting your quote" icon or text should show up for the user.
The results of the three calls will be shown on a table with links to the original insurance company pages from which the quotes were "fetched".
Here is how I see it done but you can do whatever you want:
- root
Insurance1.html
Insurance2.html
Insurance3.html
PriceComparison.html
+ css (common css files)
+ javascript (common js files, including the fake API calls/functions)
I hope all is clear.
PLEASE DO NOT SUBMIT A BID UNLESS YOU FULLY UNDERSTAND THE REQUIREMENTS AND TIME-CONSTRAINTS. ANY AUTO-BIDS WILL BE IGNORED. IF YOU HAVE QUESTIONS THEN ASK, BUT DON'T BLINDLY BID.
Thanks.
I'm looking to create four simple HTML pages with most of the work being done in JavaScript (aside from CSS styling and the basic HTML markup). All pages should be self-contained (i.e. no links to libraries over the internet. If you want to include jQuery, link it from the filesystem not CDN).
The idea is to simulate a price-comparison page that pulls data from the three other pages. Each of the three pages should contain a simple multi-step form that collects data from the user (with simple validation, e.g. mandatory fields should not be left blank, etc). The multi-step part can all be done in JavaScript/CSS on the very same page, no need to actually submit the form and move to a different page.
The three pages will be almost identical except for simple styling changes. Each page represents an insurance company's quote form. Here are the steps of the form:
Step 1: personal info:
First name (mandatory)
Last name (mandatory)
Date of birth (mandatory -- must be older than 18 years old, e.g. maximum value of 2004)
Driver license number (mandatory)
(user then hits next which shows the next step of the form)
Step 2: vehicle details
Car make (drop-down list)
Car model (drop-down list)
Car model year (drop-down list or regular text field)
Note: there are lots of simple lists available on the internet, a quick google search will get you a ready-made list (you can use this for example: https://codepen.io/przemek555/pen/NxxoWK)
(user then hits next)
Step 3: accident history
Yes/No: have you had any accident in the last year?
Drop-down: how many traffic violations have you had in the last year? (None, 1-3, 4-6, 7+)
Checkbox: "I certify that the above information is true to the best of my knowledge" (must be checked by the user)
Button: "Get quote now!"
When the user clicks this button (and all form fields are validated), the system should simulate an API call (you could do it as a simple JavaScript function since this is all mock-up data). The call will return a quote and displays it to the user. Use reasonable values based on the driver's age, vehicle info (vehicle year), and accident/violation history as per the form. Display the quote to the user. (e.g. "Congratulations! Based on the information you submitted, you can get your car insured with us for $XXX.XX)
That's it. The other two pages will be almost identical, just put a different fictitious insurance company name in the header with some different styling/colors.
The last page, which is the price-comparison page, will include a similar multi-step form to collect data, and then call the three different fake APIs (JS functions)
Please simulate a fake delay in the API (JS function) by introducing sleep() statements and a "Loading" or "Getting your quote" icon or text should show up for the user.
The results of the three calls will be shown on a table with links to the original insurance company pages from which the quotes were "fetched".
Here is how I see it done but you can do whatever you want:
- root
Insurance1.html
Insurance2.html
Insurance3.html
PriceComparison.html
+ css (common css files)
+ javascript (common js files, including the fake API calls/functions)
I hope all is clear.
PLEASE DO NOT SUBMIT A BID UNLESS YOU FULLY UNDERSTAND THE REQUIREMENTS AND TIME-CONSTRAINTS. ANY AUTO-BIDS WILL BE IGNORED. IF YOU HAVE QUESTIONS THEN ASK, BUT DON'T BLINDLY BID.
Thanks.