Video Demo: https://youtu.be/XExAeXSJ2Hk
I made a registration form similar to a google form and by taking inspirations/ideas from some Youtube videos. But it isn't like an ordinary google form, my registration form has a moving wallpaper behind in the background and some UI modifications also with a soothing background music!
LANGUAGES USED IN MAKING THE PROJECT
I used the languages which were taught to me during the course. Those languages were:
- HTML
- CSS
- JAVASCRIPT
THE DETAILS THE FORM REQUIRES TO REGISTER
The required details which I added are in the order as follows:
- First Name
- Middle Name (if any)
- Last Name
- Username
- Password
- Confirm Password
- Date of Birth
- Gender
ROLE OF HTML FILE IN MY PROJECT
The ".html" file is the one which displays all the input informations with the ".css" file giving all the UI mods and all the animations including the background.The HTML file asks for your basic info just like any other registration we fill online.
ERRORS FACING WHILE REGISTERING
If we leave a column blank a notification/pop-up will appear saying that you have to fill this field.But if we leave the middle name column then there won't be any pop-up as it is not a compulsion and many users don't have one.If we tend to enter a character instead of numbers in phone number column then a pop-up will appear syaing that we have to enter a valid number.If we don't enter a valid e-mail then also a pop-up will appear saying that we have to enter a valid e-mail id.I have also turned the autocomplete off as to maintain the privacy of the user if anyone other than you is using your mac/PC then he/she won't be seeing your filled information.
ROLE OF CSS FILE IN MY PROJECT
The CSS file gives the whole form a modern touch with a touch of a standard form.I have added a moving wallpaper behind the form which gives a modern look. I also have added a calm and chilling music via youtube (only audio) through some embed functions and it plays while filling up the form. The CSS file also contributes in giving the form a colorful look while maintaining a look of an ordinary form like a google form.
I have added various colors for making the form colorful and vibrant but also keeping a formal touch in mind.The background colours changes within a set of time which can be changed in the input code of .css file and the multi-color shade gives a good vibe while filing the form.We can change the background color by changing the color codes respectively.
I have used a custom font for displaying the required details and I took that font via "Google Fonts" and I have attached the .html code of it which was provided on the site.
VERDICT
So, my Final Project is a modern Responsive Registration Form while maintaining it's classic looks and functions like a modern form.