שש משימות למפתח Front-End

1. טופס כרטיס אשראי

צורת כרטיס אשראי מגניבה עם מיקרו-אינטראקציות חלקות ומהנות. כולל עיצוב מספרים, אימות וזיהוי אוטומטי של סוג כרטיס. הוא בנוי על Vue.js והוא גם מגיב באופן מלא. (אתה יכול לראות כאן.)

טופס כרטיס אשראי

מה תלמד:

• עיבוד ואימות טפסים
• טיפול באירועים (לדוגמה, כאשר שדות משתנים)
• הבן כיצד להציג ולהציב אלמנטים בדף, במיוחד את פרטי כרטיס האשראי המופיעים על גבי הטופס

המאמר תורגם בתמיכת EDISON Software, אשר דואג לבריאות המתכנתים ולארוחת הבוקר שלהםו - מפתחת תוכנה בהתאמה אישית.

2. היסטוגרמה

היסטוגרמה היא תרשים או גרף המייצגים נתונים קטגוריים עם פסים מלבניים עם גבהים או אורכים פרופורציונליים לערכים שהם מייצגים.

ניתן ליישם אותם אנכית או אופקית. תרשים עמודות אנכי נקרא לפעמים תרשים קווים.

מה תלמד:

• הצגת נתונים בצורה מובנית ומובנת
• בנוסף: למד כיצד להשתמש באלמנט canvas ואיך לצייר איתו אלמנטים

כאן אתה יכול למצוא נתוני אוכלוסיית העולם. הם ממוינים לפי שנה.

3. אנימציית לב טוויטר

עוד בשנת 2016, טוויטר הציגה את האנימציה המדהימה הזו עבור הציוצים שלה. נכון לשנת 2019, זה עדיין נראה החלק, אז למה שלא תיצור אחד בעצמך?

מה תלמד:

• עבודה עם תכונת CSS keyframes
• מניפולציה והנפשה של רכיבי HTML
• שלב JavaScript, HTML ו-CSS

4. מאגרי GitHub עם פונקציית חיפוש

אין כאן שום דבר מפואר - מאגרי GitHub הם רק רשימה מהוללת.
המטרה היא להציג את המאגרים ולאפשר למשתמש לסנן אותם. להשתמש API הרשמי של GitHub כדי לקבל מאגרים עבור כל משתמש.

דף פרופיל GitHub - github.com/indreklasn

מה תלמד:

• קבל נתונים מ-API
• הצג נתונים מ-API
• סנן והצג נתונים רלוונטיים עבור כל חיפוש
• אופציונלי: אם אתה מוכן לאתגר, השתמש API v4, נבנה באמצעות GraphQL. אם אתה רוצה ללמוד GraphQL, עבור לאחד מהמאמרים הקודמים שלי.

5. צ'אטים בסגנון Reddit

צ'אטים הם דרך פופולרית לתקשורת בשל הפשטות וקלות השימוש שלהם. אבל מה באמת מזין חדרי צ'אט מודרניים? WebSockets!

מה תלמד:

• השתמש ב-WebSockets, תקשורת בזמן אמת ועדכוני נתונים
• עבודה עם רמות גישה של משתמשים (לדוגמה, הבעלים של ערוץ צ'אט הוא בעל התפקיד adminואחרים בחדר - user)
• עיבוד ואימות טפסים - זכרו, חלון הצ'אט לשליחת הודעה הוא input
• צור והצטרף לצ'אטים שונים
• עבודה עם מסרים אישיים. משתמשים יכולים לשוחח בצ'אט עם משתמשים אחרים באופן פרטי. בעיקרו של דבר, אתה תיצור חיבור WebSocket בין שני משתמשים.

6. ניווט בסגנון פס

מה שמייחד את הניווט הזה הוא שמיכל הפופ-אובר משתנה כך שיתאים לתוכן. יש אלגנטיות למעבר הזה בהשוואה להתנהגות המסורתית של פתיחה וסגירה של פופ-אובר חדש.

מה תלמד:

• שלב אנימציות CSS עם מעברים
• עמעום תוכן והחל מחלקה פעילה על אלמנט צף

נסה לעשות את זה בעצמך קודם, אבל אם אתה צריך עזרה, בדוק את זה מדריך צעד אחר צעד.

מקור: www.habr.com