12 évfolyam gyakorló

 Feladat lépései:

1. HTML Szerkezet létrehozása

• Hozz létre egy új HTML fájlt index.html néven.
• A dokumentum tartalmazzon egy <header> részt, amelyben egy cím szerepel:
  „Táblázat és lista gyakorló feladat”.

2. Táblázat elkészítése

• Hozz létre egy <table> elemet a következő követelményekkel:
• Az első sorban legyen egy Név oszlop, amely rowspan="2" tulajdonsággal két soron keresztül nyúlik.
• Az első sorban legyen egy Pontszám feliratú cella, amely colspan="2" tulajdonsággal két oszlopot fed le.
• A második sor tartalmazza a következő oszlopokat: Matematika és Történelem.
• Az utolsó oszlop legyen Összesen, amely a két tantárgy pontszámainak összegét jeleníti meg.

3. Listák létrehozása

• Készíts két listát egy <section> elem belsejében:
• Rendezetlen lista (<ul>), amely tartalmazzon három tetszőleges elemet.
• Rendezett lista (<ol>), amely szintén tartalmazzon három tetszőleges elemet.

4. CSS Stílusozás

• Alkalmazz stílusokat a következő elvárások szerint:
• A háttérszín legyen világos szürke (#f5f5f5).
• A táblázat szegélyei legyenek vékonyak, szürke színűek (#ddd), és a cellák legyenek középre igazítva.
• A táblázat fejléce és a gombok legyenek cián színűek (#034a4d), fehér szöveggel.
• A Flexbox és CSS Grid technológiák segítségével igazítsd középre az elemeket és rendezd el a szekciókat.

5. JavaScript Dinamika

• Készíts két gombot a következő funkciókkal:
1. „Adj egy új sort a táblázathoz” gomb:
• A gomb megnyomásakor a táblázat végéhez adjon hozzá egy új sort.
• Az új sorba automatikusan kerüljön:
• Név: „Új tanuló”.
• Matematika és Történelem pontszámok: Véletlenszerű egész számok 1 és 100 között.
• Összesen: A két pontszám összege.
• Segítség: használható metódusok: insertRow() ha -1 paramétert adsz meg, akkor a táblázat végére kerül, ha 0-át az elejére; insertCell() a paraméternek azt kell megadni hányadik oszlopba szeretnéd elhelyezni. A 0 az első cella. Math.round(), Math.random() -> 0 és 1 közötti számot kapsz, szorozd 100-al és adj hozzá 1-et. parseInt()-re is szükséged lehet.
2. „Adj egy új lista elemet a felsoroláshoz” gomb:
• A gomb megnyomásakor adjon hozzá egy új elemet a rendezetlen listához (<ul>).
• Az új elem szövege legyen: „Új elem X”, ahol X a lista aktuális hosszához igazodik.

Extra követelmények:

1. Változó színek használata CSS-ben:
   Definiálj CSS változót --cian néven, amelyet a színek meghatározásához használsz.
2. Reszponzív dizájn:
   Gondoskodj róla, hogy az elrendezés különböző képernyőméreteken is megfelelően jelenjen meg.

Bónusz feladat:

1. Törlés funkció:
   Adj hozzá egy új gombot, amellyel törölni lehet a legutolsó sort a táblázatból vagy a legutolsó elemet a listából.
2. Pontszám színezése:
   Ha a pontszám 50 alatt van, jelenjen meg piros színnel, 50 felett zöld színnel.

Mobil nézet: