GCR Marketing Agency — Video Editor Application Video Editor Application
Open Position · Creative Department · 2025
Step 1 of 8const TOTAL_SECTIONS = 8; let currentSection = 1; const dotsEl = document.getElementById('stepDots'); for (let i = 1; i <= TOTAL_SECTIONS; i++) { const d = document.createElement('div'); d.className = 'step-dot' + (i === 1 ? ' active' : ''); d.id = `dot-${i}`; dotsEl.appendChild(d); } function updateProgress(step) { const pct = (step / TOTAL_SECTIONS) * 100; document.getElementById('progressFill').style.width = pct + '%'; document.getElementById('progressLabel').textContent = `Step ${step} of ${TOTAL_SECTIONS}`; for (let i = 1; i <= TOTAL_SECTIONS; i++) { const dot = document.getElementById(`dot-${i}`); dot.className = 'step-dot' + (i === step ? ' active' : i < step ? ' done' : ''); } } function showSection(n) { document.querySelectorAll('.form-section').forEach(s => s.classList.remove('active')); document.querySelector(`[data-section="${n}"]`).classList.add('active'); window.scrollTo({ top: 0, behavior: 'smooth' }); currentSection = n; updateProgress(n); } function validateSection(n) { let valid = true; const clearErr = id => { const el = document.getElementById('err-' + id); if (el) el.classList.remove('visible'); }; const showErr = id => { const el = document.getElementById('err-' + id); if (el) el.classList.add('visible'); valid = false; }; const val = id => { const el = document.getElementById(id); return el ? el.value.trim() : ''; }; if (n === 1) { ['fullName','dob','email','phone','city'].forEach(clearErr); if (!val('fullName')) showErr('fullName'); if (!val('dob')) showErr('dob'); if (!val('email') || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val('email'))) showErr('email'); if (!val('phone') || val('phone').length < 7) showErr('phone'); if (!val('city')) showErr('city'); } if (n === 2) { ['experience','software','employment'].forEach(clearErr); if (!val('experience')) showErr('experience'); if (!document.querySelector('input[name="software"]:checked')) showErr('software'); if (!val('employment')) showErr('employment'); } if (n === 3) { ['portfolioLink','bestVideo'].forEach(clearErr); if (!val('portfolioLink')) showErr('portfolioLink'); if (!val('bestVideo')) showErr('bestVideo'); } if (n === 4) { ['specialisation','deliverySpeed'].forEach(clearErr); if (!document.querySelector('input[name="specialisation"]:checked')) showErr('specialisation'); if (!document.querySelector('input[name="deliverySpeed"]:checked')) showErr('deliverySpeed'); } if (n === 5) { clearErr('monthlySalary'); if (!val('monthlySalary')) showErr('monthlySalary'); } if (n === 6) { ['startDate','workType'].forEach(clearErr); if (!val('startDate')) showErr('startDate'); if (!document.querySelector('input[name="workType"]:checked')) showErr('workType'); } if (n === 7) { clearErr('resumeFile'); const file = document.getElementById('resumeFile'); if (!file || !file.files || !file.files.length) showErr('resumeFile'); } if (n === 8) { clearErr('agreement'); if (!document.getElementById('agreement').checked) showErr('agreement'); } return valid; } function nextSection(n) { if (!validateSection(n)) return; if (n < TOTAL_SECTIONS) showSection(n + 1); } function prevSection(n) { if (n > 1) showSection(n - 1); } function collectData() { const software = [...document.querySelectorAll('input[name="software"]:checked')].map(el => el.value).join(', '); const specialisation = document.querySelector('input[name="specialisation"]:checked')?.value || ''; const deliverySpeed = document.querySelector('input[name="deliverySpeed"]:checked')?.value || ''; const workType = document.querySelector('input[name="workType"]:checked')?.value || ''; const resumeFile = document.getElementById('resumeFile'); return { fullName: document.getElementById('fullName').value.trim(), dob: document.getElementById('dob').value, email: document.getElementById('email').value.trim(), phone: document.getElementById('phone').value.trim(), city: document.getElementById('city').value.trim(), experience: document.getElementById('experience').value, software, employment: document.getElementById('employment').value, portfolioLink: document.getElementById('portfolioLink').value.trim(), bestVideo: document.getElementById('bestVideo').value.trim(), instagram: document.getElementById('instagram').value.trim(), specialisation, deliverySpeed, monthlySalary: document.getElementById('monthlySalary').value.trim(), perVideoRate: document.getElementById('perVideoRate').value.trim(), startDate: document.getElementById('startDate').value, workType, resumeFileName: resumeFile.files.length ? resumeFile.files[0].name : '', }; } async function submitForm() { if (!validateSection(8)) return; const btn = document.getElementById('submitBtn'); const label = document.getElementById('submitLabel'); const spinner = document.getElementById('submitSpinner'); const arrow = document.getElementById('submitArrow'); const errBanner = document.getElementById('submitError'); // Loading state btn.disabled = true; btn.classList.add('submitting'); label.textContent = 'Submitting...'; spinner.style.display = 'inline-block'; arrow.style.display = 'none'; errBanner.classList.remove('visible'); try { const data = collectData(); const response = await fetch(SCRIPT_URL, { method: 'POST', body: JSON.stringify(data), }); const result = await response.json(); if (result.success) { document.getElementById('applicationForm').style.display = 'none'; document.getElementById('successScreen').classList.add('active'); document.getElementById('progressLabel').textContent = 'Submitted'; document.getElementById('progressFill').style.width = '100%'; for (let i = 1; i <= TOTAL_SECTIONS; i++) document.getElementById(`dot-${i}`).className = 'step-dot done'; window.scrollTo({ top: 0, behavior: 'smooth' }); } else { throw new Error(result.error || 'Unknown error'); } } catch (err) { errBanner.classList.add('visible'); btn.disabled = false; btn.classList.remove('submitting'); label.textContent = 'Submit Application'; spinner.style.display = 'none'; arrow.style.display = 'inline-block'; } } document.getElementById('resumeFile').addEventListener('change', function() { if (this.files && this.files.length) { document.getElementById('fileSelected').textContent = '✓ ' + this.files[0].name; } }); const zone = document.getElementById('uploadZone'); zone.addEventListener('dragover', e => { e.preventDefault(); zone.classList.add('dragover'); }); zone.addEventListener('dragleave', () => zone.classList.remove('dragover')); zone.addEventListener('drop', e => { e.preventDefault(); zone.classList.remove('dragover'); const files = e.dataTransfer.files; if (files.length) { document.getElementById('resumeFile').files = files; document.getElementById('fileSelected').textContent = '✓ ' + files[0].name; } }); document.querySelectorAll('.field-input').forEach(input => { input.addEventListener('keydown', e => { if (e.key === 'Enter') { e.preventDefault(); nextSection(currentSection); } }); });Application Received
Thank you for
applying to GCR.Editing test sent within 48 hours if shortlisted