Namų darbas — tavo pirmoji kortelė

Namų darbas — tavo pirmoji kortelė rankomis.

1. Sukurk js/components/card.js su createCard(pic), kaip pamokoje. Kortelė turi turėti nuotrauką (alt + loading="lazy"), pavadinimą (<h2>) ir datą.
2. Parodyk ją. main.js importuok createCard, sukurk vieną kortelę su išgalvotais duomenimis ir appendChild į #app. Serviruok ir patikrink.
3. Įrodyk XSS skirtumą. Nustatyk title reikšmę į '<b>test</b> <img src=x onerror="alert(1)">'. Su textContent pamatysi patį tekstą (įskaitant <b>). Pakeisk į innerHTML — <b> suryškės, o onerror bandys įvykdyti. Grįžk į textContent. Niekada nepalik innerHTML kintančiam tekstui.
4. Papildyk kortelę. Pridėk trumpą paaiškinimą (pic.explanation) su truncate(pic.explanation, 120), kad ilgas tekstas neišardytų išdėstymo.

Privalomi testai:

• Struktūros testas: kortelė turi <article> su nuotrauka, pavadinimu ir data.
• Saugumo testas: su textContent „kenksmingas" pavadinimas rodomas kaip tekstas, ne vykdomas.

Atsiskaitymui: ekrano nuotraukos: (1) kortelė naršyklėje, (2) tas pats „kenksmingas" pavadinimas, saugiai parodytas kaip tekstas.

Toliau. Kortelė yra, bet ji negyva — spustelėjus nieko nevyksta. 3 pamokoje pridėsim įvykius: ♡ mygtuką, atidarymą paspaudus, klaviatūros sparčiuosius klavišus — ir sutiksim klasikinį „burbuliavimo" spąstą.