In this project I learnt about regex expressions, which I used for form validation and local storage, which I used to allow a user to see information on a page revisit.
In order to learn regex and form validation I created mock portfolio site with a contact form beneath, allowing a visitor to submit a form for hiring me for various tasks.
- The name field must simply not be empty
- The mobile number field must be 11 digits long (with whitespace removed), but is not required
- The email field must contain a valid email address. The means that it must contain an ‘@’, which must eventually be followed by at least one ‘.’ and it must use a valid Top Level Domain (TLD). Most examples I have seen online restrict the TLD to 4 characters in length, however with the introduction of gTLDs, the correct maximum length is much longer. In this project the maximum length I chose was 14 as that was the maximum length for a gTLD at the time, however since then there have been longer gTLDs introduced and as such removing that maximum length would be necessary for future compatibility.
Hire Details Section:
- The user must first select a hire duration, in days. This validation simply checks for a value equal to or above 1 day.
- The user must then select different options for what they want to hire me for. These job types have different rates associated with them, which are added to provide a rate multiplier. A discount is also added depending on the number of different job types chosen. The discount multiplier is taken from the rate multiplier. Finally when the user hits submit the form multiplies the hourly rate by this multiplier.