de Ayo Isaiah

Construirea unui aparat de cotare aleatoriu

Construirea unui aparat de cotare aleatoriu

Chiar nu am fost pe deplin mulțumit de al meu prima incercare la construirea unui Generator de Cotații Aleatorii în Tabăra Codului Liber. Era urât, iar citatele erau prea lungi, așa că nu m-am deranjat să implementez funcționalitatea „tweet”. Pur și simplu nu avea niciun sens să faci asta.

Deci, după ce am terminat cu Proiectul Ceas PomodoroAm simțit o dorință puternică de a revizui Mașina mea de cotare aleatorie și de a începe din nou cu o abordare diferită.

Am vrut un design mai interesant, cu câteva animații. Am avut și această idee de a pune ghilimelele în diferite categorii, astfel încât utilizatorii să poată vizualiza citatele din categoriile lor preferate.

Examenele mele s-au terminat, așa că am avut suficient timp pe mâini ca să-l termin.

Logică

M-am stabilit pe opt categorii pentru citate și am adunat 25 de citate pentru fiecare. Fiecare categorie era o serie de obiecte cu proprietăți de citat și autor, astfel încât să le pot recupera cu ușurință.

ad-banner
1611252667 397 Construirea unui aparat de cotare aleatoriu

Apoi am făcut o funcție pentru a pune ghilimelele în HTML odată ce se face clic pe următorul buton de cotație și o funcție similară pentru butonul „citat anterior”.

1611252667 203 Construirea unui aparat de cotare aleatoriu

Dacă te uiți la cod, vei vedea că ghilimelele nu sunt generate deloc aleatoriu, ci în schimb, iterează de la primul la ultimul și din nou. Aceasta este o alegere intenționată de design pe care am făcut-o.

Proiecta

Ceea ce m-a enervat cel mai mult la prima încercare nu a fost chiar cum a funcționat, ci cum a arătat. Așadar, designul a fost pe ceea ce m-am concentrat în cea mai mare parte pe acest proiect.

Primul lucru pe care l-am făcut a fost să listez toate lucrurile pe care doream să le facă aplicația mea și cum aș dori să arate. Am aflat de-a lungul timpului că cel mai bun mod de a aborda orice este să-l descompun în pași simpli de acțiune, astfel încât am făcut-o aici folosind Flux de lucru.

1611252667 742 Construirea unui aparat de cotare aleatoriu

Am folosit întotdeauna Scheletul CSS ori de câte ori vreau să fac un aspect bazat pe grilă, așa că am continuat cu acesta și pentru acesta.

De data aceasta, însă, am folosit Versiunea Sass ceea ce a facilitat schimbarea câtorva variabile și personalizarea ei puțin fără a atinge fișierele originale.

Odată ce acest lucru a fost la locul său, am început să lucrez la proiectarea paginii de destinație. În mintea mea, am vrut o grilă 2×4 cu cărți pentru fiecare secțiune și un titlu în partea de sus. A fost destul de ușor.

Construirea unui aparat de cotare aleatoriu

Bam! Am avut grila mea la locul lor. Următorul lucru a fost să îmi dau seama cum voi stiliza pagina ghilimelelor și să folosesc animații pentru a comuta între ambele pagini.

Pagina citatelor mi-a luat ceva mai mult timp să termin. Aveam o bară de navigare în partea de sus pentru a comuta între secțiuni și casetă în mijlocul unde ar fi afișate ghilimelele. Butoanele pentru afișarea ghilimelelor erau în partea de jos.

O idee care mi-a venit în cap în acest moment a fost să schimb imaginea de fundal pe măsură ce utilizatorul se deplasează între secțiuni. Imaginea de fundal trebuia să corespundă cu imaginea prezentată în cardurile de pe pagina principală.

De asemenea, am dorit ca schimbarea să fie netedă cu animații subtile, așa că am folosit proprietatea de tranziție CSS în acest scop și a funcționat bine pe Chrome, dar nu am putut să o funcționeze pe Firefox (dacă cineva știe cum să remedieze acest lucru, vă rugăm să eu știu).

1611252668 413 Construirea unui aparat de cotare aleatoriu

Odată ce am ambele planuri sortate, a venit timpul să leg cele două pagini cu o animație. Primul meu gând a fost să folosesc animații CSS, dar nu am ajuns nicăieri, așa că am căutat animații jQuery. După câteva experimente, am găsit ceea ce îmi doream. Funcțiile slideUp () și slideDown () erau perfecte pentru ceea ce aveam nevoie.

Practic, după ce faceți clic pe oricare dintre secțiunile de pe pagina de pornire, pagina ghilimelelor se va glisa în vizualizare și puteți vizualiza ghilimelele din diferitele secțiuni. În mod similar, când faceți clic pe butonul Acasă de pe bara de navigare, pagina glisează în jos pentru a afișa pagina principală.

Deci asta a fost asta.

Tot ce am făcut din acel moment a fost să înlocuiesc imaginile substituente cu imagini reale și să folosesc câteva fonturi Google pentru a face lucruri mai bune. În cele din urmă, am făcut butonul tweet.

Puteți vizualiza versiunea finala pe CodePen.

Lecții învățate

În timpul lucrului la acest proiect, am învățat câteva lecții valoroase:

  • În unele cazuri, utilizarea imaginilor de fundal vă poate oferi mai mult control și mai multă flexibilitate cu imagini de înălțime diferită, deoarece puteți seta fundal-size: cover și nu va revărsa containerul. În plus, puteți crea câteva efecte de hover cool, așa cum am făcut cu imaginile prezentate pe pagina de destinație. Nu știam întotdeauna acest lucru, dar cineva de pe Grupul CodeNewbie Slack mi-a subliniat asta.
  • De asemenea, am învățat cum să descompun fișierele Sass în parțiale și să le import în foaia de stil principală. Acest lucru ajută la organizare și facilitează remedierea lucrurilor. Am o arhitectură de lucru pe care o folosesc și nu este perfectă, dar o voi îmbunătăți în timp.
1611252669 390 Construirea unui aparat de cotare aleatoriu

Îmi va plăcea să vă aud gândurile despre abordarea mea și ce lucruri aș putea îmbunătăți, astfel încât un comentariu sau două să fie foarte apreciat.

Urmatorul

Voi lucra la „Afișați vremea locală”Proiect în acest weekend și sper să îl fac până duminică. Aceasta va fi prima mea experiență reală cu utilizarea unui API și sper să o rezolv suficient de repede.

Voi scrie o postare similară pe acel proiect săptămâna viitoare, așa că fii cu ochii pe acesta.

Dacă doriți să contactați sau să vă conectați cu mine, mă puteți găsi pe Stare de nervozitate sau trimiteți-mi un e-mail.

O versiune a acestui post a fost publicată pe pagina mea blog personal