JavaScript projects for Beginners | Building an Instagram Clone part 2
This is the second episode of this series where I build an Instagram full-stack web application clone. I use primarily HTML, CSS, and JavaScript to develop the frontend side, and in these 2 episodes, I mainly focused on the login/signup page. It is going to be a multi-page application, therefore I have to use different methods this time to develop this project.
Today, the fundamental logic is going to take the validation of the forms, the showing/hiding of the forms, and also displaying the error messages, if there be.
Be careful, because this validation only accounts for the frontend side, basically makes sure that the request to the API is sent in a standard and correct way, following some basic rule: in this case no empty strings, the password must be longer than 6 characters.
Another validation should be done on the server-side, and that is both for best practice and security: These forms are actually going to put data into the database, important data, and I want to be sure not to put any malicious code or unpredictable thing inside the database.
So best practice dictates that validation is done both on the frontend and backend side, and being a full-stack developer you have to know this.
Then displaying the message is a funny business. There is plenty of ways one could do it: I like to create a function to compose the message, since there can be multiple error message, or failed things, and then once the messages are put into a receiver div, I display that div. You could do something different where each wrong input is highlighted, and a small error message appears beside it. The choice is yours, I like this because is simple, easy to read and very straightforward. If it's wrong, it's wrong.
And last showing and hiding the forms, probably the simplest thing in this bunch. Just select the 2 divs that have to appear/disappear and add some logic to put or remove the class that makes them visible. Very simple and basic, and it is a must-have requirement for full-stack developers out there, junior included. Knowing how to conditionally render or display something on a webpage.
In the next episode, I'll create the main dashboard, where you can see the pictures, and it will be a private page so to get there, you must sign in. To enjoy more content like this one don't forget to subscribe and if you'd like to help this channel, leave a like and share. And also comments, I love to read your comments and adjust these videos to your liking as much as I can.
As always, stay tuned for more, bye-bye.
BeGeos
Social:
Twitter: / begeosdev
GitHub: https://github.com/BeGeos
Timestamps:
00:00 Episode 2 to build an Instagram Clone
00:56 Organise things to do
2:05 Showing/Hiding Login and Signup Forms
9:18 Validation of the input fields
39:21 Test Validation for Login and SignUp
45:00 What's next?
