How to create a registration page with email OTP Verification system using html and php

October 29, 2024 Add Comment
How to create a email verificaiton system

 

How to create a registration page with email OTP  Verification system

In the digital age, where security is critical, OTP (One-Time Password) verification has emerged as a reliable way to ensure the safety of user accounts and sensitive information. In this tutorial, we’ll explore how to implement a PHP-based OTP verification system that securely verifies a user's email address during signup, preventing unauthorized access and protecting user data. Let’s break down each component of this system, from user input validation to database management and email handling with PHPMailer.



1. Understanding OTP Verification and Its Importance

OTP verification adds a layer of security by requiring users to enter a temporary, one-time password sent to their email before completing registration. This extra step ensures that the person signing up has access to the provided email address. For websites handling sensitive data, such as online stores, banks, or management systems, OTP verification helps mitigate risks associated with fake registrations, spam, and unauthorized access.

2. Overview of OTP Sending System

This system relies on a combination of PHP, MySQL, JavaScript, and PHPMailer to achieve a streamlined user experience. Here’s a quick rundown of the tools:

  • PHP: Handles the server-side logic, from processing form submissions to interacting with the database.
  • JavaScript: Generates the OTP dynamically on the client-side for secure transmission and display.
  • MySQL: Stores user information and tracks the OTP verification status, ensuring data integrity.
  • PHPMailer: A powerful library to handle email functionality, allowing us to send emails via SMTP with high reliability and minimal effort.  click here to Download PHP mailer 
php mailer from github.

 

3. Setting Up the Signup Form with Bootstrap for Responsiveness

The signup form’s user interface is designed using Bootstrap to provide a modern and responsive design. The form includes fields for name, phone, email, and password, making it simple for users to sign up. Each input field has an accompanying icon for better UX, and the entire form is housed within a styled container to enhance the aesthetic appeal.

The form’s layout is responsive, adapting seamlessly to various screen sizes, so users can complete their registration on both mobile and desktop devices. Additionally, each form field includes validation attributes to ensure users enter their details correctly, reducing potential errors.

4. Generating a Random OTP with JavaScript

To create a unique OTP for each signup attempt, JavaScript generates a random six-digit number every time the signup form is loaded. This OTP is embedded in the form as a hidden field, which is then submitted alongside other user details to the backend.

To ensure the OTP remains unique, JavaScript stores the last generated number in the browser’s local storage. This prevents duplicate OTPs from being generated during successive attempts, making the process secure and reliable. This feature also helps to minimize server load since the OTP is generated on the client side, saving server resources for handling database operations and sending emails.

5. Handling Form Data and Saving OTP in the Database

Once the form is submitted, the PHP script processes the input data and connects to the MySQL database. Here, user details, along with the OTP and IP address, are inserted into an otp table. Storing the IP address adds an additional layer of verification, allowing the system to cross-check the origin of requests and detect potential misuse.

In the database, the OTP is marked with a "pending" status until the user successfully verifies it. This approach helps track unverified OTPs, ensuring users complete the verification step. Should an OTP remain unverified, it can be automatically invalidated after a certain period, further enhancing security.

Database name is sent_otp and table name is otp

table content:

  • name
  • email
  • phone
  • password
  • otp
  • otp_send_time
  • verify
  • ip
  • status 

6. Using PHPMailer to Send the OTP to the User’s Email

Once the data is saved, the script initiates an email using PHPMailer. This PHP library simplifies email sending by connecting to an SMTP server (in this case, Gmail’s SMTP server) and delivering the OTP directly to the user's email. PHPMailer handles both plain text and HTML emails, making it versatile for various applications.

By using SMTP authentication with secure encryption, PHPMailer ensures that the email containing the OTP is delivered securely to the recipient. If there’s an error during this process, the user receives feedback, helping them understand if any issues arise.

7. Verifying the OTP Code and Updating the Database

After receiving the OTP email, the user inputs the code into the OTP verification form. When the form is submitted, PHP fetches the latest OTP associated with the user’s IP address from the database and compares it with the user’s input.

If the OTP matches, PHP updates the OTP status in the database from "pending" to "verified," indicating successful verification. Users are then redirected to a confirmation page, completing the signup process. If the OTP doesn’t match, the user receives an error message, prompting them to re-enter the code or request a new OTP if needed.

8. Handling Errors and User Feedback

User experience is essential in any application. This system includes JavaScript-based error handling for the OTP generation and PHP-based error handling during the form submission and database interactions. For instance, if there’s a database error while saving the OTP, the user is informed immediately, preventing confusion and frustration.

Moreover, email feedback ensures that users know the status of their OTP, whether it’s been successfully sent, delivered, or encountered an issue. This level of feedback promotes a smooth user experience, guiding users through the verification process without unnecessary friction.

9. Securing Sensitive Data

With sensitive data being transferred, security is a top priority. Passwords are stored securely using strong hashing algorithms, and the database only saves necessary data. By focusing on security in both email transmission and database storage, this OTP verification system minimizes vulnerabilities and keeps user data safe.

 

10.Verification Success page

After successful verification .it will redirects into a page called success.php.It will created by html and css. Click here to download success.php

 

11.Login page.

After successful  verification. It will refer into a page login.php.click here to download login.php

Check the page carefully to download the login form .


Full Tutorial of OTP Email verification system

Ending:

OTP verification significantly improves the security of user registration processes, and implementing it in PHP with PHPMailer offers a reliable way to verify user identity. With this approach, you ensure that each new user is authentic and that their details are secure. Whether for websites handling sensitive data or applications aiming for better account security, OTP verification is a practical and essential step. By following this guide, you can implement a secure and user-friendly signup process that instills confidence in your users and protects their data effectively.

 

  •  Create a admin dashboard

  •  Realtime live chat System

    •

    hospital management system diagram

    October 18, 2024 1 Comment
    Procoder Arif

     About This Project. Diagram of Hospital Management System


    🏥 Hospital Management System


    👨👨Front-End Side



    1.Live Chat option.

    2.User Can check their Appointment status.

    3.User can send online Appointment Request.

    4.User can download/see their Invoice/report in online.

    5.Applicant can apply for job.


    👨💼 Admin Login



    1. Approve/Deny/View Job Applications: Manage applicant requests with ease.

    2. View Total Staff/Doctor/Patient Info: Get an overview of all hospital personnel and patients.

    3. Edit/Change/Remove Staff: Update staff details or remove them from the system.

    4. View Total Income: Check the hospital’s total income.

    5. Add New Staff: Include new doctors, employees, or account managers.

    6. Add Admins: Main admin can add additional admins.

    7. Send Notices/Warnings: Communicate important information or warnings to staff.

    8. Manage Job Applications: Toggle the visibility of job application forms.


    🩺 Doctor Login



    1. View Appointments: Check appointments according to their department.

    2. Charge Patients: Set charges for patient services as needed.

    3. Edit Profile: Update their profile or username.

    4. View Salary Status: Track their salary and payment details.

    5. Prescribe Medicine: Provide prescriptions for patients.


    🏥 IPD/OPD Login



    1. Manage Profile: Edit username/password and view their profile.

    2. Approve/Deny Patient Applications: Review and manage patient admissions.

    3. Register/Admit Patients: Handle patient registration and admission.

    4. Print Prescriptions: Print out patient prescriptions.

    5. Provide Patient ID: Issue patient IDs.

    6. Billing Activities: Perform billing tasks and manage payments.

    7. View Income/Bills: Monitor total income and billing information.

    8. Generate Reports/Invoices: Produce detailed invoices and reports.


    See the full Project Tutorial

    sourced from Freepik

    🧑⚕️ Staff Login



    1. Upload Patient Reports: Save patient reports to the server/database.

    2. Upload Invoices: Manage and upload patient invoices.

    3. Edit Profile: Update their profile and personal information.

    4. Register Patients: Handle patient registration processes.

    5. Provide Reports: Share patient reports within their dashboard.


    👩⚕️ Patient Login



    1. Request Appointments: Send appointment requests from their dashboard.

    2. View Reports/Invoices: Access and view their medical reports and invoices.

    3. Download Records: Download reports and invoices from their dashboard or homepage.

    4. Edit Profile: Update personal details, username, and password.

    5. Submit Complaints: Report any issues or poor service regarding staff or hospital services.

    Full Hospital Management System you can download From here.

    download full project source code

    diagram of a hospital management system,hospital erp system,module of a hospital management system, how to make a full stack hms system, learn php

  •  Create a admin dashboard

  •  Realtime live chat System

  •   OTP Email Verification System

    •

    How to make real time live chat system for website

    October 10, 2024 Add Comment
    How to create a live chat system for website

    Make Real-Time Live Chat System with PHP, MySQL, and AJAX

    Creating a real-time chat application is one of the most interesting and popular web development tasks. This blog post will guide you through building a basic real-time chat system using PHP, MySQL, and AJAX. We will not go deep into the coding aspects but focus on how this system works and what each part does to bring everything together. Let's explore the architecture and processes that make this chat app functional and dynamic.

    How to integrate live chat system on a website


    Project Requirement file 

       For User side

    • user_chat.php
    • fetch_user_sms.php
    • send_message.php
    For Admin side

    • admin_chat.php
    • fetch_admin_sms.php
    • send_message.php



    1. Understanding the Architecture of the Chat System

    A chat application involves multiple parts working together to ensure real-time communication between the user and admin (or other users). These parts include:

    • Frontend: This is the user interface where users interact with the chat system. It consists of HTML, CSS, and JavaScript (with AJAX to send and receive messages without reloading the page).
    • Backend: This is the server-side logic handled by PHP, which connects to the database and processes the requests.
    • Database: MySQL is used to store the messages exchanged between the users and admin, ensuring persistent data that can be fetched and displayed at any time.

    Each of these components plays a crucial role in enabling real-time chat functionality.

    2. Setting Up the Database

    The database is the backbone of this system. In this chat application, the database named live_chat holds a messages table where each message exchanged between users is stored. The table typically has columns for:

    • id: A unique identifier for each message.
    • message: The content of the message.
    • sender: This indicates who sent the message (either the user or the admin).
    • created_at: The timestamp when the message was sent.

    This structure allows the system to track and display conversations in the correct order, offering a seamless experience for users.

    3. Handling Chat Functionality on the Frontend

    The frontend is where users interact with the chat system. It consists of a simple chat interface with the following components:

    • Chat Box: The central area where users can see their messages and send new ones.
    • Messages Section: The part that displays the chat history. It automatically updates by fetching messages from the database without reloading the page. Messages are dynamically styled based on whether they come from the user or the admin.
    • Message Input: This is the text box where users type their messages. Once the message is submitted (by pressing a button or hitting 'Enter'), it is sent to the server via AJAX.

    4. Using AJAX for Real-Time Communication

    AJAX (Asynchronous JavaScript and XML) plays a key role in making the chat system real-time. It allows the frontend to communicate with the server without refreshing the entire page. The chat system uses AJAX in two ways:

    1. Fetching Messages: Every few seconds, the frontend sends an AJAX request to the server to fetch new messages from the database. Once the server responds with the messages, they are dynamically displayed in the chat window.
    2. Sending Messages: When a user sends a message, an AJAX request is sent to the server, passing the message content and the sender's information. The server then stores this data in the database and responds to the frontend.

    This asynchronous communication ensures that users see new messages in real-time without experiencing any delays or interruptions.

    5. Backend: Storing and Fetching Messages

    The backend is powered by PHP, which connects to the MySQL database to store and retrieve messages. Here's how it works:

    • Sending Messages: When a user sends a message, PHP handles the incoming request and stores the message and sender information in the messages table. This operation is simple, using an INSERT query to save the data.
    • Fetching Messages: Periodically, the frontend requests new messages from the server. PHP fetches all the messages from the database (or only the new ones, depending on how it's configured) and returns them as HTML elements that are injected into the chat window.

    6. Auto-Scrolling and Message Formatting

    To improve the user experience, the chat system automatically scrolls to the latest message when new messages arrive. This is achieved by manipulating the DOM using JavaScript, ensuring that the chat window always stays at the bottom, where the most recent messages are located.

    Additionally, messages from the admin and users are styled differently. For example:

    • Admin messages might have a blue background, white text, and be aligned to the right.
    • User messages could have a gray background, black text, and be aligned to the left. This visual distinction makes it easy for users to follow the conversation.

    7. Clearing the Chat History

    The chat system also includes a feature to clear the chat history. When the user or admin clicks the "delete" button, an AJAX request is sent to the server to delete all messages from the database. Once the messages are deleted, the frontend is updated to reflect this change, and the chat window is cleared.

    8. Improving User Experience

    The system is designed with user convenience in mind:

    • Real-time updates: Users can see messages in real-time without refreshing the page.
    • Simple UI: The interface is clean, minimalistic, and easy to use. It allows for smooth interaction, making it intuitive for users of all levels.
    • Keyboard Shortcuts: Users can press 'Enter' to send messages, making the chat flow faster.

    9. Future Enhancements

    While this system works well for basic communication, several enhancements can be made:

    • Authentication: Adding user authentication would allow multiple users to chat securely. Each user could have their unique chat session with the admin or other users.
    • Private Messaging: Implementing a private messaging feature where users can chat with each other privately, aside from the public chat.
    • Notification System: Sending notifications when a new message is received can improve the real-time experience further.
    !Important Note: 
    1. Javascript code is both for admin_chat.php
    2.  and user_chat.php is same.
    3.   Check the system chatbox id and input id .if here you can do any mistake the                         javascript code will not work.
    4. Check all tagg carefully to integrate the live chat system perfectly.
    5.  Check the onclick element value carefully.It will controlled by jabascript.
    6.   If you miskte any onclick value elements like onclick(messageHeader).javascript                 cannot identify its in putted command.
    7. Type carefull css styles coding to design and give smooth performance.
    8. check ajax attribution carefully.
    9. check boostrape and javascript cdn inputted in header section carefully or not.if you mistake any cdn it will not work properly.
    10. check the database creation process like table,column.
    Copy the javascript code and paste it on before </body> tag.

    How to create a realtime live chat system full tutorial

    function fetchMessages() { const xhr = new XMLHttpRequest(); xhr.open("GET", "fetch_ipd_sms.php", true); xhr.onload = function () { if (this.status === 200) { document.getElementById("messages").innerHTML = this.responseText; const messagesDiv = document.getElementById("messages"); messagesDiv.scrollTop = messagesDiv.scrollHeight; // Auto-scroll to latest message } }; xhr.send(); } // Set interval to fetch new messages every 2 seconds setInterval(fetchMessages, 2000); // Function to send message without reload function sendMessage() { const message = document.getElementById("message").value; if (message.trim() === "") return; const xhr = new XMLHttpRequest(); xhr.open("POST", "send_message.php", true); xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhr.onload = function () { if (this.status === 200) { document.getElementById("message").value = ''; // Clear input after sending fetchMessages(); // Fetch new messages after sending } }; xhr.send("message=" + encodeURIComponent(message) + "&sender=admin"); } // Function to delete all messages function deleteMessages() { if (confirm("Are you sure you want to delete all messages?")) { const xhr = new XMLHttpRequest(); xhr.open("POST", "", true); xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhr.onload = function () { if (this.status === 200) { document.getElementById("messages").innerHTML = ''; // Clear messages on frontend } }; xhr.send("delete=1"); } } // Initial call to fetch messages when page loads fetchMessages(); document.getElementById("message").addEventListener("keydown", function(event) { if (event.key === "Enter") { event.preventDefault(); // Prevents the default action of pressing "Enter" sendMessage(); } });

    Conclusion

    Building a real-time chat application using PHP, MySQL, and AJAX is a fantastic way to learn the fundamentals of asynchronous communication and real-time data updates. By leveraging these technologies, you can create a responsive and dynamic user experience without needing advanced technologies like WebSockets.

    How to Create a Attractive animated Sign Up and Login Form

    October 05, 2024 Add Comment
    Make animate multirole based login form

     How to Create a Attractive animated Sign Up and Login Form

    Create an attractive and dynamic login and signup form with slide animations and smooth transitions. This animated form features transforming login and signup sections, stylish input fields, and interactive elements using HTML, CSS, and JavaScript. The registration form includes visually appealing animations for a seamless user experience. Perfect for modern websites, this form offers responsive design, rotating backgrounds, and engaging transitions that enhance user interaction. Learn how to implement an attractive, fully functional, and animated signup and login form with CSS animations and JavaScript effects for your projects.




    1. HTML Structure

    a. Document Setup:

    • The document begins with the standard <!DOCTYPE html> declaration, specifying HTML5.
    • The <html> tag includes a lang attribute set to "en" for English.
    • Within the <head>, meta tags ensure proper character encoding (UTF-8) and responsive design through the viewport settings.
    • The <title> is set to "Login Form".
           Code for head section:
            
            Copy the bootstrape Cdn and link and paste it between 
    <head>


    <!-- FontAwesome CDN --> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet"> <!-- Boxicons CDN --> <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'> <!-- Google Fonts --> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> <!-- Custom CSS --> <link rel="stylesheet" href="style.css">
    </head>

    b. External Resources:

    • Font Awesome and Boxicons: These icon libraries are included via CDN links, enabling the use of various icons within the form.
    • Google Fonts: The "Poppins" font family is imported, providing a modern and clean typography.
    • Custom CSS and JS: Links to style.css for styling and script.js for functionality are included, though in the provided snippet, CSS and JS are embedded.

    c. Body Structure:

    • The <body> contains a <div> with the class wrapper, serving as the main container for the form elements.
    • Background Elements: Two <span> elements with classes rotate-bg and rotate-bg2 are used to create dynamic background effects through CSS transformations.
    Code for body :

    Copy and pste the code according to my instructions.

     <body> 
    <div class="wrapper">
            <span class="rotate-bg"></span>
            <span class="rotate-bg2"></span>
    </body> 
    those you are copied from the box

    d. Login Form:


     create a div below the 

    • <span class="rotate-bg2"></span>
    •  new div <div class="form-box login" style="left: 10px;">
      • Then copy the login form code from here and paste it  after <div class="form-box login" style="left: 10px;">
    <div class="form-box login">
    <form id="loginForm" action="" method="post">
    <div class="input-box">
    <input type="text" name="username" required placeholder=" ">
    <label>Username</label>
    <i class='bx bxs-user'></i>
    </div>
    <div class="input-box">
    <input type="password" name="password" required placeholder=" ">
    <label>Password</label>
    <i class='bx bxs-lock-alt'></i>
    </div>
    <button type="submit" class="btn">Login</button>
    <div class="linkTxt">
    <p>Don't have an account? <a href="#" class="register-link">Sign Up</a></p>
    </div>
    </form>
    </div>
    Login Form code 
    • A <div> with classes form-box and login houses the login form.
    • The form includes inputs for username and password, each encapsulated within input-box divs that also contain labels and icons.
    • A submit button labeled "Login" is provided.
    • A link prompting users to "Sign Up" if they don’t have an account is included, enhancing user navigation.

    e. Registration Form:

    • Similarly, a <div> with classes form-box and register contains the signup form.  <div class="form-box register">
    Code for Registration Form
    <!-- Registration Form --> <div class="form-box register"> <form action="#" class="signup-form2"> <div class="form-row"> <div class="input-box animation" style="--i:18; --j:1"> <input type="text" name="full_name" required> <label>Name</label> <i class='bx bxs-user'></i> </div> <div class="input-box animation" style="--i:19; --j:2"> <input type="email" name="email" required> <label>Email</label> <i class='bx bxs-envelope'></i> </div> <div class="input-box animation" style="--i:19; --j:2"> <input type="text" name="phone" required> <label>Phone</label> <i class='bx bxs-phone'></i> </div> <div class="input-box animation" style="--i:20; --j:3"> <input type="text" name="username" required> <label>Username</label> <i class='bx bxs-lock-alt'></i> </div> </div> <div class="form-row"> <div class="input-box animation" style="--i:22; --j:5"> <input type="password" name="password" required> <label>Password</label> <i class='bx bxs-key'></i> </div> </div> <button type="submit" class="btn animation" style="--i:24; --j:7">Sign Up</button> </form> <!-- Info Text for Register --> <div class="info-text register"> <h2 class="animation" style="--i:17; --j:0;">Apply For Admin Access</h2> <p class="animation" style="--i:18; --j:1; color: #1cb09a;">Wait for Admin approval after Submit form.</p> <div class="linkTxt animation" style="--i:25; --j:8"> <p>Already have an account? <a href="#" class="login-link" style="color:#ebe707;">Login</a></p> </div> </div> </div> <!-- Script.js --> <script src="script.js"></script>


    • This form collects additional information such as full name, email, and phone number, alongside username and password fields.
    • A submit button labeled "Sign Up" facilitates form submission.
    • A link is provided for users who already have an account to return to the login form.

    f. Info Text Sections:

    • Two separate <div> elements with classes info-text and either login or register provide contextual information to the user, such as welcoming messages and instructions.
    • These sections are designed to complement the forms and enhance the user experience with descriptive text.

    2. CSS Styling and Layout

    a. Root Variables:

    • CSS custom properties (variables) are defined under :root for colors like white, black, and a custom light blue (--lightBulue). These variables ensure consistent color usage throughout the form.

    b. Global Styles:

    • A universal selector (*) resets margins and paddings and sets the box-sizing to border-box for consistent element sizing.
    • The font-family is set globally to 'Poppins' for a uniform typography.

    c. Body and Wrapper:

    • The body is styled to center the wrapper both horizontally and vertically, ensuring the form is always centered on the screen.
    • The .wrapper class defines a fixed size (750px by 450px), a white background, solid border, rounded corners, and a subtle box shadow for depth. It also employs overflow: hidden to manage content that exceeds its boundaries, crucial for the rotating background effects.

    d. Form Boxes:

    • The .form-box class positions the forms absolutely within the wrapper, each taking up 50% of the width and 100% height.
    • The login form is positioned to the left, while the register form is positioned to the right.
    • Padding is applied to ensure adequate spacing within the forms.

    e. Input Fields:

    • Each .input-box is relatively positioned to contain the input, label, and icon.
    • Inputs are styled to be transparent with no borders except for a bottom border, which changes color on focus or when valid.
    • Labels are absolutely positioned to overlap the inputs and transition smoothly upwards when the input is focused or filled, creating a floating label effect.
    • Icons are positioned inside the input fields, changing color upon interaction to provide visual feedback.

    f. Buttons:

    • Submit buttons are styled with full width, a distinct background color (black), white text, rounded edges, and a hover effect that adds a subtle box shadow, enhancing interactivity.

    g. Links and Text:

    • Informational text is styled for clarity and visual hierarchy.
    • Links within the forms are emphasized with distinct colors and hover effects to guide user actions effectively.

    h. Animations:

    • Elements with the .animation class are set up to animate transitions, such as moving into view or fading in.
    • CSS variables --i and --j are used to calculate transition delays dynamically, allowing for staggered animations that enhance visual engagement.

    i. Rotating Backgrounds:

    • The .rotate-bg and .rotate-bg2 classes create dynamic background shapes that rotate and skew, adding a modern and dynamic aesthetic to the form.
    • Transitions are applied to these elements to animate their transformations when toggling between login and signup forms.

    j. Active States:

    • The .wrapper.active class toggles the visibility and positions of the form boxes and informational texts.
    • When active, the login form moves out of view while the registration form comes into focus, and vice versa.
    • Transformations and transitions are smoothly animated to ensure a seamless user experience.
    Code for css
    Copy the Css code (file name should be style.css)
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap'); :root{ --white: #fff; --black: #000; --lightBulue: #17a; } *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; } .wrapper{ position: relative; width: 750px; height: 450px; background: var(--white); border: 2px solid var(--black); border-radius: 10px; box-shadow: 0 0 20px var(--black); overflow: hidden; } .wrapper .form-box{ position: absolute; top: 0; width: 50%; height: 100%; display: flex; justify-content: center; flex-direction: column; } .wrapper .form-box.login{ left: 0; padding: 0 60px 0 40px; } .form-box h2{ margin-bottom: 10px; position: relative; font-size: 32px; color: var(--black); text-align: center; } .form-box h2::after{ content: ""; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 40px; height: 4px; background: var(--black); } .form-box .input-box{ position: relative; width: 100%; height: 50px; margin: 25px 0; } .input-box input{ width: 100%; height: 100%; background: transparent; color: var(--black); font-size: 16px; font-weight: 500; border: none; outline: none; border-bottom: 2px solid var(--black); transition: .5s; padding-right: 23px; } .input-box input:focus, .input-box input:valid{ border-bottom-color: var(--lightBulue); } .input-box label{ position: absolute; top: 50%; left: 0; transform: translateY(-50%); font-size: 16px; color: var(--black); pointer-events: none; transition: 0.5s; } .input-box input:focus~label, .input-box input:valid~label{ top: -5px; color: var(--lightBulue); } .input-box i{ position: absolute; top: 50%; right: 0; transform: translateY(-50%); font-size: 18px; transition: 0.5s; } .input-box input:focus~i, .input-box input:valid~i{ color: var(--lightBulue); } form button{ width: 100%; height: 45px; background-color: var(--black); color: var(--white); border: none; outline: none; border-radius: 40px; cursor: pointer; font-size: 16px; font-weight: 600; transition: .3s; } form button:hover{ box-shadow: 0 0 10px rgba(0, 0, 0, 0.8); } form .linkTxt{ font-size: 14px; color: var(--black); text-align: center; margin: 20px 0 10px; } .linkTxt p a{ color: blue; text-decoration: none; font-weight: 600; } .wrapper .form-box.login .animation{ transform: translateX(0); transition: 0.7s ease; opacity: 1; filter: blur(0); transition-delay: calc(.1s * var(--j)); } .wrapper.active .form-box.login .animation{ transform: translateX(-120%); opacity: 0; filter: blur(10px); transition-delay: calc(.1s * var(--i)); } .wrapper .info-text{ position: absolute; top: 0; width: 50%; height: 100%; display: flex; flex-direction: column; justify-content: center; } .wrapper .info-text.login{ right: 0; text-align: right; padding: 0 40px 60px 150px; } .wrapper .info-text h2{ font-size: 36px; color: var(--white); line-height: 1.3; text-transform: uppercase; } .wrapper .info-text p{ font-size: 16px; color: var(--white); } .wrapper .info-text.login .animation{ transform: translateX(0); opacity: 1; filter: blur(0); transition: 0.7s ease; transition-delay: calc(.1s * var(--j)); } .wrapper.active .info-text.login .animation{ transform: translateX(120px); opacity: 0; filter: blur(10px); transition: 0.7s ease; transition-delay: calc(.1s * var(--i)); } .wrapper .rotate-bg{ position: absolute; top: -4px; right: 0; width: 850px; height: 600px; background: #000; transform: rotate(10deg) skewY(40deg); transform-origin: bottom right; transition: 1.5s ease; transition-delay: .9s; } .wrapper.active .rotate-bg{ transform: rotate(0) skewY(0); transition-delay: 0.5s; } .wrapper .form-box.register{ padding: 0 40px 0 60px; right: 0; } .wrapper.active .form-box.register{ pointer-events: auto; } .wrapper .form-box.register .animation{ transform: translateX(120%); opacity: 0; filter: blur(10px); transition: .7s ease; transition-delay: calc(.1s * var(--j)); } .wrapper.active .form-box.register .animation{ transform: translateX(0); opacity: 1; filter: blur(0); transition-delay: calc(.1s * var(--i)); } .wrapper .info-text.register{ left: 0; text-align: left; padding: 0 150px 60px 40px; pointer-events: none; } .wrapper.active .info-text.register{ pointer-events: auto; } .wrapper .info-text.register .animation{ transform: translateX(-120%); opacity: 0; filter: blur(10px); transition: .7s ease; transition-delay: calc(.1s * var(--j)); } .wrapper.active .info-text.register .animation{ transform: translateX(0); opacity: 1; filter: blur(0); transition-delay: calc(.1s * var(--i)); } .wrapper .rotate-bg2{ position: absolute; top: 100%; left: 250px; width: 1050px; height: 700px; background: var(--white); transform: rotate(0) skewY(0); transform-origin: bottom left; transition: .9s ease; transition-delay: 0.5s; } .wrapper.active .rotate-bg2{ transform: rotate(-11deg) skewY(-44deg); transition-delay: .8s; }


    3. JavaScript Functionality

    a. Selecting Elements:

    • The script begins by selecting key elements from the DOM:
      • The .wrapper div, which contains all form elements.
      • The .register-link and .login-link anchors, which users click to switch between forms.

    b. Event Listeners:

    • Register Link Click: When a user clicks the "Sign Up" link, the script adds the active class to the wrapper, triggering CSS transitions that shift the view to the registration form. It also calls the animateElements function to handle additional animations.
    • Login Link Click: Conversely, clicking the "Login" link removes the active class, reverting the view back to the login form and re-triggering animations.

    c. Animation Function:

    • The animateElements function selects all elements with the .animation class and toggles the active class based on whether the wrapper currently has the active class.
    • This dynamic class toggling ensures that all animated elements respond appropriately to state changes, maintaining visual consistency and fluidity in transitions.

    4. User Experience and Interaction

    a. Responsive Design:

    • The form is designed to be centered and maintains its layout across various screen sizes due to the flexible units and responsive CSS properties.

    b. Visual Feedback:

    • Interactive elements like input fields and buttons provide immediate visual feedback through color changes and transitions, enhancing usability.

    c. Smooth Transitions:

    • The use of CSS transitions and JavaScript-controlled class toggling ensures that switching between login and signup forms is smooth and visually appealing, reducing user friction.

    d. Accessibility Considerations:

    • Proper use of labels linked to inputs ensures that the form is accessible to screen readers.
    • High-contrast colors and clear typography improve readability.

    5. Overall Implementation Strategy

    a. Separation of Concerns:

    • The structure maintains a clear separation between HTML for content, CSS for styling, and JavaScript for behavior, adhering to best practices.

    b. Reusability and Maintainability:

    • Using CSS variables for colors and reusable classes like .input-box and .animation promotes consistency and simplifies maintenance.

    c. Progressive Enhancement:

    • The form is fully functional even if JavaScript is disabled, ensuring basic usability. Enhanced features like animations rely on JavaScript but don't break the core functionality.

    d. Scalability:

    • The modular approach allows for easy addition of new features or modifications without significant overhauls to the existing codebase.

    6. Potential Enhancements and Considerations

    a. Form Validation:

    • While the HTML uses the required attribute for basic validation, implementing more robust validation in JavaScript could enhance security and user experience.

    b. Responsive Adjustments:

    • Further media queries could ensure optimal display on mobile devices, adjusting widths and layouts as needed.

    c. Accessibility Improvements:

    • Adding ARIA attributes and ensuring keyboard navigability would make the form more accessible to all users.

    d. Backend Integration:

    • Connecting the forms to a backend system would enable actual user authentication and data storage, transforming the static forms into functional components.

    e. Enhanced Security:

    • Implementing measures like HTTPS, input sanitization, and protection against common vulnerabilities (e.g., SQL injection, XSS) is crucial for a production environment.
    Code for Javascript (script.js)

    This Project Consists of 3 files

    1. index.html
    2. style.css
    3. script.js
    const wrapper = document.querySelector('.wrapper'); const registerLink = document.querySelector('.register-link'); const loginLink = document.querySelector('.login-link'); // When the register link is clicked registerLink.addEventListener('click', () => { wrapper.classList.add('active'); animateElements(); }); // When the login link is clicked loginLink.addEventListener('click', () => { wrapper.classList.remove('active'); animateElements(); }); // Function to add 'active' class to animation elements for triggering CSS transitions function animateElements() { const animations = document.querySelectorAll('.animation'); animations.forEach(element => { if (wrapper.classList.contains('active')) { element.classList.add('active'); } else { element.classList.remove('active'); } }); }

    7. Conclusion

    The provided login and signup form is a thoughtfully designed interface that balances aesthetics with functionality. Through meticulous structuring in HTML, elegant styling and animations in CSS, and dynamic interactivity via JavaScript, the form offers users an engaging and seamless experience. By adhering to best practices in web development, such as separation of concerns and responsiveness, the implementation stands as a robust foundation for further enhancements and integration into larger systems.

     

    Subscribe to: Posts (Atom)