4.8 ממשקי דפדפן תרגול
תרגול - ממשקי דפדפן¶
תרגיל 1 - טעינה עצלה של תמונות¶
בנו מערכת lazy loading לתמונות:
- צרו דף HTML עם 20 תמונות (השתמשו ב-
https://picsum.photos/400/300?random=Nכ-placeholder) - כל תמונה מתחילה עם placeholder קל (רקע אפור) ו-
data-srcעם ה-URL האמיתי - השתמשו ב-IntersectionObserver כדי לטעון תמונות רק כשהן מתקרבות לאזור הנראות
- הוסיפו rootMargin של 100px כדי להתחיל לטעון לפני שהתמונה נראית
- הוסיפו אפקט fade-in כשהתמונה נטענת (שנו opacity עם transition ב-CSS)
- הציגו מונה שמראה כמה תמונות נטענו מתוך הכלל
תרגיל 2 - גלילה אינסופית עם API¶
בנו רשימת פוסטים עם גלילה אינסופית:
- השתמשו ב-JSONPlaceholder API:
https://jsonplaceholder.typicode.com/posts?_page=N&_limit=10 - טענו 10 פוסטים בכל פעם
- כשהמשתמש מגיע לתחתית הרשימה, טענו את העמוד הבא
- הציגו אנימציית טעינה (spinner) בזמן שטוענים
- עצרו את הטעינה כשאין יותר פוסטים (ה-API מחזיר מערך ריק)
- הוסיפו כפתור "חזרה למעלה" שמופיע רק אחרי שגוללים למטה
רמז: השתמשו ב-IntersectionObserver על אלמנט sentinel בתחתית הרשימה.
תרגיל 3 - ניהול לוח העתקה¶
בנו ממשק שמאפשר ניהול snippets של קוד:
- צרו רשימה של 5 קטעי קוד (code snippets) עם כפתור "העתק" ליד כל אחד
- כשלוחצים "העתק", הטקסט מועתק ללוח וכפתור משתנה ל-"הועתק!" למשך 2 שניות
- הוסיפו שדה טקסט עם כפתור "הדבק מלוח" שמדביק את תוכן הלוח
- הוסיפו היסטוריית העתקות - כל פעם שמעתיקים, הטקסט נשמר ברשימה
- אם הדפדפן לא תומך ב-Clipboard API, הציגו הודעת שגיאה מתאימה
תרגיל 4 - ניווט עם History API¶
בנו SPA פשוט עם ניווט:
- צרו 4 "דפים": דף הבית, אודות, יצירת קשר, ופרויקטים
- השתמשו ב-History API כדי לשנות את ה-URL בלי טעינה מחדש
- תפסו לחיצות על לינקים בתפריט ועשו navigate ב-JS
- תמכו בכפתורי חזרה/קדימה של הדפדפן (popstate)
- הוסיפו transition animation כשעוברים בין דפים
- שמרו את הדף הנוכחי ב-
history.stateוב-URL - תמכו בטעינה ישירה - אם המשתמש נכנס ל-
/about, הציגו את הדף הנכון
תרגיל 5 - תגובתיות עם matchMedia¶
בנו ממשק שמגיב לשינויי מדיה:
- זיהוי מצב כהה/בהיר של המערכת והחלת theme מתאים
- שינוי layout מ-grid ל-list כשהמסך צר מ-768px
- הצגת הודעה כשהמשתמש מעדיף reduced motion, וביטול אנימציות
- הצגת מידע על המסך: גודל, orientation, רזולוציה
- עדכון בזמן אמת כשאחד מהערכים משתנה (resize, rotate)
- שמרו את העדפת ה-theme ב-localStorage כדי שהמשתמש יוכל לדרוס את הגדרת המערכת
תרגיל 6 - מערכת התראות¶
בנו מערכת התראות מלאה:
- כפתור לבקשת הרשאה להתראות
- הציגו את סטטוס ההרשאה (granted, denied, default)
- טופס ליצירת התראה מותאמת אישית (כותרת, תוכן, אייקון)
- כשלוחצים על ההתראה, העבירו פוקוס לחלון הדפדפן
- הוסיפו טיימר שמציג התראה אחרי X שניות (שהמשתמש מגדיר)
- שלבו עם Geolocation: כשהמיקום מתעדכן, הציגו התראה עם הקואורדינטות
- אם ההרשאה נדחתה, הציגו התראות בתוך הדף (fallback)