Testseite: mehrere Unterseiten, Tabs, Galerie, Preise, Formular

app.js

@@ -0,0 +1,46 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const page = document.body.dataset.page
+  document.querySelectorAll('nav ul a').forEach(a => { if (a.dataset.page === page) a.classList.add('active') })
+  const menu = document.querySelector('.menu-btn')
+  if (menu) menu.addEventListener('click', () => document.querySelector('nav ul').classList.toggle('open'))
+
+  document.querySelectorAll('.tabs').forEach(tabs => {
+    const panels = document.querySelectorAll(tabs.dataset.panels)
+    tabs.querySelectorAll('button').forEach((b, i) => b.addEventListener('click', () => {
+      tabs.querySelectorAll('button').forEach(x => x.classList.remove('on'))
+      panels.forEach(p => p.classList.remove('on'))
+      b.classList.add('on'); panels[i].classList.add('on')
+    }))
+  })
+
+  const box = document.querySelector('.lightbox')
+  if (box) {
+    document.querySelectorAll('.gallery button').forEach(b => b.addEventListener('click', () => {
+      const d = box.querySelector('div'); d.textContent = b.textContent; d.style.background = b.style.background
+      box.classList.add('on')
+    }))
+    box.addEventListener('click', () => box.classList.remove('on'))
+  }
+
+  const yearly = document.querySelector('#yearly')
+  if (yearly) yearly.addEventListener('change', () => {
+    document.querySelectorAll('[data-month]').forEach(el => {
+      const m = Number(el.dataset.month)
+      el.textContent = yearly.checked ? `${Math.round(m * 10)} € / Jahr` : `${m} € / Monat`
+    })
+  })
+
+  const counter = document.querySelector('.counter')
+  if (counter) {
+    const out = counter.querySelector('output'); let n = 0
+    counter.querySelector('[data-step="-1"]').addEventListener('click', () => { n = Math.max(0, n - 1); out.value = n })
+    counter.querySelector('[data-step="1"]').addEventListener('click', () => { n += 1; out.value = n })
+  }
+
+  const form = document.querySelector('#kontakt-form')
+  if (form) form.addEventListener('submit', e => {
+    e.preventDefault()
+    document.querySelector('.notice').classList.add('on')
+    form.reset()
+  })
+})