Házi feladat

Memóriajáték

Általános leírás

A memóriajáték úgy működik, hogy adott egy rács, minden kockája egy képet takar. Ha a játékos rámutat egy kockára, akkor megjelenik a hozzá tartozó kép. Ha a játékos egy második kockára is rákattint, akkor megint megjelenik a második kocka mögötti kép is. Ha a két kockára való kattintásra ugyanaz a kép villant fel, akkor készen vagyunk: ez a két kép már örökre látható marad, a szóban forgó képpárt ugyanis sikeresen megtaláltuk. Ha azonban a két kockára kattintva nem ugyanaz a kép jelenik meg, akkor egy harmadikra kattintva a két korábbi kép újra eltűnik. A cél az, hogy minden kép örökre látható legyen. Ehhez természetesen fejben kell tartani a már felfordított, de még párt nem talált betűket -- innen a játék neve is...

Hozz létre egy oldalt, ahol a felhasználó mezőkre kattintgathat, amik a fenti szabályokat követik.

Az oldal legyen szép, esztétikus. Állíts be háttérszínt, headert, legyen h1-es elem is a lapon (akár maga a header szövege). A kockák közt legyen hézag, a kockákon legyen árnyékolás, kis lekerekített határvonal. A kockák fölött elhúzva az egeret, következzen be valami effektus is. A kockákra kattintva is következzen be valamilyen effektus, lehetőleg valamiféle animáció-szerű effektus.

Vezess egy számlálót is, hogy hány kattintásnál tartasz. A cél természetesen az lesz, hogy minél kevesebb kattintásból meg lehessen oldani a feladatot...

Az elkészült weboldalt töltsd fel valamilyen statikus weboldalak hosztolására alkalmas oldalra! Egy kényelmes lehetőség, ha ezt még nem használod másra, a GitHub Pages. A link mögött egy tutorial van, lényegében ez úgy működik, hogy a GitHub fiókodban a speciálisan elnevezett, statikus weboldalt tartalmazó repositoryt képes a github hostolni.

A repóhoz tartozó README.md fájlban hivatkozásként szerepeljen a honlap linkje is!