Felhasználói eszközök

Eszközök a webhelyen


oktatas:web:feladatok:kliens

< Feladatok

Kliens oldali feladatok

Bekérős feladatok

Feladat 0001

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

Feladat 0002

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

Feladat 0003

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ás feladatok

Feladat 0051

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

Feladat 0052

  • 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

Táblázatos feladatok

Feladat 0101

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

Feladat 0102

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

Feladat 0103

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

Feladat 0104

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

Név Megye Terület (km²) Népesség (fő)
Székesfehérvár Fejér 170,89 95545
Szombathely Vas 97,5 78324
Sopron Győr-Moson-Sopron 169,04 62900
Zalaegerszeg Zala 102,42 55470
Sárvár Vas 64,65 15072
Lenti Zala 73,79 7348
Zalakaros Zala 17,17 1936

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

Mentés: latogatni

Feladat 0105

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

Név Megye Terület (km²) Népesség (fő) Népsűrűség (fő/km²)
Görcsöny Baranya 18,52 1517 81,53
Mozsgó Baranya 21,76 959 45,77
Kétújfalu Baranya 16,3 689 41,29
Beremend Baranya 48,26 2306 49,71
Sellye Baranya 25,18 2448 98,45
Lad Somogy 22,35 572 24,47
Babócsa Somogy 30,99 1510 48,73

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

Mentés: latogatos

Feladat 0106

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

Id Name Type ItemNumber Price Category
1 hegedű Soundsation PV-116 343823 37400 vonós
2 hegedű Soundsation PVI-34 348924 38670 vonós
3 hegedű Soundsation VSVI-12 348922 52300 vonós
4 hegedű Soundsation E-master 358421 102400 vonós
5 cselló Soundsation PCE-12 438438 172500 vonós
6 cselló Soundsation PCE-44 493484 168000 vonós
7 cselló Soundsation VSCE-12 438483 211000 vonós
8 cselló Soundsation VPCE-44 482948 512000 vonós
9 brácsa Soundsation VIOVS-15 483433 89000 vonós
10 brácsa Soundsation VIOVS-16 482934 77800 vonós
11 klarinét Soundsation SCL-10E 534323 89300 fúvós
12 klarinét Soundsation SCL-20 534328 130100 fúvós
13 fuvolák Soundsation SFL-10E 543234 97500 fúvós
14 fuvolák Soundsaton SFP-10 548934 119000 fúvós
15 furulya Angel ASRG-50 553282 1100 fúvós
16 furulya SUZUKI SRE-80 554838 2100 fúvós
17 furulya AULOS 203A 559234 4200 fúvós
18 furulya AULOS 309A 558923 14700 fúvós

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

Mentés: hangszerek

Listás szűrős feladatok

Feladat 0151

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

Feladat 0152

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

Táblázatos szűrős feladatok

Feladat 0201

  • 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.

Kiválasztós feladatok

Feladat 0251

  • 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.

Adatok szerveren

Feladat 0301

  • 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

REST API kezelés

Feladat 0351

  • 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

Feladat 0352

  • 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

Feladat 0353

  • 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

Feladat 0354

  • 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

Feladat 0355

  • 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

Feladat 0356

  • 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

Feladat 0357

  • 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

Feladat 0358

  • 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

Feladat 0359

  • 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

Feladat 0360

  • 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

Feladat 0361

  • 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

Feladat 0362

  • 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

Feladat 0363

  • 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

Feladat 0364

  • 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

Feladat 0365

  • 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

Feladat 0371

  • 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

Feladat 0372

  • 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

Érvényesítés

Feladat 0401

  • 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.

Tesztelés

Feladat 0451

  • 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

oktatas/web/feladatok/kliens.txt · Utolsó módosítás: 2024/07/30 19:44 szerkesztette: admin