JavaScript gyakorlati alkalmazások

1. Űrlap validáció

Egyszerű regisztrációs űrlap validációval

Interaktív szerkesztő

function RegistrationForm() {
  const [formData, setFormData] = React.useState({
    username: '',
    email: '',
    password: ''
  });
  const [errors, setErrors] = React.useState({});

  const validateForm = () => {
    const newErrors = {};
    
    if (!formData.username.trim()) {
      newErrors.username = 'A felhasználónév kötelező!';
    }
    
    if (!formData.email.includes('@')) {
      newErrors.email = 'Érvénytelen email cím!';
    }
    
    if (formData.password.length < 6) {
      newErrors.password = 'A jelszó legalább 6 karakter legyen!';
    }
    
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (validateForm()) {
      alert('Sikeres regisztráció!');
    }
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4 p-4 border rounded">
      <div>
        <input
          type="text"
          placeholder="Felhasználónév"
          className="w-full p-2 border rounded"
          value={formData.username}
          onChange={(e) => setFormData({...formData, username: e.target.value})}
        />
        {errors.username && <p className="text-red-500 text-sm">{errors.username}</p>}
      </div>

      <div>
        <input
          type="email"
          placeholder="Email"
          className="w-full p-2 border rounded"
          value={formData.email}
          onChange={(e) => setFormData({...formData, email: e.target.value})}
        />
        {errors.email && <p className="text-red-500 text-sm">{errors.email}</p>}
      </div>

      <div>
        <input
          type="password"
          placeholder="Jelszó"
          className="w-full p-2 border rounded"
          value={formData.password}
          onChange={(e) => setFormData({...formData, password: e.target.value})}
        />
        {errors.password && <p className="text-red-500 text-sm">{errors.password}</p>}
      </div>

      <button 
        type="submit"
        className="w-full bg-blue-500 text-white p-2 rounded hover:bg-blue-600"
      >
        Regisztráció
      </button>
    </form>
  );
}

Eredmény

Loading...

Validációs függvények

// Email cím ellenőrzése
function isValidEmail(email) {
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return re.test(email);
}

// Jelszó erősség ellenőrzése
function isStrongPassword(password) {
    return password.length >= 8 &&          // Minimum 8 karakter
           /[A-Z]/.test(password) &&        // Van nagybetű
           /[a-z]/.test(password) &&        // Van kisbetű
           /[0-9]/.test(password);          // Van szám
}

2. Interaktív galéria

Interaktív szerkesztő

function ImageGallery() {
  const [currentIndex, setCurrentIndex] = React.useState(0);
  
  // Példa képek (placeholder képekkel)
  const images = [
    '/api/placeholder/400/300',
    '/api/placeholder/400/300',
    '/api/placeholder/400/300'
  ];

  const nextImage = () => {
    setCurrentIndex((prev) => (prev + 1) % images.length);
  };

  const prevImage = () => {
    setCurrentIndex((prev) => (prev - 1 + images.length) % images.length);
  };

  return (
    <div className="relative w-full max-w-xl mx-auto">
      <div className="relative aspect-[4/3] overflow-hidden rounded">
        <img 
          src={images[currentIndex]}
          alt={`Kép ${currentIndex + 1}`}
          className="w-full h-full object-cover"
        />
      </div>
      
      <div className="flex justify-between mt-4">
        <button 
          onClick={prevImage}
          className="bg-gray-800 text-white px-4 py-2 rounded"
        >
          Előző
        </button>
        <span className="self-center">
          {currentIndex + 1} / {images.length}
        </span>
        <button 
          onClick={nextImage}
          className="bg-gray-800 text-white px-4 py-2 rounded"
        >
          Következő
        </button>
      </div>
    </div>
  );
}

Eredmény

Loading...

3. Számológép

Interaktív szerkesztő

function Calculator() {
  const [display, setDisplay] = React.useState('0');
  const [equation, setEquation] = React.useState('');

  const handleNumber = (num) => {
    setDisplay(prev => prev === '0' ? num : prev + num);
    setEquation(prev => prev + num);
  };

  const handleOperator = (op) => {
    setDisplay('0');
    setEquation(prev => prev + op);
  };

  const calculate = () => {
    try {
      const result = eval(equation);
      setDisplay(result.toString());
      setEquation(result.toString());
    } catch (error) {
      setDisplay('Hiba');
      setEquation('');
    }
  };

  const clear = () => {
    setDisplay('0');
    setEquation('');
  };

  return (
    <div className="w-64 p-4 bg-gray-100 rounded">
      <div className="bg-white p-2 mb-2 rounded">
        <div className="text-sm text-gray-600">{equation || '0'}</div>
        <div className="text-xl">{display}</div>
      </div>
      
      <div className="grid grid-cols-4 gap-1">
        {[7,8,9,'+',4,5,6,'-',1,2,3,'*','C',0,'=','/'].map((btn) => (
          <button
            key={btn}
            onClick={() => {
              if (btn === '=') calculate();
              else if (btn === 'C') clear();
              else if (typeof btn === 'number') handleNumber(btn.toString());
              else handleOperator(btn);
            }}
            className={`p-2 rounded ${
              typeof btn === 'number' 
                ? 'bg-white' 
                : btn === '=' 
                  ? 'bg-blue-500 text-white' 
                  : 'bg-gray-200'
            }`}
          >
            {btn}
          </button>
        ))}
      </div>
    </div>
  );
}

Eredmény

Loading...

4. To-Do Lista

HTML struktúra

<div class="todo-app">
    <input type="text" id="newTodo" placeholder="Új feladat...">
    <button onclick="addTodo()">Hozzáadás</button>
    <ul id="todoList"></ul>
</div>

JavaScript implementáció

let todos = [];

function addTodo() {
    const input = document.getElementById('newTodo');
    const text = input.value.trim();
    
    if (text) {
        todos.push({
            id: Date.now(),
            text,
            completed: false
        });
        input.value = '';
        renderTodos();
    }
}

function toggleTodo(id) {
    const todo = todos.find(t => t.id === id);
    if (todo) {
        todo.completed = !todo.completed;
        renderTodos();
    }
}

function deleteTodo(id) {
    todos = todos.filter(t => t.id !== id);
    renderTodos();
}

function renderTodos() {
    const list = document.getElementById('todoList');
    list.innerHTML = '';
    
    todos.forEach(todo => {
        const li = document.createElement('li');
        li.innerHTML = `
            <input type="checkbox" 
                   ${todo.completed ? 'checked' : ''}
                   onChange="toggleTodo(${todo.id})">
            <span style="text-decoration: ${todo.completed ? 'line-through' : 'none'}">
                ${todo.text}
            </span>
            <button onclick="deleteTodo(${todo.id})">Törlés</button>
        `;
        list.appendChild(li);
    });
}

5. Gyakorló feladatok

1. Feladat - Jelszó generátor

Készíts egy eszközt, amely véletlenszerű jelszavakat generál megadott hosszúsággal és karakterkészlettel!

function generatePassword(length = 12) {
    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*';
    let password = '';
    
    for (let i = 0; i < length; i++) {
        const randomIndex = Math.floor(Math.random() * chars.length);
        password += chars[randomIndex];
    }
    
    return password;
}

2. Feladat - Visszaszámláló

Készíts egy visszaszámlálót, ami egy megadott dátumig számol vissza!

function countdown(targetDate) {
    const now = new Date().getTime();
    const target = new Date(targetDate).getTime();
    const diff = target - now;
    
    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((diff % (1000 * 60)) / 1000);
    
    return { days, hours, minutes, seconds };
}

6. Ellenőrző kérdések

1. Miért fontos az űrlapok validálása a frontend oldalon?
2. Hogyan kezeljük a felhasználói input hibákat?
3. Mi a különbség a synchronous és asynchronous műveletek között?
4. Hogyan tároljuk el a felhasználó adatait lokálisan?
5. Mik a legfontosabb szempontok egy interaktív felület tervezésénél?

7. További tanulási források

• MDN Web Forms útmutató
• JavaScript Design Patterns
• Web Storage API

---

Ez a lecke lezárja a JavaScript alapok sorozatot. Most már készen állsz arra, hogy saját interaktív webalkalmazásokat készíts!