skatabend/src/App.js

import { useRef, useState } from 'react';
import './App.css';

function App() {
  const formSectionRef = useRef(null);
  const [customNumber, setCustomNumber] = useState(false);
  const [email, setEmail] = useState("");


  const scrollToForm = () => {
    const formSection = formSectionRef.current;
    formSection.classList.add('visible', 'bounce'); // Füge Bounce-Klasse hinzu
    setTimeout(() => {
      formSection.scrollIntoView({ behavior: 'smooth' });
      formSection.classList.remove('bounce'); // Entferne Bounce-Klasse nach der Animation
    }, 190); // Wartezeit für die Bounce-Animation
  };

  const handleCustomInputChange = (e) => {
    setCustomNumber(e.target.value);
  };

  const handleRadioChange = (e) => {
    setCustomNumber(e.target.value === 'custom' ? '' : e.target.value);
  };

  const emailIsValid = (email1) => {
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email1)
  }
  
  const submit = (e) => {
    e.preventDefault(); // Verhindert das Standardverhalten des Formulars
    if (!emailIsValid(email)){
      alert("Bitte eine gültige E-Mailadresse eintrgen");
      return;
    }
    if(!customNumber){
      alert("Bitte angeben wie viele Personen mitkommen");
      return;
    }
    // send data
    alert("Anmeldung gesendet.")
    setEmail("")
    setCustomNumber(false)
  }

  return (
    <div className="App">
      <div id="intro">
        <h1>Willkommen zum Skatabend des Skat-Profils</h1>
        <div className="facts">
          <div className="fact-row">
            <span className="fact-label">Zeit:</span>
            <span className="fact-value">18:00</span>
          </div>
          <div className="fact-row">
            <span className="fact-label">Ort:</span>
            <span className="fact-value">Samuel-von-Pufendorf-Gymnasium in Flöha</span>
          </div>
          <div className="fact-row">
            <span className="fact-label">Datum:</span>
            <span className="fact-value">25.06.2025</span>
          </div>
        </div>
        <button onClick={scrollToForm}>Jetzt Anmelden</button>
      </div>
      <div id="form-section" ref={formSectionRef}>
        <form>
          <label>E-Mail:</label>
          <input type="email" name="email" placeholder="Deine E-Mail-Adresse" onChange={(e => setEmail(e.target.value))} value={email}/>
          <br />
          <label>Anzahl der Personen</label>
          <div className="radio-group">
            <label>
              <input
                type="radio"
                name="number"
                value="1"
                onChange={handleRadioChange}
                checked={customNumber === '1'}
              />
              1 Person
            </label>
            <label>
              <input
                type="radio"
                name="number"
                value="2"
                onChange={handleRadioChange}
                checked={customNumber === '2'}
              />
              2 Personen
            </label>
            <label>
              <input
                type="radio"
                name="number"
                value="3"
                onChange={handleRadioChange}
                checked={customNumber === '3'}
              />
              3 Personen
            </label>
            <label>
              <input
                type="radio"
                name="number"
                value="4"
                onChange={handleRadioChange}
                checked={customNumber === '4'}
              />
              4 Personen
            </label>
            <label>
              <input
                type="radio"
                name="number"
                value="custom"
                onChange={handleRadioChange}
                checked={customNumber === ''}
              />
              Andere
            </label>
          </div>
          {customNumber === '' && (
            <input
              type="number"
              name="customNumber"
              placeholder="Anzahl der Personen"
              onChange={handleCustomInputChange}
              value={customNumber}
            />
          )}
          <br />
          <button type="submit" onClick={submit}>Anmelden</button>
        </form>
      </div>
      <footer>
        <p>
          Bildquelle Hintergrund: <a href="https://store-images.s-microsoft.com/image/apps.42739.13510798887965433.cf25521d-d390-432c-8007-cbc0aa3ebe97.53ed75d0-4a6a-4c11-a3ae-fd528ef6444a?h=1280" target="_blank" rel="noopener noreferrer">hier klicken</a>
        </p>
      </footer>
    </div>
  );
}

export default App;