Šiandien aprašysiu antrą užduoties dalį. Darysim Trello Card'o javascriptus.

Bet prieš pradedant prisipažinimas:
Pasidarė beveik aišku, kad apsimelavau. Jau keletą kartų prisižadėjau jutūbą kur kodinu Trello cardą. Lygiai taip pat keletą kartų mėginau jį įrašyti. Turiu kelias valandas įrašų su mmmm, hmmm, eee ir kitais garsais. Yra ir vieta, kur kažkodėl neveikia stiliai. Po 10 minučių paaiškėja, kuo skiriasi styles.css ir style.css...

# Apie užduotį iki šio taško

Labai smagu už tuos, kas darė užduotį ir pasidalino rezultatais. Kudos Vytautui ir Arminui. Panašu, kad užduotį dar darė Markus. Tikiuosi pavyko, belieka pasidalinti Githubo repo komentare.

Iš žinučių/emailų suprantu, kad patirtis buvo naudinga. Išmokot dalykų, pamatėt kokias gudrybes galima panaudoti išgauti imantriems efektams. Great success!!

Taip pat, eilinį kartą, norėčiau visus kitus paraginti prisijungti prie šito reikalo. Kad ir kaip sunkiai man su pažadais, pasistengsiu daugiau neįkirėti su raginimais.

# Šio etapo tikslas

Užteks su CSS, einam kąnors suprogramuosim. Imamės įdomiausios vietos - JavaScriptų. Šiame etape mes norim pasiekti, kad mūsų kortelė veiktų kuo panašiau į orginalą. Klonuosim UI funkcionalumą.

Kad būtų smagiau, pasistengsim viską išsaugoti naršyklės atmintyje. Taip mes gausim lokaliai veikiančią kortelę. Visi pakeitimai bus išsaugoti naršyklėje. Perkrovus naršyklę informacija išliks išsaugota.

# Darbų checklistas

  • Galimybė pridėti/nuimti žymą (label)
  • Galimybė pridėti/ištrinti aprašymą (description)
  • Checklistas
    • Galimybė pridėti naują checklist'ą
    • Galime skipinti popupą, esantį orginale, tegul tiesiog prideda naują checklistą. Žinoma, bonus taškai jei padarai tą popupą 😃
    • Galimybė pakeisti pavadinimą
    • Dinamiškai besikeičiantis progress bar'as
    • Galimybė paslėpti užbaigtas užduotis
      • Turi rodyti kiek užduočių paslėpta (žr orginalą)
    • Galimybė ištrinti checklist'ą
    • Bonus taškai už galimybę draginti užduotis, taip pakeičiant jų eiliškumą. Darom pasirinktinai, kai atliksi kitus dalykus.
  • Komentarų dėžutė
    • Galima pridėti komentarą, kuris atsiras activity log'e
    • Mygtukai jos kampe gali likti dummy mygtukais. Jų veikimas yra susijęs labiau su bendru appso veikimu, ne su pačios kortelės.
  • Activity log
    • Bonus taškai už visą šį reikalą
    • Išdėstyta reverse chronological order
    • Registruoja pasikeitimus. Tikriausia bus paprasta, nes kiekviena kita funkcija, kuri valdys pakeitimus, galės turėti callback'ą kuris į logą įrašys žinutę.
  • Išsaugojimas naršyklės atmintyje (localStorage)
    • Visą informaciją išsaugom window.localStorage
    • Geriausia naudoti helper funkciją, kuri padėtų įrašinėti
    • Užsikraunant kortelei/puslapiui atmintis turi būti patikrinta
    • Jei kažkas įrašyta, rodyti išsaugotus dalykus

# Notes

  • Galima naudoti tik jQuery tipo bibliotekas (bet ne jQuery pluginus)
  • Bonus taškai už Vanilla JS (jokių bibliotekų)

# Planas

Šiame etape mes darom JS dalykus atsakingus už UI. Mums svarbiausia funkcionalumas. Duomenis šiuo metu išsaugosim savoj naršyklėj.

Ištvermigiausiems bus ir trečia dalis. Kur išmoksim būdą kaip galima turėti pure front endinį appsą. Su tokiu nuostabiu dalyku kaip duomenų bazė. Jai tradiciškai reiktų backendo, bet šįkart nereiks.

Tai tiek. Jamam šitą darbą. Kodinam. Dalinamės linku komentare.