[[oktatas:web:feladatok|< Feladatok]] ====== Kliens oldali feladatok ====== * **Szerző:** Sallai András * Copyright (c) Sallai András, 2022 * 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. * 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 ==== Feladat 0352 ==== * 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 ==== Feladat 0353 ==== * 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 ==== Feladat 0354 ==== * 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 ==== 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. 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. 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. 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. 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 0361 ==== * 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 ===== É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