PNG/PSD to HTML/jQuery/CSS
This project was successfully completed by gabix89 for $60 AUD in 2 days.Get free quotes for a project like this
Project Budget$30 - $250 AUD
Completed In2 days
First of all a big thank you for taking the time to go through this project.
We are planning to build a website and most of its design work has been completed. The next step for us is to convert the design files into actual code and this is where we need your help.
We are looking for a developer who loves writing clean, reusable code and is proud of it. To begin with, we want you guys to convert one of the files into code and if we find that you are a good match for us, then we will work with you to code the whole website.
From our past experiences, we have noticed that when a project is posted on [url removed, login to view] there are a huge number of people who express interest and it becomes very hard to pick the winner based on their replies as all of them write that they have the skills and will do a good job etc. Most of the times what they write is far from truth. So to counter that we have come up with a plan, we have attached a layered PNG file (this file has two forms within itself) that we want you to code. We will review your code and then decide if you are a good fit, this way we hope that only those people who are genuinely interested will apply.
Please note that we want the code to do EXACTLY what has been designed in the sample file. We have spent a lot of time on design and there is nothing on there which is not important, even the text box border color is important.
Form validation to us is one of the most important things and we have taken utmost care to design it and please respect that. Please make it work exactly the way it is.
To make validation a little more clear, we will like to mention a few guidelines that we have followed as these may be a little hard to understand by going through the attached file.
1. If the user enters a valid value in the field, show a green tick next to it. When the user moves the mouse over this tick, it should show the message 'The value is valid' in a tool tip which will look exactly as the error tool tip but it will have green text and green border. This should happen when the user FOCUSES OUT of the control.
2. If the value that the user entered is invalid, give the control a red border and show an error sign next to the control AND SHOW THE ERROR MESSAGE tool tip exactly as shown in the attached file. When the user moves the mouse over the error sign, it should show the error message tool tip again. This should happen AS SOON AS THE user enters invalid character.
3. When the user clicks the submit button, all the error messages should be listed at the top of the form along with the red borders around the controls and the error signs next to them.
4. If a field is required and the user clicks in it but leaves without entering any value, then the validation should be done at that point which will do as specified in point 2.
Following is the list of validation rules that apply:
1. First Name, Last Name: Can have only the alphabets.
2. Mobile phone, home phone: Can only have numbers and blank spaces
3. Suburb: Is a auto complete box.
Validation rules for the dialog
1. Post Code : Numbers only
2. Suburb Name: Alphabets only.
The dialog box should open up when the 'I cannot find my suburb' link is clicked.
We feel that we have provided enough information for you guys to start, if you have any questions, please feel free to ask us.
Please respond only if you can provide the code for the attached file ( the dialog box is the absolute minimum), otherwise please don't your valuable time and don't waste ours.
Thank you once again for your time.
If you don't have fonts used in the file, please use Arial.
Looking to make some money?
- Set your budget and the timeframe
- Outline your proposal
- Get paid for your work
Hire Freelancers who also bid on this project
Looking for work?
Work on projects like this and make money from home!Sign Up Now
- The New York Times
- Wall Street Journal
- Times Online