Ugrás a fő tartalomhoz

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


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!