HTML
- Hozz létre egy új HTML fájlt index.html
néven.
- Állítsd be az alábbi alapvető
HTML struktúrát:
- Dokumentumtípus: <!DOCTYPE
html>
- Nyelv: lang="hu"
- Karakterkódolás: <meta
charset="UTF-8">
- Reszponzív nézetport: <meta
name="viewport" content="width=device-width,
initial-scale=1.0">
- Oldalcím: <title>Sporteredmények</title>
- Adj hozzá egy <link>
elemet a styles.css fájl csatolásához a <head> szakaszban.
- Hozz létre egy <header>
elemet:
- Tartalmazzon egy <h1>
címet a következő szöveggel: "Sportesemény eredményei".
- Hozz létre egy <main>
elemet, amely tartalmazza a következőket:
- Egy <section> elemet,
amelyben a sporteredmények táblázata található.
- Egy <h2> címet: "Eredménytábla".
- Egy <table> elemet,
amely tartalmazza az alábbi struktúrát:
- <thead>: Sorfejléc az
oszlopok neveivel: "Csapat", "Pontszám",
"Győzelmek", "Vereségek".
- <tbody>: Négy sor,
amelyek az alábbi adatokat tartalmazzák:
- Sólymok, 25, 8, 2
- Villámok, 20, 6, 4
- Farkasok, 15, 4, 6
- Oroszlánok, 10, 2, 8
- <tfoot>: Egy sor, amely
az összesítéseket fogja tartalmazni. Az oszlopnevek: "Összesen",
és az alábbi id-ket kell hozzáadnod a cellákhoz:
- Pontszám: id="total-points"
- Győzelmek: id="total-wins"
- Vereségek: id="total-losses"
- Adj hozzá egy <aside>
elemet a <main> mellé:
- Tartalmazzon két <p>
elemet:
- "Helyszín: Városi
Sportcsarnok"
- "Dátum: 2025. február
15."
- Tartalmazzon egy <img>
elemet a következő URL-el: https://picsum.photos/id/1076/600/400.
- Adj hozzá egy <footer>
elemet:
- Tartalmazzon egy <p>
elemet a következő szöveggel: "Készítette: Neved".
CSS
- Hozz létre egy új CSS fájlt styles.css
néven.
- Állítsd be az alap stílusokat:
- Betűtípus: Arial, sans-serif.
- Háttérszín: #f5f5f5.
- Szövegszín: #333.
- Margó és padding legyen 0.
- A <header> elemet:
- Színezd zöldre: background-color:
#4CAF50;.
- Fehér színű szöveg: color:
white;.
- Igazítsd középre a szöveget: text-align:
center;.
- Adj hozzá ::before és ::after
elemeket ikonokkal:
- Bal oldal: ⚽
- Jobb oldal: 🏆
- A <main> elemet:
- Szélessége legyen 90%, margó
pedig középre igazítva: margin: 2rem auto;.
- Alapértelmezetten legyen
kéthasábos grid: grid-template-columns: 3fr 1fr;.
- A <section> címhez:
- Használj ::before és ::after
tartalmakat:
- Előtte: 📋
- Utána: 📝
- Az <aside> elemet:
- Adj hozzá világos szürke
háttérszínt: background-color: #e0e0e0;.
- Szöveg margó és padding: padding:
1rem;.
- A kép legyen reszponzív: width:
100%;.
- A <table> elemet:
- Szélessége legyen 100%.
- A táblázat sorainak
háttérszínei váltakozzanak:
- Páros sorok: #f9f9f9.
- Páratlan sorok: #e9e9e9.
- A táblázat fejlécének
háttérszíne legyen sötét: #333, fehér szöveggel.
- Adj hozzá egy reszponzív
stílust:
- 768px alatti képernyőméret esetén (max-width:
768px):
- A main grid egyoszlopossá
válik: grid-template-columns: 1fr;.
JavaScript
- Hozz létre egy script.js fájlt.
- Add hozzá a fájlt a HTML végén <script
src="script.js"></script>.
- Írd meg a JavaScript kódot:
- A dokumentum betöltődése után
(DOMContentLoaded):
- Keresd meg a táblázatot az id="result-table"
azonosító alapján.
- Gyűjtsd össze a <tbody>
sorait.
- Számítsd ki az oszlopok
összegét:
- Pontszám (total-points):
Második cella (td).
- Győzelmek (total-wins):
Harmadik cella (td).
- Vereségek (total-losses):
Negyedik cella (td).
- Írd be az eredményeket a <tfoot>
megfelelő celláiba.
- Ellenőrizd, hogy a JavaScript
megfelelően működik:
- A konzol ne dobjon hibát.
- Az összegzett értékek
megjelenjenek a táblázat alján.
- Nyisd meg az oldalt egy
böngészőben, és ellenőrizd, hogy reszponzív, esztétikus és funkcionális.
Tesztelési lépések:
- Változtasd meg a táblázat
értékeit, és ellenőrizd, hogy az összesítés frissül.
- Próbáld ki különböző
képernyőméreteken (pl. mobil nézetben).
- Vizsgáld meg a kódod HTML és
CSS validátorral készíts képernyő képet az eredményről.
Ikonok másolhatóak:
⚽
– "U+26BD" (Foci)
🏆
– "U+1F3C6" (Trófea)
📋
– "U+1F4CB" (Jegyzettömb)
📝
– "U+1F4DD" (Ceruza és jegyzet)
Nincsenek megjegyzések:
Megjegyzés küldése