Titans Badminton

The Problem

The Titans Badminton CCA needed a modern, centralized digital platform to market the club to prospective students and streamline their member onboarding process. Previously, sign-ups and club announcements were handled manually, leading to fragmented communication and a poor user experience.

The Solution

Focusing on robust UX/UI principles, I designed and developed a fully responsive website utilizing Bootstrap 5. This ensured a consistent and accessible layout across all devices, from laptops to mobile phones.

Beyond the layout, I integrated interactive JavaScript elements to modernize the onboarding process. This included dynamic form validation to provide immediate feedback during sign-ups, reducing administrative friction for the CCA leaders.

1_homepage_desktop.png

< >

Dynamic Form Validation

Using vanilla JavaScript to intercept form submissions, check constraints, and trigger Bootstrap's visual validation states before processing new members.

// Form Validation Logic for Member Sign-up
const signupForm = document.getElementById('signupForm');

signupForm.addEventListener('submit', function(event) {
                    event.preventDefault();
    
                    if (!signupForm.checkValidity()) {
                    event.stopPropagation();
                    signupForm.classList.add('was-validated');
    } else {
        alert('Welcome to Titans Badminton! Your application is submitted.');
                    signupForm.reset();
                    signupForm.classList.remove('was-validated');
    }
});