A to-do lista egy alapvető projekt, amely segít elsajátítani a front-end fejlesztés alapjait. Ebben a cikkben bemutatjuk, hogyan készíthetsz egy egyszerű és funkcionális to-do listát HTML, CSS és JavaScript használatával. Az eredmény egy reszponzív, modern megjelenésű alkalmazás lesz, amelyen új feladatokat adhatsz hozzá, kipipálhatod azokat, és törölheted is őket.
1. lépés: Alap HTML Struktúra
Kezdjük az alap HTML struktúrával. Hozzuk létre az index.html file-t. Ez tartalmaz egy input mezőt a feladatok beviteléhez, egy „Hozzáadás” gombot, valamint egy listaelemet, amely a feladatokat fogja tárolni.
<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>To-Do Lista</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="todo-container"> <h1>To-Do Lista</h1> <div class="input-container"> <input type="text" id="todo-input" placeholder="Új feladat..."> <button id="add-button">Hozzáadás</button> </div> <ul id="todo-list"></ul> </div> <script src="js/script.js"></script> </body> </html>2. lépés: Alap CSS Stílusok
A stílusokkal modern, tiszta kinézetet érhetünk el. Hozzuk létre a style.css fájlt az alábbi tartalommal. Hozzuk létre a css/style.css
/* Alap stílusok */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f4f4f4; } .todo-container { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); width: 100%; max-width: 400px; text-align: center; } h1 { margin-bottom: 20px; color: #333; } .input-container { display: flex; gap: 10px; margin-bottom: 20px; } input[type="text"] { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; } button { padding: 10px 20px; border: none; background-color: #007BFF; color: white; font-size: 16px; border-radius: 4px; cursor: pointer; } button:hover { background-color: #0056b3; } ul { list-style-type: none; padding: 0; } li { padding: 10px; background: #f9f9f9; margin: 5px 0; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; } li.completed { text-decoration: line-through; color: #888; } .delete-btn { background: #ff4d4d; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; } .delete-btn:hover { background: #cc0000; }3. lépés: Funkciók JavaScript segítségével
Hozzunk létre egy script.js fájlt, amely kezeli a feladatok hozzáadását, kipipálását és törlését. js/script.js
// Változók const addButton = document.getElementById('add-button'); const todoInput = document.getElementById('todo-input'); const todoList = document.getElementById('todo-list'); // Feladat hozzáadása addButton.addEventListener('click', () => { const task = todoInput.value.trim(); if (task) { const li = document.createElement('li'); li.textContent = task; // Törlés gomb const deleteButton = document.createElement('button'); deleteButton.textContent = 'Törlés'; deleteButton.classList.add('delete-btn'); deleteButton.addEventListener('click', () => { li.remove(); }); // Kész állapot váltása li.addEventListener('click', () => { li.classList.toggle('completed'); }); li.appendChild(deleteButton); todoList.appendChild(li); todoInput.value = ''; // Input mező kiürítése } }); Mappa struktúra
Projekt mappa
│
├── index.html # A fő HTML fájl
├── css # Stílusokat tartalmazó mappa
│ └── style.css # Az alkalmazás CSS fájlja
├── js # JavaScript kódokat tartalmazó mappa
│ └── script.js # Az alkalmazás funkcionális JavaScript kódja
└── README.md # Opcionális: Rövid dokumentáció a projekthez (pl. fejlesztési jegyzetek, használati utasítás)
