12 ikt - Új projekt feladat

Az új projektben konkrét feladatot kaptok. Készítsetek egy weboldalt, amely bemutatja az osztály átlagának számítását és az elérhető pajzsokat egy verseny keretében. Kardinális kérdésetek, hány óra áll rendelkezésetekre, ikt és web órán is dolgozhattok rajta, nem választjuk élesen ketté. A héten 4 órában el kell, hogy mindenki tudja készíteni, és 5-ik, 6-ik órában megnézzük az előadásokat. Két jegyet kaptok, ikt és web-re is. Ikt-nél főleg a közös munkát fogom értékelni. Webnél a technológiát.

Görgess le végig az oldalon, a képek alatt is van egy kis segítség, ne csak annyit olvass el, ami most Neked épp a böngészőben megjelenik! Akinek nem inge ne vegye magára....

A weboldal két fő részből áll:

1. Pajzsok oldal (főoldal)
2. Átlagszámító oldal

1. Pajzsok oldal (főoldal - index.html)

1. Hozz létre egy index.html fájlt, amely tartalmazza a pajzsok oldal tartalmát.
2. Az oldal tetején jelenjen meg egy üdvözlő szöveg:
   • Cím: „Indul a tanulmányi verseny liga a pajzsokért”
   • Leírás: „Kedves diákok! A verseny során elnyerhettek egy pajzsot. Azt, hogy melyiket, az az osztály átlagától függ.”

   • Pontozás és elnyerhető pajzsok

     • 4,6-5 között Legendák ligája
     • 4-4,5 között Smaragd liga
     • 3,6-4 között Gold liga
     • 3-3,5 között Silver liga
     • 2-3 között Bronz liga
     • 2 alatt - reményeink szerint ilyen nem fordulhat elő.
3. Egy felsorolással mutasd be az elérhető pajzsokat és az elérésükhöz szükséges átlagpontszámot.
4. Készíts egy „pajzs” galériát a megadott képekkel (img/legends.png, img/emerald.png, stb.). Minden pajzs rendelkezzen:
   • Képpel, névvel és egy rövid leírással.
   • 3D forgatással: Amikor a felhasználó ráviszi az egeret, a pajzsok forgatással mutatják meg a hátoldalon lévő szöveget, amely az adott pajzs eléréséhez szükséges pontszámot írja le.
5. Az oldal alján legyen egy gomb, amely a calc.html oldalra vezet. A gomb szövege: „Osztály jegyeinek átlagszámítása”.

index.html:

ha valmelyik pajzsra ráhúzzuk az egeret forduljon el, és jelenjen meg rajta az a szöveg, hogy mikor érhető el

Átlagszámító oldal (calc.html)

1. Hozz létre egy calc.html fájlt, amely az osztály átlagának kiszámítását végzi.
2. Az oldal tetején jelenjen meg a cím: „Osztály jegyeinek átlagszámítása”.
3. Készíts egy szövegmezőt, amelybe a felhasználók beírhatják az osztály jegyeit (vesszővel elválasztva). A placeholder legyen: „pl. 5, 4, 3, vagy ha tizedes, akkor ponttal válaszd el: 2.7”.
4. Készíts egy gombot „Számold ki az átlagot” felirattal, amely elindítja az átlag számítását.
5. A gomb lenyomására:
   • Ellenőrizze a program, hogy a bevitt értékek számok-e.
   • Számolja ki az átlagot, és jelenítse meg az átlagértéket az oldalon.
   • Az átlag alapján jelenítse meg az elért pajzsot képpel együtt.
6. Az oldal alján legyen egy visszalépési gomb, amely visszavisz az index.html főoldalra. A gomb felirata: „Vissza a főoldalra”.

ha a felhasználó felsorolja a jegyeket, akkor jelenítse meg az eredményt:

Írjatok egy javascript kódot, amely kiszámolja az eredményt, és megjeleníti az eredménynek megfelelő adatokat. 

Stílusok (style.css)

1. Háttér: Használj zöld-arany-szürke színátmenetes hátteret a teljes oldalhoz.
2. Középre igazítás: Minden elem legyen középre igazítva a wrapper osztály segítségével.
3. Gombok stílusa: A gombok legyenek világoszöldek, lekerekített sarkokkal, és kapjanak árnyékot. Egérrel való rámutatáskor a háttérszín sárgára változik.
4. Pajzsok: A pajzsok legyenek kerek keretekben, zöld árnyékkal, és a képek helyesen legyenek középre igazítva.
5. Reszponzivitás: Gondoskodj róla, hogy a pajzsok elrendezése különböző eszközökön is jól mutasson:
   • Teljes nézetben: 5 pajzs egy sorban.
   • Tabletes nézetben: 3 pajzs egy sorban.
   • Mobil nézetben: 2 pajzs egy sorban.

4. JavaScript (calc.html-hez)

1. Készíts egy calculateAverage függvényt, amely:
   • Feldolgozza a beírt jegyeket, ellenőrzi, hogy csak számokat tartalmaznak.
   • Számolja ki a jegyek átlagát.
   • Az eredmény alapján jelenítse meg a megfelelő pajzsot képpel és szöveggel.
2. Ha az átlag értéke meghaladja a megadott határértékeket (pl. 4.6 és 5 között), akkor a megfelelő pajzs jelenjen meg a gratulációs szöveggel.

Példák

Pajzsok oldal - Példa tartalom

• Legend Badge - „A jutalom, ha az osztályotok átlaga 4.6 és 5 között van.”
• Emerald Badge - „A jutalom, ha az osztályotok átlaga 4 és 4.5 között van.”
• Gold Badge - „A jutalom, ha az osztályotok átlaga 3.6 és 4 között van.”

Átlagszámító oldal - Példa eredmények

• Ha az osztály átlaga 4.7, jelenjen meg a Legend Badge és az üzenet: „Gratulálok! Az osztályotok a Legend szintet érte el, az osztály átlagotok: 4.7”

Tesztelés: 

Teszteld az oldalt különböző képernyőméreteken, hogy minden reszponzív legyen.

Használd a html és css validátor oldalakat, készítsetek az eredményről képernyő képet. 

Ellenőrizd, hogy az összes képfájl és link helyesen van beállítva.

A JavaScript kódot teszteld többféle értékkel (pl. tizedesjegyekkel), hogy megbizonyosodj a helyes működésről. A kódban folyamatosan írasd ki az eredményt a konzolra, kommentezd, melyik lépéseddel milyen műveltet hajtasz végre. 

Értékelés szempontjai

1. HTML felépítés - Minden szükséges elem megtalálható és helyesen van elhelyezve.
2. CSS stílusok - A stílusok megfelelően alkalmazkodnak a feladathoz és reszponzívak.
3. JavaScript működés - Az átlagszámítás helyesen működik, és a megfelelő pajzs jelenik meg az átlagértéktől függően.
4. Átlátható mappa szerkezet!!! (képek külön mappában, css külön mappában)
5. Funkcionalitás - Az oldalak közötti navigációs gombok működnek.
6. Csapatmunka! Kinek mi volt a feladata a megoldás során. Egyetlen dolgot kérek dokumentálni, melyik órán, ki mivel foglalkozott, a feladat mely részének megoldásával, milyen segítséget vettetek igénybe.
7. Github-ra való feltöltés!
8. Előadás módja (hajlandóság kiállni a táblához, magabiztos előadás, felhasználói és fejlesztői szempontból is kérem, valamint röviden angol nyelven, mindkét csapattagnak kb ugyannyit kell beszélnie)

Képek: 

Egy kis segítség a javascript függvény megírásához:

1. HTML előkészítése és eseménykezelő hozzáadása

   • Kezdj egy HTML fájllal, amely tartalmaz egy szövegmezőt (input, ide írhatod be a jegyeket) és egy gombot (amire kattintva elindul a számítás).
   • Külön script fájlnál ellenőrizd, csatoltad e a script.js-t. (konzolba kiírás: "fut")
   • A gombhoz adj egy eseménykezelőt, amely a kattintáskor meghív egy függvényt. Ezt JavaScript-tel tudod megtenni. Persze a script fájlban is megírhatod az esemény figyelését (addEventListener - ha nem emlékszel a működésére a w3schoolon nézz utána).

2. Függvény létrehozása és elemek összegyűjtése

   • Hozz létre egy függvényt a JavaScript fájlban, amiben végrehajtod a számítást.
   • A függvény megírása elején azonnal elenőrizd le fut e a függvény (konzol: "fv.fut".)
   • A konzolban ellenőrizheted, hogy valóban hozzáférsz-e ezekhez a változókhoz, hogy minden a terv szerint működik-e. Amikor elkezded összegyűjteni a szükséges adatokat, ellenőrizd a konzolban kezedbe került e az eredmény, vagy az adott html elem!!!
   • A kommenteket és a konzolba való kiíratásokat hagyd benne a kódban! Onnan látom, hogy folyamatosan teszteltél, és utána néztél egy-egy beépített függvény működésének! 
   • Gyűjtsd össze azokat az elemeket, amelyeket használni fogsz:
     • Hozz létre egy változót a szövegmezőhöz, ahonnan a jegyeket fogod beolvasni.
     • Hozz létre egy változót, amiben az eredményt fogod megjeleníteni. Nyilván a html-ben is létre kell hoznod ehhez egy elemet, ahová majd megjeleníted az eredményt.

3. A bevitt adat feldolgozása

   • A szövegmezőből olvasd ki a bevitt adatokat. Ezt tárold egy változóban.
   • Ellenőrizd a konzolban, hogy valóban megkaptad-e az adatot, és látod-e a beírt szöveget.
   • 
     
     
     
   • Ezen a ponton láthatod, hogy több adattal van dolgod, tehát tömbre lesz szükséged!

4. Jegyek tömbbe alakítása

   • A beírt adatokat, amelyek vesszővel vannak elválasztva, alakítsd át tömbbé. Használj olyan függvényt, amely a szöveget külön elemekre bontja. pl. split(); map(); parseFloat(); trim() nézz utána a használatuknak a w3schoolon, és kommentbe jegyezd fel mit tudtál meg róluk, majd próbáld meg használni őket a feladat megoldása során.
   • Mivel a jegyek számként lesznek kezelve, alakítsd át a szöveges elemeket számokká. Használhatsz olyan módszert, amely minden elemet egyenként átalakít számmá.
   • Ellenőrizd a konzolban, hogy sikerült-e tömbként és számként eltárolni az adatokat.

5. Érvényesség ellenőrzése

   • Ellenőrizd, hogy a tömbben lévő elemek mind számmá alakíthatók-e. Használhatsz olyan függvényt, amelyik megmondja, hogy van-e nem szám jellegű elem a tömbben.
   • Ha hibás adatot találsz, jeleníts meg egy figyelmeztető üzenetet, és állítsd le a számítást.

6. Átlag számítása

   • Számold össze a tömb elemeit egy beépített módszerrel, amely minden elemet hozzáad egy kezdeti értékhez.
   • Oszd el a kapott összeget a tömb hosszával, hogy megkapd az átlagot.
   • A konzolban ellenőrizheted az átlag értékét, hogy megbizonyosodj róla, helyes-e a számítás.

7. Eredmény megjelenítése

   • Írasd ki az átlagot a HTML-ben egy kijelölt területre, például egy üres <p> vagy <div> elembe. Használd a templateLiteral módszert, de a + jellel való konkatenális is jó. 

8. Badge megjelenítése az átlag alapján

   • Az átlag alapján dönts el, hogy melyik „pajzsot” jeleníted meg. Használj feltételes szerkezetet, hogy különböző tartományokhoz különböző képeket rendelj.
   • Az adott tartományban állítsd be a kép forrását, és jelenítsd meg a megfelelő szöveget. Ne legyen végtelen lebegőpontos szám használd a toFixed() metódust, csak 2 tizedesig jelenjenek meg.

Hasznos JavaScript függvények és módszerek, amelyekre érdemes rákeresni

• addEventListener: Eseménykezelő hozzáadása egy HTML elemhez.
• console.log: Üzenetek megjelenítése a böngésző konzoljában, ami segít a hibakeresésben.
• split(): Szöveg elemeire bontása, például vesszők mentén.
• map(): Minden tömbelemet átalakító metódus, például szöveget számmá alakít.
• parseFloat(): Szöveges szám konvertálása lebegőpontos számmá.
• some(): Annak ellenőrzése, hogy a tömb tartalmaz-e olyan elemet, amely megfelel egy feltételnek.
• reduce(): A tömb elemeinek összegzése egy kezdőértékből kiindulva.