cv-builder/script.js at main · Mohibyte/cv-builder · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
document.addEventListener('DOMContentLoaded', () => {
    const fields = [
        { id: 'name', preview: 'preview-name' },
        { id: 'father', preview: 'preview-father', label: "Father's Name: " },
        { id: 'address', preview: 'preview-address', label: "Address: " },
        { id: 'city', preview: 'preview-city', label: "City: " },
        { id: 'number', preview: 'preview-number', label: "Phone: " }
    ];

    fields.forEach(field => {
        const input = document.getElementById(field.id);
        const preview = document.getElementById(field.preview);
        if (input && preview) {
            input.addEventListener('input', () => {
                if (field.label) {
                    preview.textContent = input.value ? field.label + input.value : '';
                } else {
                    preview.textContent = input.value;
                }
            });
            // Initialize on load
            if (field.label) {
                preview.textContent = input.value ? field.label + input.value : '';
            } else {
                preview.textContent = input.value;
            }
        }
    });

    // Helper to show/hide section with heading
    function toggleSection(inputId, headingId, contentId) {
        const input = document.getElementById(inputId);
        const heading = document.getElementById(headingId);
        const content = document.getElementById(contentId);
        function update() {
            if (input.value.trim()) {
                heading.style.display = '';
                content.style.display = '';
                content.textContent = input.value;
            } else {
                heading.style.display = 'none';
                content.style.display = 'none';
                content.textContent = '';
            }
        }
        input.addEventListener('input', update);
        update();
    }

    // Education
    toggleSection('education', 'heading-education', 'preview-education');
    // Work
    toggleSection('work', 'heading-work', 'preview-work');
    // Experience
    toggleSection('experience', 'heading-experience', 'preview-experience');
    // Other
    toggleSection('other', 'heading-other', 'preview-other');

    // Skills (special handling for comma-separated list)
    const skillsInput = document.getElementById('skills');
    const skillsHeading = document.getElementById('heading-skills');
    const skillsPreview = document.getElementById('preview-skills');
    function updateSkills() {
        skillsPreview.innerHTML = '';
        const skills = skillsInput.value.split(',').map(s => s.trim()).filter(Boolean);
        if (skills.length > 0) {
            skillsHeading.style.display = '';
            skillsPreview.style.display = '';
            skills.forEach(skill => {
                const li = document.createElement('li');
                li.textContent = skill;
                skillsPreview.appendChild(li);
            });
        } else {
            skillsHeading.style.display = 'none';
            skillsPreview.style.display = 'none';
        }
    }
    skillsInput.addEventListener('input', updateSkills);
    updateSkills();

    // Export as PDF
    document.getElementById('export-btn').addEventListener('click', () => {
        const element = document.getElementById('cv-preview');
        html2pdf().from(element).set({
            margin: 0.5,
            filename: 'cv.pdf',
            html2canvas: { scale: 2 },
            jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' }
        }).save();
    });
});