[[oktatas:web:feladatok|< Feladatok]]
====== Kliens oldali feladatok ======
* **Szerző:** Sallai András
* Copyright (c) 2022, Sallai András
* Szerkesztve: 2022, 2024
* Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
* Web: https://szit.hu
===== 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 ====
* 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
===== 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": [
{
"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": [
{
"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": [
{
"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:
{
"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:
{
"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": [
{
"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": [
{
"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": [
{
"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": [
{
"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": [
{
"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