Készíts egy jelszógenerátort Javascript segítségével!

 Az elkészült weboldal megjelenése a következő legyen :

Egyszerű szürke háttér, az input mezőket tartalmazó konténer kerüljön az oldalon középre. Használd a labal tag-eket is az input mezőkhöz. 

A jelszó csak a bejelölt checkbox-ok szerint generálja le az új jelszót a megadott hosszúságban.

Egy kis segítség, hogy ezeket ne kelljen begépelned:

    let lowercase = 'abcdefghijklmnopqrstuvwxyz';

    let uppercase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

    let numbers = '0123456789';

    let symbols = '!@#$%^&*_=+-/.?<>)';

Adatok beolvasása tömbből és rendezés kattintásra

 Írj egy Javascript kódot, amely megjeleníti a következő adatokat a weboldalon:

let webAppsData = [

    {"name": "Google Search", "users": "2 Billion"},

    {"name": "YouTube", "users": "1.9 Billion"},

    {"name": "Facebook", "users": "2.8 Billion"},

    {"name": "Gmail", "users": "1.5 Billion"},

    {"name": "WhatsApp Web", "users": "2 Billion"},

    {"name": "Amazon", "users": "300 Million"},

    {"name": "Twitter", "users": "330 Million"},

    {"name": "Zoom", "users": "300 Million"},

    {"name": "LinkedIn", "users": "740 Million"},

    {"name": "Google Drive", "users": "1 Billion"}

];

Képernyő nézet:

Az elrendezéshez használj Bootstrap-et! 

A kék gombra kattintva rendezze az adatokat a legtöbb felhasználó szerinti sorrendben, a zöld gombra kattintva pedig a legkevesebb felhasználó szerinti sorrendben.

Őszi szünet házi feladat

 Készíts egy single-page weboldalt, amely a következőket tartalmazza:

1.      Tartalmazzon az oldal egy menüt;

2.      Paragrafusokat, behúzással, sorköz távolsággal, sorkizártan;

3.      listákat (számozott, számozatlan);

4.      külső fájlban csatolj az oldalhoz javascript fájlt;

5.      valamelyik listához lehessen hozzá adni új elemet, vagyis helyezz el alatta egy input beviteli mezőt, amelybe ha a szöveget beírunk, megjelenik a lista elemek után; (javascript)

6.      próbáld meg megoldani, hogy ne lehessen hozzá adni a listához újra ugyanazt a szöveget;

7.      képeket;

8.      linkeket;

9.      űrlapot legalább 4 féle input beviteli mezővel;

10.   az űrlap kötelező elemeit emeld ki valamilyen módon;

11.   azonosító alapú formázást (id);

12.   osztály alapú formázást (class);

13.   legalább egy elem, változzon meg amikor fölé visszük az egeret (hover);

14.   legalább egy paragrafus első sora nézzen ki más formátumban (betűszín, stílus stb.)

15.   javascripttel végezd el az űrlap validációját;

16.   tartalmazzon az oldal táblázatot is;

17.   a táblázatban legyen cella összevonás is;

18.   a táblázat minden sora más háttérszínű legyen;

19.   validált az oldalad html és css kódját; készíts a validálásról képernyő képet;

20.   A kódod tartalmazzon kommenteket.

21.   Készíts dokumentációt az oldaladhoz. (Cím; alcímek ha szükséges, word-ben TimesNewRoman 12pt; másfeles sorkizárással; felhasznált technológiák; oldal felhasználói leírása; majd fejlesztői dokumentáció. Forrásokat jelöld!!! Lehet lábjegyzetben is. (Erre külön jegyet kapsz.)

Js gyak2

 Készíts egy egyszerű weboldalt a következő tartalommal: 

Írj hozzá scriptet, ha a felhasználó beír két számot, akkor a Számol gombra kattintva megjelenik az eredmény:

Js gyak1

 Készíts egy weboldalt, amelyen egy gomb kerül elhelyezésre, amelyre ha kattintunk az alatta lévő html elemben megjelenik a "Hello Világ" felirat!

Táblázat

 Készítsd el az alábbi weboldalt:

1.      A címsor: Művészeti Galéria kiállításai első szintű címsorba helyezd, a háttere blue színű legyen.

2.      A weboldalon a betűk típusa: Arial, sans-serif legyen.

3.      A weboldal háttérszíne #f5f5f5 legyen.

4.      A táblázat első sora fejléc típusú cellákat tartalmazzon.

5.      A második sor háttérszíne darkgrey legyen, és fehér betűkkel.

6.      A második és ötödik sorban lévő cellákat a minta szerint vond össze egy cellává.

7.      A harmadik oszlopban lévő két cellát ami a dátumot tartalmazza a minta szerint vond össze.

8.      A táblázat keretének színe: #ddd legyen.

9.      A táblázat szélessége 80%-os legyen.

10.   A táblázat árnyéka jobbra 0px-el, lefelé 2px-el, legyen eltolva és 5px –el szórással, a színe áttetsző 20% -os fekete legyen.

Javascript start bevezetés gyakorló feladatsor

 <body>

    <!--5.) feladat-->

    <h2>Z változó értéke:</h2>

    <p id="text"></p>

    <!--9.) gyümölcsök lista megjelenítése-->

    <h2>Gyümölcsök</h2>

    <div id="fruits"></div>

    <!-- fruit mint innerHTML csillagokkal elválasztva:

    apple * orange * citron * Lemon -->

    <div id="inner"></div>

    <script>

        //1.deklaráld a következő 3 változót egyszerre: x,y,z

       

        // 2. az x-nek add az 5-öt, az y-nak a 6-ot értéknek

       

        //3. írasd ki őket a konzolba a következő módon:

        // x változó értéke: 5;

        // y változó értéke: 6;

     

        //4 a z változó értéke az x és y összege legyen

 

        // 5 a z változó értékét írasd ki egy paragrafusba

 

       

        //6. Hozz létre egy fruit nevű tömböt, apple, orange, citron gyümikkel;

     

        //7. írasd ki a konzolba az első elemet:

 

        //8. adjunk hozzá a fruit tömbhöz egy lemon elemet

   

        //9.  írassuk ki a lista elemeit felsorolásként

   

        // 10. Tárold el egy size nevű változóba hány eleme van a fruit tömbnek

   

        //11. írasd ki a konzolba: A fruit tömben 4 található.

       

        /*12. írasd ki az inner azonosítójú konténerbe a tömb elemeit csillaggal elválasztva, (join() metódussal)*/

       

        /* 13. távolítsuk el a az utolsó elemet pop(), és tároljuk el az eltávolított elemet egy lastOut változóba*/

   

        //14. írasd ki a konzolba az out tartalmát: az utlsó eltávolított elem az ...

       

        //15. távolítsuk el a tömb első elemét:

     

        //16. írasd ki a konzolba az out tartalmát: az első eltávolított elem az ...

     

        /*17. hozz létre egy objektumot car néven, tartalmazza a következő kulcs érték párokat: type opel, model astra, color blue*/

       

        //18. változtasd meg benne az autó színét pirosra

       

        //19. adj hozzá új kulcs érték párt

       

        //20. írasd ki a konzolba, hogy az opel autó tulajdonosa Lali

       

    </script>

</body>

14 szn

 

Készítsd el az alábbi feladatokat egy db html fájlban

 

Hozz létre egy html fájlt a neved legyen a neve, pl: zita.html 

Az oldal háttérszíne piros fehér piros legyen.

Az oldal tartalma kerüljön a weblap közepére, amelyet flexbox használatával helyezz el középen. 

Helyezz el benne egy első szintű címsort, amelybe a html szakaszba ne írj szöveget, viszont javascripttel szelektáld ki, és írd bele "Szia";

Helyezz el az oldalon egy 3 soros és 3 oszlopos táblázatot. 

Az első sora fejléc típusú legyen.

Az első sorát vond össze írd bele "Autók" egy második szintű címsorba. 

A második sorban is vont össze a 3 cellát, és helyezd el benne a piros autó fotóját. 

A harmadik sorban a cellákban egyesével helyezz el egy egy gombot, amelyekre  a piros, zöld, fehér feliratok kerüljenek.

A táblázathoz adj hozzá egy 3px-el egyenes vonalú fekete keretet.

A táblázat háttérszíne 50%-os fehér legyen.

Old meg javascripttel, hogyha kattintás történik az különböző gombokra, akkor az adott színnek megfelelő színű autó jelenjen meg a táblázatban a piros lambó helyett. 

Adj hozzá az oldalhoz egy hármas szintű címsort, írd bele Változók deklarlása

Adj hozzá az oldalhoz egy rendezeletlen listát, a lista elemeinek szövegében a változók dekralásához használható kulcsszavak jelenjenek meg.

Adj hozzá az oldalhoz egy újabb hármas szintű címsort, amelybe írd bele Szelektorok. A lista elemei a szelektorok legyenek.

Hozz létre egy text azonosítójú paragrafust, amelybe írd bele, hol helyezhetjük el a javascriptet a html dokumentumon belül. A paragrafust szelektáld ki, és tárold el egy text nevű változóban, majd írasd ki a consolra a változót, ellenőrizd kezedbe került e az elem.