Simple Log-in / Sign-up Form

Overview

The system allows users to switch between login and registration forms using Bootstrap pills, submit their details, and have their information validated and stored using JavaScript. The focus of the project is on user-friendly design, form validation, and front-end logic without a backend.

Mission

• To create a clean, accessible, and functional authentication interface.
• Demonstrate front-end development skills, including responsive UI design, JavaScript validation, and structured data handling.
• Simulate real-world form behavior while reinforcing best practices in client-side development.

Links

Key Features

• Tabbed Login & Registration Forms
• Custom JavaScript Validation
• User Data Storage
• Responsive Design
• Clean UI Styling
• Form Reset on Success

Tech Stack

Tools

VS Code

Frontend

• HTML5: Semantic structure and content
• CSS3: Styling, layout, animations, and responsiveness
• Bootstrap 5:Layout, tabs (pills), buttons, and responsive components
• JavaScript (Vanilla JS): Interactivity and dynamic behavior

Website Screenshots

Lessons Learned

• The importance of custom validation versus relying only on HTML required attributes.
• Gained experience handling form submissions using JavaScript events.
• Understood why IDs are better than class names when accessing form inputs.
• How to store structured data using arrays of objects.
• Improved understanding of Bootstrap components and how they interact with JavaScript.
• Client-side validation improves user experience, but backend validation is still required in real applications.