2022.12.20-21. 2/14szn A kapott szakdolgozat sablon alapján a záródolgozat írása.

 A feladat mappába feltöltött két szakdolgozat alapján kezdjétek el írni a záró dolgozat első fejezetét, a fejlesztői környezetről és a felhasznált technológiákról. Copy paste 100%-ban nem jó! Saját szavaiddal fogalmazd meg, ha plágium riporton lefuttatásra kerül 10% alatt legyen a plágium. 

2022.12.19 11B1 és 2022.12.20 11B2 és 11C => 1 órás feladat - Autók

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

Egy wrapper elementre alkalmazd a flexbox megoldásokat, hogy a wrapperben lévő cars konténer középre kerüljön az oldalon.

A cars konténereden belül is a flexbox technológia segítségével old meg, hogy a címsor 1 a kép, és az alatta lévő 3 gomb egymás alatt helyezkedjen el az oldalon. 

Vigyázz a gombokat tedd egy konténerbe, hogy egymás mellé kerüljenek.

A feladat mappában a 11 évfolyamon belül találsz egy mappát melynek neve: 20221219 és 20 Tesla, itt találod a forrás fotókat.

A fotók magasságát 500px állítsd be.

Az oldal betöltésekor a fehér autó jelenjen meg.

A gombokat tartalmazó doboz 20px belső margót kapott. 

Old meg a képváltást, ha a red-re kattintunk a piros autó jelenjen meg:

ha pedig a blue-ra akkor a kék.

Az elkészült feladatot töltsd fel a github csatornádra, és hívj meg közreműködőnek: latiza.

2022.12.19 hétfő 11B/1 részére 1-2 óra és 11.C 6-7 -ik óra => Utazás kalkulátor feladat

 

Utazás kalkulátor feladat

Elkészítendő oldalak:

·         index.html

·         style.css

·         script.js

1.       Az index. html oldalon add meg az oldal nyelvének a magyart.

2.       Az oldal címe Utazás kalkulátor legyen.

3.       Faviconnak állítsd be a planet.gif képet.

4.       Az oldal háttere a szivárvány színei szerinti színátmenetes legyen. (red, orange, yellow, green, blue, purple)

5.       Az oldal közepén a tartalom szélessége 900px.

6.       A háttérszíne 60%-os fehér alfa érték legyen.

7.       Állíts be rá 20px belső margót.

8.       A szélei 20px-el lekerekítést kapjanak.

9.       Kapjon egy kis szürke árnyékot 2px, 2px, 5px grey értékekkel.

10.   A cím a legnagyobb méretű címsorként kerüljön megadásra, középre helyzeve.

11.   A tartalmon belül középre helyezve jelenjen meg a táblázat.

12.   A beviteli mezők szélessége 70px legyen, ahol a fő jelenik meg az csak 30px széles legyen. Az ár, a reptéri illeték és az összesen input mezők disabled-értékre legyen állítva. Vagyis, a user, csak a főt tudja beállítani, és bekattintani kér e biztosítást.

13.   A beviteli mezőkben a szöveg a végén jelenjen meg.

14.   A táblázatban helyezd el a képeket, felülre a planet.gif, alá roma.jpg, jordania.jpg, torokorszag.jpg és marokko.jpg képeket.

15.   A képek szélessége 100px legyen,

16.   50% lekerekítéssel.

17.   A cellákban a belső margó 5px legyen.

18.   A cellákat árnyékold 1px 1px 2px grey szürke értékekkel.

19.   A cellák kerekítése 10px-el.

20.   A táblázat fejléc típusú celláinak háttérszíne 60%-os fehér alfa értékű.

21.   A táblázat többi cellájának háttere pedig 80%-os fehér alfa értékű.

22.   A táblázatban az árakat ne lehessen a felhasználónak felül írni, de beviteli mezőben jelenjenek meg.

23.   A biztosítás bejelölhető négyzet legyen, ami alapértelmezett értékben be legyen jelölve, mivel ajánlott a biztosítást kötése.

24.   A fő állítható érték legyen.

25.   Írj egy függvényt, amely soronként kiszámolja, ha valaki megadja, hogy hány fő utazna, és figyelembe veszi a számítás azt is, hogy bejelölve hagyja-e a jelölő négyzetet, vagy kiveszi belőle a jelölést.

26.   A táblázat alsó sorában adja össze az összes kiadott értéket, ha esetleg valaki több utat is megjelölne, hogy utazna.

A  fotókat a feladat mappában találod : 20221219 Utazás kalkulátor források mappában.

A második óra végén az elkészült feladatot töltsd fel a github csatornádra és hívj meg közreműködőnek: latiza. 

20221214. 2/14szn Webshop frontend feladat

 Felhasznált technológiák, HTML, CSS, lehet Bootstrap, és javascript.

Kosár elemeinek tárolása localstorage-ben

Megrendelés feldolgozása:

megrendeles.html:

2022.12.12. Űrlap feldolgozása php-vel

 Készítsd el az alábbi egyszerű formot: 

Készíts egy form.html fájlt, amelyből post metódussal elküldöd az adatokat, egy form.php oldalra feldolgozásra. 

Akadályozd meg, hogy a név illetve a keresztnév esetében scriptet küldjön be a felhasználó, 

valamint azt is, hogy ha a neve előtt vagy után több szóközt leütött az sem kerüljön feldolgozásra, a tárolás esetén az első betűje a nevének akkor is nagy betű legyen, ha a júzer kicsivel írta, de az összes többi betű legyen kis betű. 

Ha üresen küldi be: 

Ha kitölti, ez jelenjen meg:

2022.12.13. kedd-szerda 11 évfolyam táblázat és űrlap ellenőrzés gyakorlása

 Hozd létre az alábbi formot:

1. Hozz létre egy index.html-t, és egy style.css-t. 

2. A html fájlban hozz létre egy konténert, amelynek a tartalmát, a h1-es címsorban lévő címet, és a táblázatba foglalt űrlapot középre helyeze flexbox segítségével.

3. A táblázatnak egyszerű adattípust tartalmazó cellái legyenek, 6 sorral és két oszloppal, amelynek segítségével a fent látható elrendezést fogod kapni. 

4. Az első oszlopba label tagek közé helyezd el a feliratokat. 

5. A második oszlopban a névhez egyszerű text típusú input mezőt használj. Az E-mail-hez email típusú input mezőt, a telefonszámhoz, tel típusút, a jelszóhoz password típusú input mezőt. 

6. Az elküldés és a reset input mezők egy cellába kerültek, az elküldésre 10px jobb margót helyezz el, hogy ne tapadhon rá a törlés gomb. Figyelj arra, hogy az összes input mező és a hozzá tartozó label tag, a form html tag-ek közé kerüljön.

Űrlap ellenőrzés:

1. Csatolj egy script fájlt a html oldalhoz.

2. A form action értéke üres legyen, id-t adhatsz hozzá.

3. Az elküldés gombra köss rá egy eseménykezelőt, pl egy onclikcet, amely hívjon meg egy függvényt, pl: formCheck();

4. Tárold el az input mezőket változókba. (név, email, tel, pass1, pass1, send)

5. If, else if elágazással írasd ki alert ablakba, ha valahol hiányzik az érték, a jelszó újránál pedig, azt vizsgáld meg, hogy ha nem egyezik meg a két jelszó, akkor alert mezőbe írja ki nem egyezik a két jelszó. 

6. Ha elkészültél töltsd fel a github csatornádra, hívj meg contributornak (latiza) 

2022.12.12 11 osztály táblázat szerkesztésének gyakorlása

 

Készítsd el a weboldalt a fenti minta szerint.

1.      Hozz létre egy index.html és egy style css fájlt.

2.      Hozz létre táblázatot a megadott minta szerint.

3.      A táblázat és az alatta lévő dobozo külön konténer. A befoglaló div-re állítsd be, hogy flexbox legyen, oszlopos elrendezéssel, a benne lévő itemek, vagyis dobozok középre legyenek igazítva.

4.      A táblázat oszlopainak szélessége 5rem.

5.      A táblázat első sora és első oszlopa fejléc típusú legyen

6.      A cellák belső margója 10px.

7.      Vond össze a hétvégére eső két nap sorait és oszlopait, írd bele kisbetűvel azt, hogy pihenés.

8.      A stíluslapon állítsd be, hogy a kisbetűs szöveg nagybetűs legyen.

9.      Keresd meg a w3s oldalán, hogyan tudod elforgatni a szöveget a minta szerint

10.   Keresd meg, hogyan állíthatsz be a 1rem-es távolságot a 2rem betűnagyságú betűk közé.

11.   Helyezd el a szöveget az összevont cellák közepén

12.   A hétfő alatti első két óra celláit vond össze, a hátterük legyen piros.

13.   Kedd és csütörtök között a harmadik és hetedik órákat vond össze, hátterük legyen kék.

14.   Csütörtökön a 4-6 órákat vond össze a hátterük legyen sárga.

15.   Pénteken a 6-8 órákat vond össze a hátterük legyen zöld.