Feladat: Készíts egy weboldalt, amely egy
tanulócsoport adatait jeleníti meg. A cél, hogy a diákok gyakoroljátok a
JavaScript komplex objektumkezelési lehetőségeit (Object, Map, Set), valamint a
DOM manipulációt és CSS Grid használatát egy összetett elrendezésben.
Feladatleírás lépésekben
HTML
- Hozz létre egy új HTML fájlt index.html
néven.
- Hozd létre az oldal
alapstruktúráját a következő részekkel:
- Header:
- Egy <h1> címsor: "Tanulócsoport
Adatok".
- Main (grid layout):
- Tanulók szekciója (section#students-section):
- Egy <h2> címsor: "Tanulók".
- Egy tartalomkonténer (div#students-cards),
amelybe JavaScript segítségével kártyák kerülnek majd.
- Tantárgyak szekciója (aside#subjects-section):
- Egy <h2> címsor: "Tantárgyak".
- Egy üres <ul> lista (ul#subjects-list),
amelyet JavaScript fog feltölteni.
- Csoportok szekciója (section#groups-section):
- Egy <h2> címsor: "Csoportok".
- Egy üres konténer (div#groups-list),
amely a csoportok adatait tartalmazza.
- Footer:
- Egy <footer> rész,
amely tartalmaz egy <p> elemet: "Készítette: Ruzsinszki
Zita".
CSS
- Hozz létre egy CSS fájlt styles.css
néven.
- A teljes oldal formázásához
kövesd az alábbiakat:
- Grid Layout:
- A fő tartalom (<main>)
legyen egy kéthasábos rács (CSS Grid).
- A bal oldalon legyen a
tanulók adatait tartalmazó szekció, míg a jobb oldalon legyen az
oldalsáv és a csoportok szekciója.
- Kártyák megjelenítése:
- A tanulók adatai kártyákban (card)
jelenjenek meg, egymás mellett, reszponzív elrendezésben.
- A kártyák kapjanak keretet,
árnyékot és enyhén lekerekített sarkokat.
- Oldalsáv (aside):
- A tantárgyak listája legyen
egyszerű, jól olvasható formázással.
JavaScript
- Hozz létre egy új JavaScript
fájlt script.js néven, és csatold a HTML dokumentumhoz.
- A JavaScript feladatai:
- Diákok adatai:
- Tárold a diákokat egy
tömbben, amely objektumokat tartalmaz. Az objektumokban a diák neve,
életkora, kedvenc tantárgya, és jegyeik (grades) szerepeljenek.
- Minden diák jegyei tömbként
legyenek tárolva, ahol az egyes elemek tartalmazzák a tantárgy nevét és
a jegyet.
például:
[
{
name: "Kiss Péter",
age: 19,
favoriteSubject: "JavaScript",
grades: [
{ subject: "HTML", grade: 5
},
{ subject: "CSS", grade: 4 },
{ subject: "JavaScript",
grade: 5 },
],
},
{
name: "Nagy Anna",
age: 20,
favoriteSubject: "React",
grades: [
{ subject: "HTML", grade: 5
},
{ subject: "CSS", grade: 5 },
{ subject: "React", grade: 4
},
],
},
{
name: "Tóth János",
age: 21,
favoriteSubject: "CSS",
grades: [
{ subject: "HTML", grade: 3
},
{ subject: "CSS", grade: 5 },
{ subject: "JavaScript",
grade: 4 },
],
},
];
- Tantárgyak (Set):
- Gyűjtsd ki a diákok által
tanult tantárgyakat egy Set struktúrába.
- Csoportok (Map):
- Tárold a tanulócsoportokat
egy Map struktúrában, amely a csoport nevét társítja a hozzá tartozó
diákok neveivel.
[
["Frontend", ["Kiss
Péter", "Nagy Anna"]],
["Backend", ["Tóth
János"]],
]
- DOM manipuláció:
- Tanulók kártyái:
- Hozz létre dinamikusan
kártyákat minden diáknak a #students-cards konténerben.
- Minden kártya tartalmazza a
diák nevét, életkorát, kedvenc tantárgyát, és a jegyek listáját.
- Tantárgyak listája:
- A Set struktúrából generálj
listát az #subjects-list konténerben.
- Csoportok:
- A Map struktúrából generálj
listát a #groups-list konténerben.
Extra feladatok
- Interaktivitás:
- Adj egy keresőmezőt a diákok
szűrésére (név alapján). A találatok frissüljenek valós időben.
- Responsivity:
- 768px alatti nézetben az elrendezés változzon
egyoszloposra, ahol a szekciók egymás alatt jelennek meg.
Nincsenek megjegyzések:
Megjegyzés küldése