Sis travay pou yon pwomotè Front-End

1. Fòm kat kredi

Yon fòm kat kredi fre ak mikwo-entèraksyon lis ak agreyab. Gen ladan fòma nimewo, verifikasyon ak deteksyon otomatik kalite kat. Li bati sou Vue.js epi li konplètman reponn. (Ou ka wè isit la.)

fòm-kat-kredi

Ki sa ou pral aprann:

• Pwosesis ak valide fòm yo
• Jere evènman yo (pa egzanp, lè jaden yo chanje)
• Konprann ki jan yo montre ak mete eleman sou paj la, espesyalman enfòmasyon sou kat kredi ki parèt anlè fòm lan

Atik la te tradui ak sipò EDISON Software, ki pran swen sante pwogramè yo ak manje maten yoAk devlope lojisyèl koutim.

2. Istogram

Yon istogram se yon tablo oswa graf ki reprezante done kategori ak ba rektangilè ak wotè oswa longè pwopòsyonèl ak valè yo reprezante.

Yo ka aplike vètikal oswa orizontal. Yon tablo ba vètikal pafwa yo rele yon tablo liy.

Ki sa ou pral aprann:

• Montre done nan yon fason estriktire ak konprann
• Anplis de sa: Aprann kijan pou itilize eleman an canvas ak ki jan yo desine eleman ak li

Isit la ou ka jwenn done popilasyon mondyal la. Yo klase pa ane.

3. Twitter kè animasyon

Retounen nan 2016, Twitter prezante animasyon etonan sa a pou tweets li yo. Kòm nan 2019, li toujou sanble pati nan, kidonk poukisa pa kreye youn tèt ou?

Ki sa ou pral aprann:

• Travay ak atribi CSS keyframes
• Manipile ak anime eleman HTML
• Konbine JavaScript, HTML ak CSS

4. GitHub depo ak fonksyon rechèch

Pa gen anyen anpenpan isit la—Repozitwa GitHub yo se jis yon lis glorifye.
Objektif la se montre depo yo epi pèmèt itilizatè a filtre yo. Sèvi ak ofisyèl GitHub API pou jwenn depo pou chak itilizatè.

Paj pwofil GitHub - github.com/indreklasn

Ki sa ou pral aprann:

• Resevwa done ki soti nan API
• Montre done ki soti nan API
• Filtre epi montre done ki enpòtan pou chak rechèch
• Si ou vle: Si w vle yon defi, sèvi ak API v4, bati lè l sèvi avèk GraphQL. Si ou vle aprann GraphQL, ale nan youn nan atik anvan mwen yo.

5. Reddit-style chat

Chat yo se yon fason popilè nan kominikasyon akòz senplisite yo ak fasilite yo sèvi ak yo. Men, sa ki vrèman gaz chanm chat modèn? WebSockets!

Ki sa ou pral aprann:

• Sèvi ak WebSockets, kominikasyon an tan reyèl ak mizajou done
• Travay ak nivo aksè itilizatè yo (pa egzanp, mèt kay la nan yon kanal chat gen wòl la admin, ak lòt moun nan chanm nan - user)
• Pwosesis ak valide fòm - sonje, fenèt la chat pou voye yon mesaj se input
• Kreye epi rantre nan chat diferan
• Travay ak mesaj pèsonèl. Itilizatè yo ka koze ak lòt itilizatè yo an prive. Esansyèlman, ou pral etabli yon koneksyon WebSocket ant de itilizatè.

6. Stripe-style navigasyon

Ki sa ki fè navigasyon sa a inik se ke veso popover a transfòme pou anfòm kontni an. Gen yon distenksyon nan tranzisyon sa a konpare ak konpòtman tradisyonèl nan ouvèti ak fèmen yon nouvo popover.

Ki sa ou pral aprann:

• Konbine animasyon CSS ak tranzisyon
• Dim kontni epi aplike klas aktif nan eleman flote

Eseye fè li tèt ou an premye, men si ou bezwen èd, tcheke sa a etap pa etap gid.

Sous: www.habr.com