Webfejlesztés DOLGOZAT 2026.11.11.

A feladatokat egy saját neveddel elnevezett mappába helyezd el!  Példa: kovacs_kamilla

A fájlokat a feladatonként megadott néven mentsd el!

Kérem, hogy munkád végén a mappát tömörített formában (.zip-ben), csatolva küld el az email címemre.

A csoport

1. feladat – Szám négyzete és köbe

Fájlnév: 01_negyzet_kob.html / 01_negyzet_kob.js

Feladatleírás

Készíts egy weboldalt, amely kiszámítja egy megadott szám négyzetét és köbét!

A weboldalon jelenjen meg:

• Címsor: Négyzet és köb számítása
• Felirat: Adj meg egy számot!
• Számbeviteli mező.
• Gomb: Számítás
• Két külön HTML-elem az eredmények megjelenítéséhez.

A gomb megnyomásakor a program számolja ki:

• A szám négyzetét.
• A szám köbét.

Példa:

Ha a megadott szám 3:

• Négyzete: 9
• Köbe: 27

Ha a mező üres, jelenjen meg hibaüzenet!

2. feladat – Szövegformázás

Fájlnév: 02_szovegszinek.html / 02_szovegszinek.js

Feladatleírás

Készíts egy weboldalt, amelyen a felhasználó különböző gombok segítségével megváltoztathatja egy bekezdés megjelenését!

A címsor legyen: Szövegformázás

A bekezdés szövege:

„A JavaScript segítségével interaktív weboldalakat készíthetünk.”

A bekezdés alatt jelenjenek meg a következő gombok:

Betűszín:

• Piros
• Kék
• Zöld

Háttérszín:

• Sárga
• Világoskék

A gombok megnyomásakor a bekezdés megfelelő tulajdonsága változzon meg!

A változtatás azonnal történjen meg, az oldal újratöltése nélkül.

3. feladat – Dolgozat értékelése

Fájlnév: 03_ertekeles.html / 03_ertekeles.js

Feladatleírás

Készíts egy programot, amely egy tanuló dolgozatának pontszámát értékeli!

A dolgozat maximális pontszáma 50 pont.

A weboldalon jelenjen meg:

• Címsor: Dolgozat értékelése
• Felirat: Add meg az elért pontszámot!
• Számbeviteli mező.
• Gomb: Értékelés
• Eredmény megjelenítésére alkalmas HTML-elem.

A program a következő szabályok alapján értékeljen:

Ha a megadott pontszám 0-nál kisebb vagy 50-nél nagyobb, jelenjen meg:

„Hibás pontszám!”

Üres mező esetén jelenjen meg:

„Add meg az elért pontszámot!”

4. feladat – Bevásárlókalkulátor kedvezménnyel

Fájlnév: 04_bevasarlokalkulator.html / 04_bevasarlokalkulator.js

Feladatleírás

Készíts egy programot, amely kiszámítja egy termék teljes árát, és szükség esetén kedvezményt ad!

A weboldalon jelenjen meg:

• Címsor: Bevásárlókalkulátor
• Felirat: Egy termék ára (Ft):
• Számbeviteli mező.
• Felirat: Darabszám:
• Számbeviteli mező.
• Gomb: Összesen
• Eredmény megjelenítésére alkalmas HTML-elem.

A program számolja ki a teljes fizetendő összeget!

Kedvezményszabály:

Ha a vásárlás összege meghaladja a 10 000 Ft-ot, a vásárló 10% kedvezményt kap.

Ha az összeg 10 000 Ft vagy kevesebb, nincs kedvezmény.

1. példa:

• Egy termék ára: 3000 Ft
• Darabszám: 4
• Részösszeg: 12 000 Ft
• Kedvezmény: 1200 Ft
• Fizetendő: 10 800 Ft

2. példa:

• Egy termék ára: 2000 Ft
• Darabszám: 3
• Részösszeg: 6000 Ft
• Kedvezmény: 0 Ft
• Fizetendő: 6000 Ft

Negatív vagy nulla ár, illetve negatív vagy nulla darabszám esetén jelenjen meg hibaüzenet!

5. feladat – Betűméret, betűszín és háttérszín változtatása

Fájlnév: 05_betumeret.html / 05_betumeret.js

Feladatleírás

Készíts egy weboldalt, amelyen a felhasználó gombok segítségével megváltoztathatja egy bekezdés megjelenését!

A weboldal címsora legyen: Szövegformázás

A bekezdés szövege:

„A JavaScript segítségével megváltoztathatom ennek a szövegnek a megjelenését.”

A bekezdés alatt jelenjenek meg a következő gombok:

Betűméret:

• Kicsi (14 px)
• Normál (20 px)
• Nagy (30 px)

Betűszín:

• Piros
• Kék
• Zöld

Háttérszín:

• Világossárga
• Világoskék
• Világoszöld

A gombok megnyomásakor:

• A betűméretet módosító gombok a bekezdés betűméretét változtassák meg.
• A betűszínt módosító gombok a bekezdés betűszínét változtassák meg.
• A háttérszínt módosító gombok a bekezdés háttérszínét változtassák meg.

A változtatások azonnal történjenek meg!

B csoport

1. feladat – Átlag számítása

Fájlnév: 01_atlag.html / 01_atlag.js

Feladatleírás

Készíts egy weboldalt, amely kiszámítja három megadott szám átlagát!

A weboldalon jelenjen meg:

• Címsor: Átlagszámítás
• Felirat: Első szám:
• Számbeviteli mező.
• Felirat: Második szám:
• Számbeviteli mező.
• Felirat: Harmadik szám:
• Számbeviteli mező.
• Gomb: Átlag számítása
• Eredmény megjelenítésére alkalmas HTML-elem.

A gomb megnyomásakor a program számolja ki a három szám átlagát!

Példa:

• Első szám: 10
• Második szám: 20
• Harmadik szám: 30
• Eredmény: 20

Ha valamelyik mező üres, jelenjen meg hibaüzenet!

2. feladat – Szöveg betűszínének és betűméretének változtatása

Fájlnév: 02_szovegformazas.html / 02_szovegformazas.js

Feladatleírás

Készíts egy weboldalt, amelyen a felhasználó gombok segítségével megváltoztathatja egy bekezdés megjelenését!

A weboldal címsora legyen: Szövegformázás

A bekezdés szövege:

„A JavaScript segítségével interaktív weboldalakat készíthetünk.”

A bekezdés alatt jelenjenek meg a következő gombok:

Betűszín:

• Piros
• Kék
• Zöld

Betűméret:

• Kicsi (14 px)
• Normál (20 px)
• Nagy (30 px)

A gombok megnyomásakor a bekezdés megfelelő tulajdonsága változzon meg!

A változtatás azonnal történjen meg!

3. feladat – Pozitív, negatív, nulla, páros vagy páratlan?

Fájlnév: 03_szamvizsgalat.html / 03_szamvizsgalat.js

Feladatleírás

Készíts egy weboldalt, amely megvizsgálja a felhasználó által megadott számot!

A weboldalon jelenjen meg:

• Címsor: Számvizsgálat
• Felirat: Adj meg egy egész számot!
• Számbeviteli mező.
• Gomb: Vizsgálat
• Eredmény megjelenítésére alkalmas HTML-elem.

A program először vizsgálja meg, hogy a szám:

• nagyobb nullánál;
• kisebb nullánál;
• vagy egyenlő nullával.

Ezután állapítsa meg, hogy a szám páros vagy páratlan!

1. példa: Megadott szám: 8

Eredmény:

• A szám pozitív.
• A szám páros.

2. példa: Megadott szám: -5

Eredmény:

• A szám negatív.
• A szám páratlan.

3. példa: Megadott szám: 0

Eredmény:

• A szám nulla.
• A szám páros.

Ha a mező üres, jelenjen meg:

„Nem adtál meg számot!”

Ha a megadott szám nem egész, jelenjen meg:

„Egész számot adj meg!”

4. feladat – Utazási költségkalkulátor

Fájlnév: 04_utazasi_koltseg.html / 04_utazasi_koltseg.js

Feladatleírás

Készíts egy programot, amely kiszámítja egy autóút üzemanyagköltségét!

A weboldalon jelenjen meg:

• Címsor: Utazási költségkalkulátor
• Felirat: Megtett távolság (km):
• Számbeviteli mező.
• Felirat: Fogyasztás (liter/100 km):
• Számbeviteli mező.
• Felirat: Üzemanyag ára (Ft/liter):
• Számbeviteli mező.
• Gomb: Költség számítása
• Eredmény megjelenítésére alkalmas HTML-elem.

A program számolja ki, hogy mennyibe kerül az utazás!

Számítás menete:

1. Először számítsd ki az elfogyasztott üzemanyag mennyiségét:elfogyasztott üzemanyag = távolság * fogyasztás / 100
2. Ezután számítsd ki a költséget:költség = elfogyasztott üzemanyag * üzemanyag ára

Példa:

• Távolság: 200 km
• Fogyasztás: 6 liter/100 km
• Üzemanyag ára: 600 Ft/liter
• Eredmény: 7200 Ft

Ha valamelyik mező üres vagy negatív értéket tartalmaz, jelenjen meg hibaüzenet!

5. feladat – Háttérszín és szövegszín változtatása

Fájlnév: 05_hatter_es_szoveg.html / 05_hatter_es_szoveg.js

Feladatleírás

Készíts egy weboldalt, amelyen a felhasználó gombok segítségével megváltoztathatja az oldal háttérszínét és egy bekezdés betűszínét!

A weboldalon jelenjen meg:

• Címsor: Színválasztó
• Egy bekezdés:

„Változtasd meg az oldal és a szöveg színét!”

Háttérszín-választó gombok:

• Világoskék háttér
• Világoszöld háttér
• Világossárga háttér

Betűszín-választó gombok:

• Piros betűszín
• Kék betűszín
• Fekete betűszín

A gombok megnyomásakor:

• A háttérszín-gombok az egész oldal háttérszínét módosítsák.
• A betűszín-gombok csak a bekezdés színét módosítsák.

A változtatások azonnal jelenjenek meg!