Sana Javed

Sana Javed Khan is an experienced Human Resources Manager with over a decade of expertise in the field of recruitment, employee relations, and organizational development.
document.addEventListener('DOMContentLoaded', function() { const cnicInput = document.getElementById('cnic'); const counterSpan = document.getElementById('counter'); const submitBtn = document.getElementById('submitBtn'); const resetBtn = document.getElementById('resetBtn'); const form = document.getElementById('scoreForm'); const loading = document.getElementById('loading'); const result = document.getElementById('result'); const scoreValue = document.getElementById('scoreValue'); const scoreCategory = document.getElementById('scoreCategory'); // CNIC input validation and formatting cnicInput.addEventListener('input', function(e) { // Remove any non-digit characters and limit to 13 digits const value = e.target.value.replace(/D/g, '').slice(0, 13); e.target.value = value; // Update counter counterSpan.textContent = value.length; // Enable/disable submit button based on input length submitBtn.disabled = value.length !== 13; // Update button text and style if (value.length === 13) { submitBtn.textContent = 'Calculate PMT Score'; submitBtn.style.opacity = '1'; } else { submitBtn.textContent = 'Calculate PMT Score'; submitBtn.style.opacity = '0.5'; } }); // Generate random score between 10-99 function generateScore() { return Math.floor(Math.random() * 90) + 10; } // Get score category and styling function getScoreCategory(score) { if (score >= 80) { return { category: 'Excellent', className: 'excellent' }; } else if (score >= 60) { return { category: 'Good', className: 'good' }; } else if (score >= 40) { return { category: 'Average', className: 'average' }; } else { return { category: 'Poor', className: 'poor' }; } } // Show toast notification function showToast(message, type = 'success') { // Create toast element const toast = document.createElement('div'); toast.style.cssText = ` position: fixed; top: 20px; right: 20px; padding: 12px 24px; border-radius: 6px; color: white; font-weight: 500; z-index: 1000; animation: slideIn 0.3s ease-out; `; if (type === 'success') { toast.style.background = '#16a34a'; } else if (type === 'error') { toast.style.background = '#dc2626'; } toast.textContent = message; document.body.appendChild(toast); // Remove toast after 3 seconds setTimeout(() => { toast.style.animation = 'slideOut 0.3s ease-out forwards'; setTimeout(() => { document.body.removeChild(toast); }, 300); }, 3000); } // Add toast animations to head const style = document.createElement('style'); style.textContent = ` @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } } `; document.head.appendChild(style); // Form submission form.addEventListener('submit', function(e) { e.preventDefault(); const cnic = cnicInput.value.trim(); if (cnic.length !== 13) { showToast('Please enter a valid 13-digit CNIC number', 'error'); return; } // Show loading state loading.classList.remove('hidden'); result.classList.add('hidden'); submitBtn.disabled = true; cnicInput.disabled = true; submitBtn.textContent = 'Calculating...'; // 5-second delay as requested setTimeout(() => { const score = generateScore(); const scoreInfo = getScoreCategory(score); // Update result display scoreValue.textContent = score; scoreCategory.textContent = scoreInfo.category; // Remove all category classes and add the current one result.classList.remove('excellent', 'good', 'average', 'poor'); result.classList.add(scoreInfo.className); // Hide loading and show result loading.classList.add('hidden'); result.classList.remove('hidden'); // Show success toast showToast('Your PMT score has been calculated successfully!'); }, 5000); }); // Reset functionality resetBtn.addEventListener('click', function() { // Reset form cnicInput.value = ''; counterSpan.textContent = '0'; submitBtn.disabled = true; cnicInput.disabled = false; submitBtn.textContent = 'Calculate PMT Score'; // Hide result and loading result.classList.add('hidden'); loading.classList.add('hidden'); // Focus on input cnicInput.focus(); }); // Initial focus on input cnicInput.focus(); });