Ebben a feladatban egy bevásárlólistát készítünk.
Új tételt a szöveges mezőbe kell beírni, majd a rögzítéshez meg kell nyomni az Enter billentyűt, vagy rá kell kattintani a Hozzáadás gombra.
Egy tételt a listában az X gombbal lehet törölni, a ceruza gombra kattintva pedig szerkeszteni.
Az új és a szerkesztett tételek a lista végére kerülnek.
A lista az oldal frissítékor vagy újra megnyitásakor sem törlődik. Az adatokat a böngészőben (LocalStorage) tároljuk.
- Forkold ezt a repository-t a saját repository-dba, majd klónozd a saját számítógépedre, és a továbbiakban ebben dolgozz! A módosításokat töltsd fel a GitHubra is!
-
Az oldal lapfülön megjelenő címe legyen Bevásárlólista! Ez a cím jelenjen meg első szintű címsorként is az oldal tetején!
-
A szöveges beviteli mező és a gomb egy formon helyezkedjen el! A szöveges mező azonosítója legyen "uj-elem", és az oldal betöltődésekor automatikusan kerüljön rá a kurzor! A gomb submit típusú legyen!
-
A form után legyen egy üres szakasz (div) "lista" azonosítóval! Ebbe kerülnek majd a bevitt elemek.
-
KApcsold az oldalhoz a styles.css stílusfájlt és az app.js szkriptet!
-
Commitold a módosításokat!
-
Az oldal körül legyen 1 rem nagyságú belső margó! Háttere cornsilk színű legyen! A betűtípust állítsd Verdana-ra vagy talpatlanra!
-
A form margói felül és alul 1rem, két oldalon pedig 0 méretűek legyenek!
-
A formon lévő szöveges mező betűmérete 1.1rem legyen!
-
A lista margói felül és alul 0.5rem, két oldalon pedig 0 méretűek legyenek! A betűmérete 1.1rem legyen!
-
Készíts egy osztályt a listaelemeknek "lista-elem" néven! Ebben állítsd be, hogy a margók felül és alul 0.5rem, két oldalon pedig 0 méretűek legyenek!
-
A "lista-elem" osztályú elemek belsejében lévő gombok betűmérete 1rem, jobb oldali margója 0.5rem legyen!
-
Commitold a módosításokat!
-
Készíts egy-egy állandót az oldal főbb elemeinek:
form - úrlap,
ujelem - "uj-elem" azonosítójú elem
lista - "lista" azonosítójú elem -
Egy új elemnek így kell megjelennie a HTML kódban:
Készíts egy letrehoz nevű függvényt, amely a lista HTML kódjához hozzáfűzi egy ilyen elem kódját! Az elem nevét paraméterként kapja meg a függvény! Próbáld ki a függvényt a konzolról! -
Készíts egy eseménykezelőt a form submit eseményéhez! Ez akkor következik be, amikor megnyomjuk a Hozzáad gombot vagy az Enter billentyűt. Az eseménykezelő egy paraméterben kapja meg az esemény részleteit. Nevezd ezt e-nek!
-
A submit gomb megnyomásakor az oldal automatikusan újratöltődik. Akadályozd meg ezt az eseménykezelőben!
-
Úres elemeket nem szeretnénk hozzáadni a listához. Üres szövegmező esetén az eseménykezelő fejezze be a működését!
-
Az eseménykezelő hívja meg a letrehoz függvényt a szöveges mezőbe írt szöveggel!
-
Az új elem felvétele után a szöveges mező törlődjön, és kerüljön rá a kurzor! Próbáld ki az adatok bevitelét a böngészőben!
-
Készíts egy torol nevű függvényt, amely paraméterként kapja meg a törlendő elem gyermek elemét, és eltávolítja azt az oldalról! A törlés után kerüljön a szövegmezőre a fókusz!
-
Egészítsd ki a letrehoz függvényt úgy, hogy az új elem első gombja hívja meg a függvényt az adott elemmel! Próbáld ki a töröl gomb működését!
-
Készíts egy szerkeszt nevű függvényt, amely paraméterként kapja meg a szerkesztendő elem gyermek elemét! A szerkesztéshez másolja az elem szövegét a szövegmezőbe és távolítsa el az elemet a listából!
-
Egészítsd ki a letrehoz függvényt úgy, hogy az új elem második gombja hívja meg a szerkeszt függvényt az adott elemmel! Próbáld ki a szerkeszt gomb működését!
-
Az oldal frissítésekor újratöltésekor is szeretnénk megőrizni a lista tartalmát. Ehhez készíts egy ment nevű függvényt, amely elmenti a lista teljes tartalmát a böngésző helyi tárolójába (Local storage-ba) egy bevasarlolista nevű kulccsal! Próbáld ki a mentést a böngésző konzoljáról! Ellenőrizd a Local storage tartalmát!
-
Készíts egy betolt nevű függvényt, amely betölti a listába a Local storage bevasarlolista kulcsához tartozó szöveget! Ha nincs bevasarlolista mevű kulcs, akkor üres legyen a lista!
-
Az oldal betöltésekor hívja meg a betolt függvényt!
-
Commitold a módosításokat!
-
Publikáld az oldalt a GitHubon!
-
Próbáld ki a böngészőben és mobilon is a működését!