cv-builder/script.js at main · ZarScape/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
93
94
95
96
97
98
// script.js

document.addEventListener('DOMContentLoaded', () => {
  // Simple field ↔ preview mappings
  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: " }
  ];

  // Update each field + manage visibility
  fields.forEach(f => {
    const inp = document.getElementById(f.id);
    const prv = document.getElementById(f.preview);
    inp.addEventListener('input', () => updateField(f, inp, prv));
    updateField(f, inp, prv);
  });

  function updateField(field, input, previewEl) {
    const text = input.value.trim();
    if (!text) {
      previewEl.textContent = '';
      previewEl.style.display = 'none';
    } else {
      previewEl.textContent = (field.label || '') + text;
      previewEl.style.display = '';
    }
    updateHeaderVisibility();
    updateContactVisibility();
  }

  // Toggle section blocks (education, work, experience, other)
  ['education','work','experience','other'].forEach(id => {
    const h = document.getElementById('heading-'+id);
    const p = document.getElementById('preview-'+id);
    const inp = document.getElementById(id);
    const update = () => {
      if (inp.value.trim()) {
        h.style.display = '';
        p.style.display = '';
        p.textContent = inp.value;
      } else {
        h.style.display = 'none';
        p.style.display = 'none';
      }
    };
    inp.addEventListener('input', update);
    update();
  });

  // Skills handling
  const skillsInp = document.getElementById('skills');
  const skillsHd = document.getElementById('heading-skills');
  const skillsList = document.getElementById('preview-skills');
  function updSkills() {
    skillsList.innerHTML = '';
    const items = skillsInp.value.split(',')
      .map(s=>s.trim()).filter(Boolean);
    if (items.length) {
      skillsHd.style.display = '';
      skillsList.style.display = '';
      items.forEach(it => {
        const li = document.createElement('li');
        li.textContent = it;
        skillsList.appendChild(li);
      });
    } else {
      skillsHd.style.display = 'none';
      skillsList.style.display = 'none';
    }
  }
  skillsInp.addEventListener('input', updSkills);
  updSkills();

  // Hide name header if empty
  function updateHeaderVisibility() {
    const nameEl = document.getElementById('preview-name');
    nameEl.style.display = nameEl.textContent ? '' : 'none';
  }

  // Hide contact block if all spans empty
  function updateContactVisibility() {
    const contact = document.getElementById('preview-contact');
    const spans = [...contact.querySelectorAll('span')];
    const any = spans.some(s => s.textContent);
    contact.style.display = any ? '' : 'none';
  }

  // Initial header/contact
  updateHeaderVisibility();
  updateContactVisibility();

  // Export via browser Print dialog
  document.getElementById('export-btn')
    .addEventListener('click', () => window.print());
});