Bevásárlólista
A következőkben egy olyan webalkalmazást kell készítened, amely segítségével egy egyszerű bevásárlólistát kap a felhasználó.
Szükséges tudás
Osztályok
Készítsd el a megadott osztályokat az alábbi ábra alapján a /src/models könyvtárban találhazó fájlokban.
index.html
Készítsd el az oldalt Bootstrap segítségével, úgy hogy legyen egy veszélyes típusú navigációs sáv, amely tartalmazza a keresősávot is, valamint a különböző kategóriájú bevásárló listákat lenyíló menüben, amelyekre kattintva az adott lista elemeit jeleníti meg a felhasználó számára, valamint lehetőséget biztosít új elem felvételére.
Az oldal törzséből (main) készíts egy reszponzív tárolót, benne 3 sorral. Minden sor 1-1 oszlopot fog tartalmazni, az összes kérenyő méreten.
Az első sor tartalmazza az adott lista nevét, a második sorban jelenjen meg az űrlap amin keresztül a felhasználó felviszi az új elemet.
Az utolsó sor pedig megát a listát tartalmazza.
Az egyes listák megjelenítéséhez használd a Bootstrap List group komponensét. Oldd meg minden elem estén, hogy legyen olyan gomb, amellyel törölni és módosítani lehet az adott elemet.
Ha a felhasználó az adott elem szövegére katting, akkor az adott elemet jelöld késznek, megelenésében pedig legyen sikeres hátterű és legyen áthúzott szövegű.
Alap kategóriák
- Karácsonyi ételek hozzávalói
- Sütemény hozzávalók
- Ajándékok
- Egyebek
src/main.mjs
Hozd létre a kategóriáknak megfelelő listákat. Oldd meg, hogy a megfelelő menüpont kiválasztásakor a megfelelő listát írasd ki és a megfelelő helyre vedd fel az elemet.
*Iterator
Készíts iteratort a List osztály számára, amely a tömb egyes elemein megy végig.
*Új lista
Vegyél fel egy új menüpontot, amely egy modal segítségével új listát tud létrehozni.
*Tárolás
Az elkészült listákat tárold el local storage-ben, annak érdekében, hogy később újra felhasználható legyen. Ügyelj rá, hogy minden változást szinkronizálj!
*Keresés
Valósítsd meg a keresés funkciót, amely bármely listában név alapján visszaadja azokat a ez elemeket, amelyek megfeleltek a keresésnek. Ekkor elegendő csak két sor megjelenítése és a cím legyen Keresés: + keresett kifejezés
\pagebreak