Kliens oldali feladatok

• Szerző: Sallai András
• Copyright © 2022, Sallai András
• Szerkesztve: 2022, 2024
• Licenc: CC BY-SA 4.0
• 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

Járművekről szeretnénk adatokat tárolni:

jarmuvek(id, rendszam, szin, marka, ar)

Használhatunk angol elnevezéseket:

vehicles(id, licensePlate, color, brand, price)

Feladat:

• 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

tarolo.js

const buvarok = [
    {
        id: 1,
        nev: "Berta Evelin",
        kor: 28,
        neme: "nő",
        magassag: 170
    },
    {
        id: 2,
        nev: "Tingó Lajos",
        kor: 32,
        neme: "férfi",
        magassag: 183
    },
    {
        id: 3,
        nev: "Csaló Ferenc",
        kor: 28,
        neme: "férfi",
        magassag: 178
    },
    {
        id: 4,
        nev: "Csadi Borbála",
        kor: 31,
        neme: "nő",
        magassag: 168
    }
  ];

• A meglévő listát illessze be a JavaScript alkalmazásba.
• Generálja weboldalon egy táblázatba a lista tartalmát.
• Vegyen fel a táblázat felett egy bevitelimezőt.
• JavaScript oldalon kezeljük az input elem tartalmának változását.
• Az input elembe írt szöveg, működjön szűrőszövegként.

Minta:

Mentés: buvarok

• 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.
  • id - azonosító
  • name - név
  • city - település
  • salary - 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.

employees.json

{
    "employees": [
        {
            "id": 1,
            "name": "Erős István",
            "city": "Szeged",
            "salary": 395
        },
        {
            "id": 2,
            "name": "Csárdás Katalin",
            "city": "Szolnok",
            "salary": 393
        }
    ]
}

Mentés: empek

• Kérje le egy REST API cards végpontjáról járművek adatait.
  • id - azonosító
  • plate - rendszám
  • color - szín
  • year - évjárat
  • price - á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.

{
    "cards": [
        {
            "id": 1,
            "plate": "ABC-123",
            "color": "zöld",
            "year": 1998,
            "price": 1568
        },
        {
            "id": 2,
            "plate": "DVA-235",
            "color": "kék",
            "year": 2003,
            "price": 2100
        }        
    ]
}

Mentés: cardes

• Kérje le egy REST API books végpontjáról könyvek adatait.
  • id - azonosító
  • title - cím
  • author - szerző
  • price - á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.

books.json

{
    "books": [
        {
            "id": 1,
            "title": "A tenger szeme",
            "author": "Bart Even",
            "price": 12.4
        },
        {
            "id": 2,
            "title": "Balonhegy",
            "author": "Ten Igor",
            "price": 11.2
        }        
    ]
}

Mentés: bookes

• Kérje le egy REST API customers végpontjáról ügyfelek adatait.
  • id - azonosító
  • name - ügyfél neve
  • email - ügyfél e-mail címe
  • city - ügyfél települése
• 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.

{
    "customers": [
        {
            "id": 1,
            "name": "Farkas Ernő",
            "email": "farkas@zold.lan",
            "city": "Hatvan"
        }
    ]
}

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.

{
    "contacts": [
        {
            "id": 1,
            "name": "Erőpont Bt",
            "contact": "Pontos Lajos",
            "email": "pontos@zold.lan",
            "type": "vevő"
        }
    ]
}

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.

{
    "complaints": [
        {
            "id": 1,
            "description": "Vr 0.5 nem indul",
            "colmplainant": "Tere Tünde",
            "products": "Vr 0.5",
            "type": "új"
        }
    ]
}

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.

{
    "feedbacks": [
        {
            "id": 1,
            "description": "Ede v1.0 használata",
            "indicator": "Fáber Tibor"
            "date": "2024-05-30",
            "evaluation": 5
        }
    ]
}

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.

products.json

{
    "products": [
        {
            "id": 1,
            "name": "tej",
            "description": "Párduc tej",
            "price": 0.8,
            "unit": "liter"
        },
        {
            "id": 2,
            "name": "vaj",
            "description": "Bola vaj",
            "price": 0.51,
            "unit": "gramm"
        },
        {
            "id": 3,
            "name": "kenyér",
            "description": "barna",
            "price": 0.48,
            "unit": "kg"
        },
        {
            "id": 4,
            "name": "tejföl",
            "description": "Mormota tejföl",
            "price": 0.77,
            "unit": "dl"
        },
        {
            "id": 5,
            "name": "túró",
            "description": "Csattos túró",
            "price": 1.12,
            "unit": "gramm"
        },
    ]
}

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 le egy REST API paintings végpontjáról festmények adatait.
  • id - azonosító
  • title - a festmény címe
  • artist - festő
  • creation_year - a készítés éve
  • medium - mivel készült (pl. olaj, akverell, tempera)
• 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éldafestmények:

database.json

{
   "paintings":[
      {
         "id":1,
         "title":"Csillagos éjszaka",
         "artist":"Vincent van Gogh",
         "creation_year":1889,
         "medium":"olajfestmény"
      },
      {
         "id":2,
         "title":"A Mona Lisa",
         "artist":"Leonardo da Vinci",
         "creation_year":1503,
         "medium":"olajfestmény"
      },
      {
         "id":3,
         "title":"Az Önarckép",
         "artist":"Rembrandt",
         "creation_year":1660,
         "medium":"olajfestmény"
      },
      {
         "id":4,
         "title":"A szüret",
         "artist":"Munkácsy Mihály",
         "creation_year":1885,
         "medium":"olajfestmény"
      },
      {
         "id":5,
         "title":"Tavaszi virágok",
         "artist":"Claude Monet",
         "creation_year":1873,
         "medium":"olajfestmény"
      }
   ]
}

Mentés: festi

• Kérje le egy REST API stars végpontjáról csillagok adatait.
  • id - azonosító
  • name - a csillag neve
  • magnitude - fényesség
  • distance - földtől mért távolság (fényév)
  • spectrum - színképosztály
• 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:

stars.json

{
    "stars": [
        {
            "id": 1,
            "name": "Proxima Centauri",
            "magnitude": 15.53,
            "distance": 4.22,
            "spectrum": "M5.5Ve"
        },
        {
            "id": 2,
            "name": "Barnard",
            "magnitude": 13.22,
            "distance": 5.96,
            "spectrum": "M4.0Ve"
        },
        {
            "id": 3,
            "name": "Wolf",
            "magnitude": 16.55,
            "distance": 7.78,
            "spectrum": "M6.0V"
        },
        {
            "id": 4,
            "name": "Szírius A",
            "magnitude": 1.47,
            "distance": 8.58,
            "spectrum": "A1V"
        },
        {
            "id": 5,
            "name": "Ross",
            "magnitude": 14.79,
            "distance": 10.32,
            "spectrum": "M1.5Ve"
        }
    ]
}

Mentés: staros

• Kérje le egy REST API motorcycles végpontjáról motorkerékpárok adatait.
  • id - azonosító
  • brand - márka
  • year - évjárat
  • volume - hengerűrtartalom
  • mileage - hány kilométert futott
• 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:

motorcycles.json

{
    "motorcycles": [
        {
            "id": 1,
            "brand": "Yamaha",
            "year": 2008,
            "volume": 50,
            "mileage": 11000
        },
        {
            "id": 2,
            "brand": "Honda",
            "year": 2008,
            "volume": 108,
            "mileage": 11834
        },
        {
            "id": 3,
            "brand": "Aprilia",
            "year": 1999,
            "volume": 652,
            "mileage": 27761
        },
        {
            "id": 4,
            "brand": "Harley-Davidson",
            "year": 2008,
            "volume": 1584,
            "mileage": 70000
        },
        {
            "id": 5,
            "brand": "Kawasaki",
            "year": 2018,
            "volume": 948,
            "mileage": 4200
        }
    ]
}

Mentés: motoros

• Kérje le egy REST API seas végpontjáról tengerek adatait.
  • id - azonosító
  • name - név
  • area - területe (km²)
  • maxdepth - legnagyobb mélység (m)
  • volume - térfogat (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:

seas.json

{
    "seas": [
        {
            "id": 1,
            "name": "Korall-tenger",
            "area": 4790000,
            "maxdepth": 7661,
            "volume": 11496000
        },
        {
            "id": 2,
            "name": "Tasmán-tenger",
            "area": 4000000,
            "maxdepth": 5200,
            "volume": 11000000
        },
        {
            "id": 3,
            "name": "Hudson-öböl",
            "area": 1232300,
            "maxdepth": 183,
            "volume": 157734
        },
        {
            "id": 4,
            "name": "Japán-tenger",
            "area": 977979,
            "maxdepth": 3742,
            "volume": 1713456
        },
        {
            "id": 5,
            "name": "Kara-tenger",
            "area": 880000,
            "maxdepth": 620,
            "volume": 111760
        }
    ]
}

Mentés: seaser

• Kérje le egy REST API crops végpontjáról gabonák adatait.
  • id - azonosító
  • name - név
  • forage - takarmány (true/false)
  • quantity - mennyiség (q)
• 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.

crops.json

{
    "crops": [
        {
            "id": 1,
            "name": "cirok",
            "forage": false,
            "quantity": 1200
        },
        {
            "id": 2,
            "name": "rizs",
            "forage": false,
            "quantity": 33000
        },
        {
            "id": 3,
            "name": "köles",
            "forage": false,
            "quantity": 45000
        },
        {
            "id": 4,
            "name": "búza",
            "forage": true,
            "quantity": 25200
        },
        {
            "id": 5,
            "name": "rozs",
            "forage": false,
            "quantity": 32000
        }
    ]
}

Mentés: cropser

• Kérje le egy REST API screws végpontjáról csavarok adatait.
  • id - azonosító
  • size - méret
  • right - jobbmenetes (true/false)
  • rupture - szakadási nyomaték (Nm, 5 és 30 közötti szám)
• 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.

screws.json

{
    "screws": [
        {
            "id": 1,
            "size": 14,
            "right": true,
            "rupture": 20
        },
        {
            "id": 2,
            "size": 16,
            "right": false,
            "rupture": 16
        },
        {
            "id": 3,
            "size": 12,
            "right": false,
            "rupture": 24
        },
        {
            "id": 4,
            "size": 16,
            "right": true,
            "rupture": 28
        },
        {
            "id": 5,
            "size": 18,
            "right": true,
            "rupture": 30
        }
    ]
}

Mentés: screwer

• 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érje be egy kocsi adatait űrlapon.
  • rendszám
  • szín
  • űrtartalom
  • évjárat
  • ár
• A bekért adatokat küldje el POST metódussal egy szerver végpontjára.
• Végpont: /api/cars

Mentés: kocsizas

• 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