interstellar/script.js at main · souvik-dev31/interstellar · 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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
// Mobile navigation toggle
const navToggle = document.querySelector('.mobile-nav-toggle');
const primaryNav = document.querySelector('.primary-navigation');

if (navToggle) {
  navToggle.addEventListener('click', () => {
    const visibility = primaryNav.getAttribute('data-visible');
    if (visibility === 'true') {
      primaryNav.setAttribute('data-visible', false);
      navToggle.setAttribute('aria-expanded', false);
    } else {
      primaryNav.setAttribute('data-visible', true);
      navToggle.setAttribute('aria-expanded', true);
    }
  });
}

// Tab functionality for destination page
const tabList = document.querySelector('.tab-list');
if (tabList) {
  const tabs = tabList.querySelectorAll('button');
  const tabPanels = document.querySelectorAll('.tab-panel');
  const destinationImage = document.querySelector('.destination-image img');

  tabs.forEach(tab => {
    tab.addEventListener('click', () => {
      // Deactivate all tabs
      tabs.forEach(t => {
        t.classList.remove('active');
        t.setAttribute('aria-selected', false);
      });

      // Activate the clicked tab
      tab.classList.add('active');
      tab.setAttribute('aria-selected', true);

      // Hide all panels
      tabPanels.forEach(panel => {
        panel.classList.remove('active');
      });

      // Show selected panel
      const targetPanelId = tab.getAttribute('aria-controls');
      document.getElementById(targetPanelId).classList.add('active');

      // Change destination image
      const imageId = tab.getAttribute('data-image');
      if (destinationImage && imageId) {
        destinationImage.src = `./starter-code/assets/destination/image-${imageId}.png`;
        destinationImage.alt = imageId.charAt(0).toUpperCase() + imageId.slice(1);
      }
    });
  });
}

// Dots indicator for crew page
const dotIndicators = document.querySelector('.dot-indicators');
if (dotIndicators) {
  const dots = dotIndicators.querySelectorAll('button');
  const tabPanels = document.querySelectorAll('.tab-panel');
  const crewImage = document.querySelector('.crew-image img');

  dots.forEach(dot => {
    dot.addEventListener('click', () => {
      // Deactivate all dots
      dots.forEach(d => {
        d.classList.remove('active');
        d.setAttribute('aria-selected', false);
      });

      // Activate the clicked dot
      dot.classList.add('active');
      dot.setAttribute('aria-selected', true);

      // Hide all panels
      tabPanels.forEach(panel => {
        panel.classList.remove('active');
      });

      // Show selected panel
      const targetPanelId = dot.getAttribute('aria-controls');
      document.getElementById(targetPanelId).classList.add('active');

      // Change crew image
      const imageId = dot.getAttribute('data-image');
      if (crewImage && imageId) {
        crewImage.src = `./starter-code/assets/crew/image-${imageId}.png`;

        // Set alt text based on crew role
        const crewName = document.querySelector(`#${targetPanelId} .crew-name`).textContent;
        crewImage.alt = crewName;
      }
    });
  });
}

// Number indicators for technology page
const numberIndicators = document.querySelector('.number-indicators');
if (numberIndicators) {
  const numbers = numberIndicators.querySelectorAll('button');
  const tabPanels = document.querySelectorAll('.tab-panel');
  const techImage = document.querySelector('.technology-image img');
  const techSource = document.querySelector('.technology-image picture source');

  numbers.forEach(number => {
    number.addEventListener('click', () => {
      // Deactivate all numbers
      numbers.forEach(n => {
        n.classList.remove('active');
        n.setAttribute('aria-selected', false);
      });

      // Activate the clicked number
      number.classList.add('active');
      number.setAttribute('aria-selected', true);

      // Hide all panels
      tabPanels.forEach(panel => {
        panel.classList.remove('active');
      });

      // Show selected panel
      const targetPanelId = number.getAttribute('aria-controls');
      document.getElementById(targetPanelId).classList.add('active');

      // Change technology image
      const imageId = number.getAttribute('data-image');
      if (techImage && imageId) {
        techImage.src = `./starter-code/assets/technology/image-${imageId}-landscape.jpg`;
        if (techSource) {
          techSource.srcset = `./starter-code/assets/technology/image-${imageId}-portrait.jpg`;
        }

        // Set alt text based on technology name
        const techName = document.querySelector(`#${targetPanelId} h2`).textContent.split(' ').slice(-2).join(' ');
        techImage.alt = techName;
      }
    });
  });
}