Learn web development

Procoder Arif

JavaScript:

The JavaScript handles the interactive part of the form. When the "Show Password" checkbox is toggled, it dynamically switches the password input field between hidden (password) and visible (text) modes. Additionally, it changes the image of the girl, reflecting the action—when the password is hidden, the girl is shown covering her eyes, and when it’s visible, she is shown with her hands removed. This is achieved by adding or removing CSS classes that correspond to different images.

CSS:

The CSS defines the overall look and feel of the form, focusing on layout and transitions. Key CSS elements include:

Image Styling: The girl’s image is styled to be circular, with a smooth transition applied to ensure a visually appealing effect when switching images.
Transitions: The transition property is applied to the image to create a smooth effect when it changes from one image to another.
Positioning: The image is positioned within the form using relative and margin properties, ensuring it appears centered above the form fields.

Additionally, CSS controls the visibility of the password by toggling between cover-eyes (dimmer image) and show-eyes (brighter image) classes, which modify the filter and image source.

Bootstrap:

Bootstrap provides the foundation for a responsive and attractive layout. The form is structured using Bootstrap's grid system and utility classes, ensuring it's well-aligned and works across different screen sizes. Some key Bootstrap features used in the form are:

Grid System: Bootstrap’s grid system (col-md-6, container, and row) helps in positioning the form in the center of the page.
Card Component: The form is wrapped in a Bootstrap card component, which provides a clean, modern look with rounded corners and a shadow effect for depth.
Form Controls: The input fields for email and password use Bootstrap’s form controls, making them responsive and styled by default. This ensures consistency across different devices and browsers.
Button Styling: The login button uses Bootstrap’s btn class, which provides a pre-designed, visually appealing button with built-in hover and focus effects.