${course.tag}
${course.title}
${course.shortDesc}
${formatPrice(course.price)}
${course.shortDesc}
${course.longDesc}
${course.instructorBio}
${item.a}
Course not found. Please select a course to continue.
'; return; } container.innerHTML = `Thank you for enrolling in our course. Your order has been successfully processed.
Order ID: ${orderData.orderId}
Course: ${course.title}
Price: ${formatPrice(course.price)}
Student: ${orderData.firstName} ${orderData.lastName}
Email: ${orderData.email}
Order Date: ${new Date(orderData.orderDate).toLocaleDateString()}
Note: This was a demonstration checkout. No actual payment was processed.
`; } // Clear order data after displaying localStorage.removeItem('orderData'); localStorage.removeItem('checkoutData'); } // Search and Filter Functions function setupCourseFilters() { const searchInput = document.getElementById('search-input'); const categoryFilter = document.getElementById('category-filter'); const sortSelect = document.getElementById('sort-select'); // Populate category filter if (categoryFilter) { const categories = [...new Set(Object.values(COURSES_DATA).map(course => course.category))]; categories.forEach(category => { const option = document.createElement('option'); option.value = category; option.textContent = category; categoryFilter.appendChild(option); }); } // Search functionality if (searchInput) { searchInput.addEventListener('input', filterAndSortCourses); } // Filter functionality if (categoryFilter) { categoryFilter.addEventListener('change', filterAndSortCourses); } // Sort functionality if (sortSelect) { sortSelect.addEventListener('change', filterAndSortCourses); } // Initial render filterAndSortCourses(); } function filterAndSortCourses() { const searchTerm = document.getElementById('search-input')?.value.toLowerCase() || ''; const selectedCategory = document.getElementById('category-filter')?.value || ''; const sortBy = document.getElementById('sort-select')?.value || 'title'; // Filter courses filteredCourses = Object.values(COURSES_DATA).filter(course => { const matchesSearch = course.title.toLowerCase().includes(searchTerm) || course.shortDesc.toLowerCase().includes(searchTerm) || course.category.toLowerCase().includes(searchTerm); const matchesCategory = !selectedCategory || course.category === selectedCategory; return matchesSearch && matchesCategory; }); // Sort courses filteredCourses.sort((a, b) => { switch (sortBy) { case 'price-low': return a.price - b.price; case 'price-high': return b.price - a.price; case 'difficulty': const difficultyOrder = { 'Beginner': 1, 'Intermediate': 2, 'Advanced': 3 }; return difficultyOrder[a.difficulty] - difficultyOrder[b.difficulty]; default: return a.title.localeCompare(b.title); } }); renderAllCourses(); } // Contact Form function setupContactForm() { const form = document.getElementById('contact-form'); const successDiv = document.getElementById('contact-success'); if (!form) return; form.addEventListener('submit', function(e) { e.preventDefault(); // Simulate form submission setTimeout(() => { form.style.display = 'none'; if (successDiv) { successDiv.classList.add('show'); successDiv.style.display = 'block'; } }, 500); }); } // FAQ Functionality function setupFAQs() { const faqItems = document.querySelectorAll('.faq-item'); faqItems.forEach(item => { const question = item.querySelector('.faq-question'); const answer = item.querySelector('.faq-answer'); if (question && answer) { question.addEventListener('click', () => { const isActive = item.classList.contains('active'); // Close all other FAQs faqItems.forEach(otherItem => { otherItem.classList.remove('active'); const otherAnswer = otherItem.querySelector('.faq-answer'); if (otherAnswer) otherAnswer.style.display = 'none'; }); // Toggle current FAQ if (!isActive) { item.classList.add('active'); answer.style.display = 'block'; } }); } }); } // Mobile Navigation function setupMobileNav() { const navToggle = document.querySelector('.nav-toggle'); const navMenu = document.querySelector('.nav-menu'); if (navToggle && navMenu) { navToggle.addEventListener('click', () => { navMenu.classList.toggle('active'); }); // Close menu when clicking outside document.addEventListener('click', (e) => { if (!navToggle.contains(e.target) && !navMenu.contains(e.target)) { navMenu.classList.remove('active'); } }); } } // Page-specific initialization function initPage() { const path = window.location.pathname; // Common setup for all pages setupMobileNav(); setupFAQs(); // Page-specific setup if (path === '/' || path === '/index/') { renderFeaturedCourses(); } else if (path === '/courses/') { setupCourseFilters(); } else if (path === '/course/') { renderCourseDetail(); } else if (path === '/checkout-step1/') { setupCheckoutStep1(); } else if (path === '/checkout-step2/') { setupCheckoutStep2(); } else if (path === '/order-success/') { renderOrderSuccess(); } else if (path === '/contact/') { setupContactForm(); } } // Initialize when DOM is loaded document.addEventListener('DOMContentLoaded', initPage); // Handle browser back/forward buttons window.addEventListener('popstate', initPage);