Professional Student Registration Portal

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Techage Innovations - Student Registration</title>
  <!-- Link to external CSS file -->
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- ===== HEADER SECTION ===== -->
  <header class="header">
    <div class="logo-area">
      <div class="logo-box">TI</div>
      <div>
        <h1>Techage Innovations</h1>
        <p>Learn • Build • Innovate</p>
      </div>
    </div>
  </header>

  <!-- ===== MAIN FORM CONTAINER ===== -->
  <main class="container">
    <div class="form-card">
      <h2>Student Registration Form</h2>
      <p class="subtitle">Fill in your details to join our courses</p>

      <!-- Registration Form Starts -->
      <form id="registrationForm">

        <!-- Full Name Field -->
        <div class="form-group">
          <label for="fullName">Full Name *</label>
          <input type="text" id="fullName" placeholder="e.g. John Doe">
          <small class="error-msg" id="nameError"></small>
        </div>

        <!-- Email Field -->
        <div class="form-row">
          <div class="form-group">
            <label for="email">Email Address *</label>
            <input type="email" id="email" placeholder="john@example.com">
            <small class="error-msg" id="emailError"></small>
          </div>

          <!-- Phone Field -->
          <div class="form-group">
            <label for="phone">Phone Number *</label>
            <input type="tel" id="phone" placeholder="e.g. 9876543210">
            <small class="error-msg" id="phoneError"></small>
          </div>
        </div>

        <!-- DOB and Gender -->
        <div class="form-row">
          <div class="form-group">
            <label for="dob">Date of Birth *</label>
            <input type="date" id="dob">
          </div>

          <div class="form-group">
            <label>Gender *</label>
            <div class="radio-group">
              <label><input type="radio" name="gender" value="Male"> Male</label>
              <label><input type="radio" name="gender" value="Female"> Female</label>
              <label><input type="radio" name="gender" value="Other"> Other</label>
            </div>
            <small class="error-msg" id="genderError"></small>
          </div>
        </div>

        <!-- Course Selection Dropdown -->
        <div class="form-group">
          <label for="course">Select Course *</label>
          <select id="course">
            <option value="">-- Choose a Course --</option>
            <option value="Web Development">Web Development</option>
            <option value="Portal Design">Portal Design</option>
            <option value="PHP/Laravel">PHP / Laravel</option>
            <option value="Python">Python Programming</option>
            <option value="UI/UX">UI/UX Design</option>
          </select>
          <small class="error-msg" id="courseError"></small>
        </div>

        <!-- Address Textarea -->
        <div class="form-group">
          <label for="address">Address</label>
          <textarea id="address" rows="3" placeholder="Enter your full address"></textarea>
        </div>

        <!-- Profile Photo Upload -->
        <div class="form-group">
          <label for="photo">Profile Photo</label>
          <input type="file" id="photo" accept="image/*">
        </div>

        <!-- Terms Checkbox -->
        <div class="form-group checkbox-group">
          <label>
            <input type="checkbox" id="terms">
            I agree to the Terms & Conditions *
          </label>
          <small class="error-msg" id="termsError"></small>
        </div>

        <!-- Buttons -->
        <div class="btn-group">
          <button type="reset" class="btn-secondary">Reset</button>
          <button type="submit" class="btn-primary">Submit Registration</button>
        </div>

      </form>
    </div>
  </main>

  <!-- Success Popup Modal (Hidden by default) -->
  <div id="successModal" class="modal hidden">
    <div class="modal-content">
      <h3>🎉 Registration Successful!</h3>
      <p>Welcome to Techage Innovations. We will contact you soon.</p>
      <button id="closeModal" class="btn-primary">Close</button>
    </div>
  </div>

  <!-- Link to external JS file -->
  <script src="script.js"></script>
</body>
</html>

/* 
  style.css - Student Registration Portal
  Techage Innovations Theme
  Colors: Blue #0A1931 and Orange #FF6B00
*/

/* CSS Variables for theme colors - easy to change */
:root {
  --primary-blue: #0A1931;
  --primary-orange: #FF6B00;
  --light-bg: #f8f9fc;
  --white: #ffffff;
  --text-dark: #1a1a2e;
  --text-gray: #6b7280;
  --border: #e5e7eb;
  --error: #ef4444;
}

/* Reset default browser styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Arial, sans-serif;
  background-color: var(--light-bg);
  color: var(--text-dark);
  line-height: 1.6;
}

/* ===== HEADER STYLES ===== */
.header {
  background-color: var(--primary-blue);
  color: white;
  padding: 18px 0;
}

.logo-area {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
}

.logo-box {
  width: 46px;
  height: 46px;
  background-color: var(--primary-orange);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
}

.logo-area h1 {
  font-size: 20px;
}

.logo-area p {
  font-size: 12px;
  opacity: 0.8;
  letter-spacing: 1px;
}

/* ===== FORM CARD STYLES ===== */
.container {
  max-width: 900px;
  margin: 30px auto;
  padding: 0 20px;
}

.form-card {
  background: var(--white);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 8px 30px rgba(10, 25, 49, 0.08);
  border: 1px solid var(--border);
}

.form-card h2 {
  color: var(--primary-blue);
  font-size: 26px;
  margin-bottom: 4px;
}

.subtitle {
  color: var(--text-gray);
  margin-bottom: 24px;
  font-size: 14px;
}

/* ===== FORM ELEMENTS ===== */
.form-group {
  margin-bottom: 18px;
  flex: 1;
}

.form-row {
  display: flex;
  gap: 20px;
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 14px;
  color: var(--primary-blue);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  outline: none;
  transition: 0.2s;
}

/* Focus effect for inputs */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--primary-orange);
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.15);
}

.radio-group {
  display: flex;
  gap: 18px;
  margin-top: 8px;
}

.radio-group label {
  font-weight: normal;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: normal;
  cursor: pointer;
}

/* Error message style */
.error-msg {
  color: var(--error);
  font-size: 12px;
  margin-top: 4px;
  display: block;
}

/* ===== BUTTONS ===== */
.btn-group {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.btn-primary {
  background-color: var(--primary-orange);
  color: white;
  border: none;
  padding: 12px 26px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  flex: 1;
  transition: 0.2s;
}

.btn-primary:hover {
  background-color: #e55f00;
  transform: translateY(-1px);
}

.btn-secondary {
  background-color: white;
  color: var(--primary-blue);
  border: 1.5px solid var(--border);
  padding: 12px 26px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
}

/* ===== MODAL POPUP ===== */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(10, 25, 49, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal.hidden {
  display: none;
}

.modal-content {
  background: white;
  padding: 32px;
  border-radius: 16px;
  text-align: center;
  max-width: 380px;
  width: 90%;
  box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 700px) {
  .form-row {
    flex-direction: column;
    gap: 0;
  }
  .form-card {
    padding: 22px;
  }
}

// script.js - Student Registration Validation
// Beginner friendly JavaScript

// Get form and modal elements
const form = document.getElementById("registrationForm");
const modal = document.getElementById("successModal");
const closeBtn = document.getElementById("closeModal");

// Form submit event
form.addEventListener("submit", function(event) {
  // Stop form from refreshing page
  event.preventDefault();

  // Get values from input fields
  const fullName = document.getElementById("fullName").value.trim();
  const email = document.getElementById("email").value.trim();
  const phone = document.getElementById("phone").value.trim();
  const dob = document.getElementById("dob").value;
  const course = document.getElementById("course").value;
  const gender = document.querySelector('input[name="gender"]:checked');
  const terms = document.getElementById("terms").checked;

  // Clear old error messages
  clearErrors();

  let isValid = true;

  // 1. Validate Full Name - must not be empty
  if (fullName === "") {
    showError("nameError", "Full name is required");
    isValid = false;
  } else if (fullName.length < 3) {
    showError("nameError", "Name must be at least 3 characters");
    isValid = false;
  }

  // 2. Validate Email - check format using regex
  if (email === "") {
    showError("emailError", "Email is required");
    isValid = false;
  } else if (!isValidEmail(email)) {
    showError("emailError", "Enter a valid email address");
    isValid = false;
  }

  // 3. Validate Phone - must be 10 digits
  if (phone === "") {
    showError("phoneError", "Phone number is required");
    isValid = false;
  } else if (!isValidPhone(phone)) {
    showError("phoneError", "Enter 10 digit phone number");
    isValid = false;
  }

  // 4. Validate Gender (radio button)
  if (!gender) {
    showError("genderError", "Please select gender");
    isValid = false;
  }

  // 5. Validate Course
  if (course === "") {
    showError("courseError", "Please select a course");
    isValid = false;
  }

  // 6. Validate Terms Checkbox
  if (!terms) {
    showError("termsError", "You must agree to terms");
    isValid = false;
  }

  // If all validations pass, show success modal
  if (isValid) {
    // Optional: you can log data here
    console.log("Registration Data:", {
      fullName, email, phone, dob, 
      gender: gender.value, course
    });

    // Show success popup
    modal.classList.remove("hidden");
    
    // Reset form after success (optional)
    form.reset();
  }
});

// Close modal button
closeBtn.addEventListener("click", function() {
  modal.classList.add("hidden");
});

// Close modal when clicking outside
modal.addEventListener("click", function(e) {
  if (e.target === modal) {
    modal.classList.add("hidden");
  }
});

// Helper: Show error message
function showError(elementId, message) {
  const errorElement = document.getElementById(elementId);
  if (errorElement) {
    errorElement.textContent = message;
  }
}

// Helper: Clear all errors
function clearErrors() {
  const errors = document.querySelectorAll(".error-msg");
  errors.forEach(function(el) {
    el.textContent = "";
  });
}

// Helper: Validate email format with Regex
function isValidEmail(email) {
  // Simple email pattern: text@text.text
  const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return pattern.test(email);
}

// Helper: Validate phone (10 digits only)
function isValidPhone(phone) {
  // Remove spaces and check if 10 digits
  const cleaned = phone.replace(/\D/g, "");
  const pattern = /^[0-9]{10}$/;
  return pattern.test(cleaned);
}