Kliens oldali feladatok

• Szerző: Sallai András
• Copyright © Sallai András, 2022
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

Készítsen webes felületet, amely bekéri egy látogató adatait, regisztrációs céllal.

A minimálisan tárolandó adatok:

• név
• irányítószám
• település (lakcím)
• cím
• e-mail
• telefon

A bekérés után jelenítse meg az adatokat egy párbeszéd vagy modális ablakban.

Mentés: reges

Kérje be egy felhasználó nevét és jelszavát. A bekért felhasználónevet és jelszót ellenőrizze. Csak egy név és egy jelszó legyen elfogadott.

Egy párbeszédablakban vagy modális ablakban írassa ki, az azonosítás eredményét.

Mentés: logos

Egy új termék adatait kell felvennie, egy raktári felületen. Kérje be egy termék adatait. Minimálisan bekérendő adatok:

• név (az áru neve)
• leírás (típus, gyártó, verzió stb.)
• egységár
• darabszám
• cikkszám

A bekért adatokat jelenítse meg a böngésző konzolján, külön sorokban. A bekért adatokat jelenítse meg a böngésző weblapján párbeszédablak formájában. Minden adat külön sorban szerepeljen felirattal.

Mentés: termek

Listázza követendő járművek rendszámait. Script oldalon vegyen fel legalább 8 járművet, tömbben vagy listában. Jelenítse meg a felvett járműveket a listában.

Ügyeljen arra, hogy a megjelenített adatok csak script oldalról származzanak.

Tegye lehetővé új rendszám hozzáadását.

Mentés: korozes

• Készítsen listát teendők számára.
• Script oldalon készítsen egy tömböt, amibe felvehetők az teendők.
  • A tömb kezdetben legyen üres.
• HTML oldalon készítsen űrlapot, ahol felveheti egy teendőt.
  • Az űrlap kezdetben legyen üres.
• A bekért teendőt vegye fel a listába és a tömbbe is.

Mentés: teendo

Készítsen listát járművekről. Tegye lehetővé új jármű felvételét.

Bekérendő adatok:

• rendszám
• űrtartalom
• szín
• évjárat
• kiírt ár

Mentés: jarmuves

Készítsen listát (tömböt) egy futóverseny eredményeiről.

Tárolandó adatok:

• sportoló azonosítója
• sportoló neve
• hány kilométeren indult
• mennyi idő alatt teljesítette a távot

Vegyen fel minimum 7 versenyzőt tetszőleges adatokkal listában (tömbben).

Jelenítse meg weboldalon egy táblázatban az adatokat.

Mentés: futover

Készítsen listát (tömböt) egy karate verseny résztvevőinek eredményéből.

Tárolandó adatok:

• sportoló azonosítója
• sportoló neve
• milyen versenyszámban indult
  • kumite, kata
• elért helyezés

Vegyen fel minimum 7 versenyzőt tetszőleges adatokkal egy listába (tömbbe).

Jelenítse meg weboldalon egy táblázatban az adatokat.

Mentés: karatever

Adott a következő lista (tömb) településekről.

Tárolja listában (tömbben) az adatokat. Jelenítse meg táblázatban az adatokat.

Mentés: latogatni

Adott a következő lista (tömb) településekről.

Tárolja listában (tömbben) az adatokat. Jelenítse meg táblázatban az adatokat.

Mentés: latogatos

Adott a következő lista (tömb) hangszerekből:

Tárolja listában (tömbben) az adatokat. Jelenítse meg táblázatban az adatokat.

Mentés: hangszerek

• Készítsen listát járművekről.
• A list tartalma script oldalon generálódjon.
• Vegyen fel egy input elemet.
• Tegye lehetővé a szűrést az input elembe írt betűk, szavak alapján.
• A betűk vagy szavak beírására, változzon a megjelenített tartalom mennyisége.

Mentés: jarszur

• Készítsen táblázatot járművekről.
• Tárolandó adatok
  • rendszám
  • űrtartalom
  • szín
  • ár
• A tábla tartalma script oldalon generálódjon.
• Vegyen fel egy input elemet.
• Tegye lehetővé a szűrést az input elembe írt betűk, szavak alapján.
• A betűk vagy szavak beírására, változzon a megjelenített tartalom mennyisége.

• Vegyen fel script oldalon két listát:
  • beosztások(az, név)
  • dolgozók(az, név, település, fizetés)
• A beosztásokból vegyen fel min. 5-t.
• A dolgozókból vegyen fel min. 12-t.
• Jelenítse meg a dolgozókat egy táblázatban.
• Jelenítse mega beosztásokat egy legördülő listadobozban.
• A legördülő listadobozban lehessen kiválasztani egy beosztást.
• A kiválasztás után csak a kiválasztott beosztásokhoz tartozó dolgozók adatai jelenjenek meg.

• Kérje be egy dolgozó adatait űrlapon.
  • név, település, fizetés
• A bekért adatokat script oldalon alakítsa JSON formára.
• Küldje el az adatokat GET kéréssel egy szerver végpontjára.
• A végpont neve: save

Mentés: kuldes

• Kérje le egy REST API employees végpontjáról a dolgozók adatait.
  • azonosító, név, település, fizetés
• A lekért adatokat tárolja tömbben.
• Renderelje a tömb adatait egy táblázatba.
• Használjon CSS-t vagy CSS keretrendszert a weblap stílusának beállításához.

Mentés: empek

• Kérje le egy REST API cards végpontjáról járművek adatait.
  • azonosító, rendszám, szín, évjárat, ár
• A lekért adatokat tárolja tömbben.
• Renderelje a tömb adatait egy táblázatba.
• Használjon CSS-t vagy CSS keretrendszert a weblap stílusának beállításához.

Mentés: cardes

• Kérje le egy REST API books végpontjáról könyvek adatait.
  • azonosító, cím, szerző, ár
• A lekért adatokat tárolja tömbben.
• Renderelje a tömb adatait egy táblázatba.
• Használjon CSS-t vagy CSS keretrendszert a weblap stílusának beállításához.

Mentés: bookes

• Kérje le egy REST API customers végpontjáról ügyfelek adatait.
  • id, name, email, city
• A lekért adatokat tárolja tömbben.
• Renderelje a tömb adatait egy táblázatba.
• Használjon CSS-t vagy CSS keretrendszert a weblap stílusának beállításához.

Mentés: customeres

• Kérje le egy REST API contacts végpontjáról kapcsolatok adatait.
  • id - azonosító
  • name - cég, ügyfél, partner
  • contact - kapcsolattartó személy
  • email - kapcsolattartó email címe
  • type - szállító, vevő, stb
• A lekért adatokat tárolja tömbben.
• Renderelje a tömb adatait egy táblázatba.
• Használjon CSS-t vagy CSS keretrendszert a weblap stílusának beállításához.

Mentés: contactere

• Kérje le egy REST API complaints végpontjáról panaszok adatait.
  • id - azonosító
  • description - a panasz leírása
  • complainant - panaszos
  • products - termék amit érint a panasz
  • type - a panasz típusa (új, vizsgálat alatt, megoldva, lezárva)
• A lekért adatokat tárolja tömbben.
• Renderelje a tömb adatait egy táblázatba.
• Használjon CSS-t vagy CSS keretrendszert a weblap stílusának beállításához.

Mentés: compla

• Kérje le egy REST API feedbacks végpontjáról visszajelzések adatait.
  • id - azonosító
  • description - a visszajelzés leírása
  • indicator - visszajelző személy
  • date - dátum
  • evaluation - elégedettség 1-10 skálán
• A lekért adatokat tárolja tömbben.
• Renderelje a tömb adatait egy táblázatba.
• Használjon CSS-t vagy CSS keretrendszert a weblap stílusának beállításához.

Mentés: feedes

• Kérje le egy REST API products végpontjáról termékek adatait.
  • id - azonosító
  • name - a termék neve
  • description - a visszajelzés leírása
  • price - ár
  • unit - mennyiségi egység (kg, liter, darab stb)
• A lekért adatokat tárolja tömbben.
• Renderelje a tömb adatait egy táblázatba.
• Használjon CSS-t vagy CSS keretrendszert a weblap stílusának beállításához.

Mentés: prodes

• Kérje le egy REST API countries végpontjáról országok adatait.
  • id - azonosító
  • name - az ország neve
  • capital - főváros
  • population - népesség (pl. 36,82 millió)
  • area - terület (pl. 322 575 km²
• A lekért adatokat tárolja tömbben.
• Renderelje a tömb adatait egy táblázatba.
• Használjon CSS-t vagy CSS keretrendszert a weblap stílusának beállításához.

Példaországok:

orszagok.json

{
    "countries": [
        {
            "id": 1,
            "name": "Lengyelország",
            "capital": "Varsó",
            "population": 36.82,
            "area": 322575
        },
        {
            "id": 2,
            "name": "Bulgária",
            "capital": "Szófia",
            "population": 6.465,
            "area": 110994
        },
        {
            "id": 3,
            "name": "Portugália",
            "capital": "Lisszabon",
            "population": 10.41,
            "area": 92152
        },
        {
            "id": 4,
            "name": "Spanyolország",
            "capital": "Madrid",
            "population": 47.78,
            "area": 506030
        },
        {
            "id": 5,
            "name": "Franciaország",
            "capital": "Párizs",
            "population": 67.97,
            "area": 551695
        }
    ]
}

Mentés: countes

• Kérje be egy dolgozó adatait űrlapon.
  • név, település, fizetés
• A bekért adatokat küldje el POST metódussal egy szerver végpontjára.
• Végpont: /api/employees

Mentés: doliga

• Készítsen weblapot, ami dolgozók adatait kéri be.
• A következő adatokat kérje be:
  • név
  • település
  • fizetés
• Kezelje az űrlap tartalmát script oldalon.
• A beírt adatokat írja konzolra.
• Validálás:
  • Minden adat beírása legyen kötelező.
  • Minden adat minimum 3 karakter legyen.
  • Ha nincs beírva egy adat, legyen piros szegély baloldalon.

• Készítsen weblapot, dolgozók adatainak bekérésére.
• Írjon tesztet.
  • Vizsgálja meg, hogy van-e fullname azonosítójú elem a weblapon.
  • Vizsgálja meg, hogy van-e city azonosítójú elem a weblapon.
  • Vizsgálja meg, hogy van-e salary azonosítójú elem a weblapon.

Mentés: dolte