ફ્રન્ટ-એન્ડ ડેવલપર માટે છ કાર્યો

1. ક્રેડિટ કાર્ડ ફોર્મ

સરળ અને આનંદપ્રદ સૂક્ષ્મ ક્રિયાપ્રતિક્રિયાઓ સાથે એક સરસ ક્રેડિટ કાર્ડ આકાર. નંબર ફોર્મેટિંગ, વેરિફિકેશન અને ઓટોમેટિક કાર્ડ પ્રકાર ડિટેક્શનનો સમાવેશ થાય છે. તે Vue.js પર બનેલ છે અને તે પણ સંપૂર્ણપણે જવાબદાર છે. (તમે જોઈ શકો છો અહીં.)

ક્રેડિટ-કાર્ડ-ફોર્મ

તમે શું શીખી શકશો:

• પ્રક્રિયા કરો અને ફોર્મ માન્ય કરો
• ઇવેન્ટ્સ હેન્ડલ કરો (ઉદાહરણ તરીકે, જ્યારે ફીલ્ડ બદલાય છે)
• પેજ પર તત્વો કેવી રીતે પ્રદર્શિત કરવા અને મૂકવા તે સમજો, ખાસ કરીને ફોર્મની ટોચ પર દેખાતી ક્રેડિટ કાર્ડ માહિતી

લેખનો અનુવાદ EDISON સૉફ્ટવેરના સમર્થન સાથે કરવામાં આવ્યો હતો, જે પ્રોગ્રામરોના સ્વાસ્થ્ય અને તેમના નાસ્તાની કાળજી લે છે, અને કસ્ટમ સોફ્ટવેર વિકસાવે છે.

2. હિસ્ટોગ્રામ

હિસ્ટોગ્રામ એ એક ચાર્ટ અથવા આલેખ છે જે તેઓ રજૂ કરે છે તે મૂલ્યોના પ્રમાણસર ઊંચાઈ અથવા લંબાઈ સાથે લંબચોરસ બાર સાથે વર્ગીકૃત ડેટાનું પ્રતિનિધિત્વ કરે છે.

તેઓ ઊભી અથવા આડી રીતે લાગુ કરી શકાય છે. વર્ટિકલ બાર ચાર્ટને ક્યારેક લાઇન ચાર્ટ કહેવામાં આવે છે.

તમે શું શીખી શકશો:

• સંરચિત અને સમજી શકાય તેવી રીતે ડેટા પ્રદર્શિત કરો
• વધારામાં: તત્વનો ઉપયોગ કેવી રીતે કરવો તે જાણો canvas અને તેની સાથે તત્વો કેવી રીતે દોરવા

તે તમે વિશ્વની વસ્તી ડેટા શોધી શકો છો. તેઓ વર્ષ દ્વારા વર્ગીકૃત થયેલ છે.

3. ટ્વિટર હાર્ટ એનિમેશન

2016 માં, ટ્વિટરે તેની ટ્વીટ્સ માટે આ અદ્ભુત એનિમેશન રજૂ કર્યું હતું. 2019 સુધી, તે હજી પણ ભાગ દેખાય છે, તો શા માટે એક જાતે બનાવશો નહીં?

તમે શું શીખી શકશો:

• CSS વિશેષતા સાથે કામ કરો keyframes
• HTML ઘટકોને હેરફેર અને એનિમેટ કરો
• JavaScript, HTML અને CSS ને જોડો

4. શોધ કાર્ય સાથે GitHub રીપોઝીટરીઝ

અહીં કંઈપણ ફેન્સી નથી — GitHub રેપો માત્ર એક ગૌરવપૂર્ણ સૂચિ છે.
ધ્યેય રીપોઝીટરીઝ પ્રદર્શિત કરવાનો છે અને વપરાશકર્તાને તેમને ફિલ્ટર કરવાની મંજૂરી આપે છે. વાપરવુ સત્તાવાર GitHub API દરેક વપરાશકર્તા માટે રીપોઝીટરીઝ મેળવવા માટે.

GitHub પ્રોફાઇલ પૃષ્ઠ - github.com/indreklasn

તમે શું શીખી શકશો:

• API માંથી ડેટા મેળવો
• API માંથી ડેટા દર્શાવો
• ફિલ્ટર કરો અને દરેક શોધ માટે સંબંધિત ડેટા બતાવો
• વૈકલ્પિક: જો તમે પડકાર માટે તૈયાર છો, તો ઉપયોગ કરો API v4, GraphQL નો ઉપયોગ કરીને બનેલ. જો તમે GraphQL શીખવા માંગતા હો, તો મારા અગાઉના લેખોમાંથી એક પર જાઓ.

5. Reddit-શૈલી ચેટ્સ

તેમની સાદગી અને ઉપયોગમાં સરળતાને કારણે ચેટ્સ એ સંચારની લોકપ્રિય રીત છે. પરંતુ આધુનિક ચેટ રૂમને ખરેખર શું ઇંધણ આપે છે? વેબસોકેટ્સ!

તમે શું શીખી શકશો:

• વેબસોકેટ્સ, રીઅલ-ટાઇમ કોમ્યુનિકેશન અને ડેટા અપડેટ્સનો ઉપયોગ કરો
• વપરાશકર્તા ઍક્સેસ સ્તરો સાથે કામ કરો (ઉદાહરણ તરીકે, ચેટ ચેનલના માલિકની ભૂમિકા છે admin, અને રૂમમાં અન્ય - user)
• પ્રક્રિયા કરો અને ફોર્મ માન્ય કરો - યાદ રાખો, સંદેશ મોકલવા માટેની ચેટ વિન્ડો છે input
• વિવિધ ચેટ્સ બનાવો અને તેમાં જોડાઓ
• વ્યક્તિગત સંદેશાઓ સાથે કામ કરો. વપરાશકર્તાઓ અન્ય વપરાશકર્તાઓ સાથે ખાનગી રીતે ચેટ કરી શકે છે. આવશ્યકપણે, તમે બે વપરાશકર્તાઓ વચ્ચે વેબસોકેટ કનેક્શન સ્થાપિત કરશો.

6. સ્ટ્રાઇપ-શૈલી નેવિગેશન

જે આ નેવિગેશનને અનન્ય બનાવે છે તે એ છે કે પોપઓવર કન્ટેનર સામગ્રીને ફિટ કરવા માટે પરિવર્તિત થાય છે. નવા પોપઓવરને ખોલવા અને બંધ કરવાના પરંપરાગત વર્તનની તુલનામાં આ સંક્રમણમાં લાવણ્ય છે.

તમે શું શીખી શકશો:

• સંક્રમણો સાથે CSS એનિમેશનને જોડો
• સામગ્રીને મંદ કરો અને ફ્લોટેડ એલિમેન્ટ પર સક્રિય વર્ગ લાગુ કરો

પહેલા તે જાતે કરવાનો પ્રયાસ કરો, પરંતુ જો તમને મદદની જરૂર હોય, તો આ તપાસો પગલું દ્વારા પગલું માર્ગદર્શિકા.

સોર્સ: www.habr.com