This is my attempt to recreate ProofHub's sign-up form from scratch. This sign-up form is mobile-friendly. And the form validation is done via Vanilla JS.
-
► 37.7%
-
► 36.9%
-
► 25.4%
At first, I was creating a sign-up form following the Odin Project's curriculum. And I thought that I should challenge myself a little. So I picked a random company's sign-up form and recreated it from scratch. If you look at the links above, the first one is ProofHub's sign-up form and the second one is my recreation of it.
I was able to reproduce 95% of the original. There were certain features that I couldn't replicate due to inaccessibility to their back-end server. For example, when users plug in their own URL, ProofHub server will check to see if it's still available for use. In my case, I cannot implement that since I don't have their database.
I also got a chance to work with RegEx. It was confusing at first, but after a few tries, I managed to implement it successfully with my form. With this project, the majority of the validations was done using Vanilla JS. The first iteration of the form.js was quite verbose and repetitive due to different inputs having different requirements. However, I was able to consolidate the script altogether to a certain degree to prevent repeating codes.
Furthermore, this was the first time I practice mobile-first web responsive design. It felt a little different at the beginning because I got so used to designing my webpages with a desktop-first approach. But with any web project, you push through and get it done regardless. That said, I'm still on the fence whether I should adpot the mobile-first method going forward. There are many more projects to come and time will tell.
Overall, this sign-up form project was challenging yet educational. I'm pretty happy with it.
- You have to fork this repo first. Github has a their own step-by-step guide with pictures to follow along.
- Note: You have the option of changing the name of your forked repo.
- And to have all the files locally on your computer, open Terminal -> change the current directory to the directory you want to put this forked repo. Then, enter the command line below:
git clone https://github.com/[your-username]/form.git
- Note: If you change the name of your forked repo, replace 'form.git' with '[your-forked-repo-name].git'. Github will automatically do this for you when you copy the link.
- Finally, change to your new forked repo directory.
cd form
or
cd [your-forked-repo-name]
Please feel free to reach out if you need any help with this repo. 👉🏼 [email protected]
- Log and checkmark from ProofHub
- Speech bubble created by Freepik - Flaticon
- Eye open created by Dave Gandy - Flaticon
- Eye closed created by Dave Gandy - Flaticon