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...