לדלג לתוכן

4.10 פרויקטים פרויקט

פרויקטים - ג'אווהסקריפט מתקדם וכלי פיתוח

פרויקט 1 - אפליקציית מזג אוויר - Weather App

בנו אפליקציה שמציגה מזג אוויר לפי מיקום המשתמש או לפי חיפוש עיר.

דרישות טכניות

  • השתמשו ב-API חינמי כמו OpenWeatherMap (https://openweathermap.org/api) - צריך להירשם ולקבל API key
  • הפרויקט חייב לרוץ עם Vite

דרישות פונקציונליות

חיפוש ותצוגה:
- שדה חיפוש עם כפתור לחיפוש לפי שם עיר
- כפתור "המיקום שלי" שמשתמש ב-Geolocation API לזיהוי מיקום אוטומטי
- הצגת שם העיר, טמפרטורה נוכחית, תיאור מזג האוויר, ואייקון
- הצגת פרטים נוספים: לחות, מהירות רוח, לחץ אוויר, ותחושת חום
- הצגת תחזית ל-5 ימים הקרובים

שמירה מקומית:
- שמירת העיר האחרונה שחיפשו ב-localStorage
- בטעינת האפליקציה, הצגת מזג האוויר של העיר השמורה
- רשימת ערים מועדפות (הוספה והסרה) שנשמרת ב-localStorage
- לחיצה על עיר מועדפת מציגה את מזג האוויר שלה

טיפול בשגיאות:
- הודעת שגיאה כשהעיר לא נמצאת
- הודעת שגיאה כשאין חיבור לאינטרנט
- טיפול בסירוב הרשאת מיקום
- הצגת מצב טעינה (loading) בזמן שהבקשה מתבצעת
- שימוש ב-AbortController לביטול בקשות כשמחפשים עיר חדשה

ארגון קוד:
- פיצול לקבצי מודולים (api.js, storage.js, ui.js)
- פונקציית עטיפה ל-fetch עם טיפול בשגיאות ו-timeout
- משתני סביבה - ה-API key בקובץ .env (עם קידומת VITE_)

בונוסים

  • החלפת רקע/צבעים לפי מזג האוויר (שמשי, גשום, מעונן)
  • הצגת שעת זריחה ושקיעה
  • התאמה למובייל (responsive)
  • אנימציות עם requestAnimationFrame

בנו אפליקציה לחיפוש סרטים עם גלילה אינסופית ו-debounce.

דרישות טכניות

  • השתמשו ב-OMDb API (https://www.omdbapi.com) - צריך API key חינמי
  • הפרויקט חייב לרוץ עם Vite

דרישות פונקציונליות

חיפוש:
- שדה חיפוש שמתחיל לחפש אוטומטית תוך כדי הקלדה
- שימוש ב-debounce - חיפוש מתבצע רק 500ms אחרי שהמשתמש הפסיק להקליד
- ביטול בקשות קודמות עם AbortController כשמקלידים מילה חדשה
- הצגת מספר תוצאות שנמצאו

גלילה אינסופית:
- טעינת 10 תוצאות בכל פעם (OMDb מחזיר 10 לעמוד)
- שימוש ב-IntersectionObserver לזיהוי גלילה לתחתית
- הצגת spinner בזמן טעינה
- הודעה כשאין יותר תוצאות

תצוגת סרט:
- כרטיס לכל סרט עם פוסטר, שם, שנה וסוג (סרט/סדרה)
- לחיצה על כרטיס פותחת מודל (modal) עם פרטים מלאים
- בפרטים המלאים: תקציר, דירוג, במאי, שחקנים, ז'אנר
- השתמשו בבקשת API נפרדת לפרטים מלאים (?i=imdbID)

היסטוריה ומועדפים:
- שמירת היסטוריית חיפושים ב-localStorage (10 חיפושים אחרונים)
- הצגת היסטוריה ב-dropdown כשלוחצים על שדה החיפוש
- רשימת מועדפים - כפתור "הוסף למועדפים" בכל כרטיס
- דף/תצוגה נפרדת למועדפים עם History API

ארגון קוד:
- מודולים נפרדים: api.js, search.js, ui.js, favorites.js, storage.js
- פונקציית debounce כפונקציה טהורה (pure function)
- שימוש ב-pipe או compose למעבד תוצאות

בונוסים

  • טעינה עצלה של פוסטרים עם IntersectionObserver
  • העתקת לינק לסרט עם Clipboard API
  • מעבר בין תצוגת grid ו-list עם matchMedia
  • אנימציית כניסה לכרטיסים

פרויקט 3 - לוח משימות - Kanban Board

בנו לוח קנבן (Kanban) עם גרירה ושחרור (drag and drop).

דרישות טכניות

  • הפרויקט חייב לרוץ עם Vite
  • השתמשו ב-HTML Drag and Drop API המובנה (בלי ספריות חיצוניות)

דרישות פונקציונליות

מבנה הלוח:
- 3 עמודות: "לביצוע" (To Do), "בתהליך" (In Progress), "הושלם" (Done)
- כל עמודה מציגה כותרת ומספר משימות
- כפתור הוספת משימה בכל עמודה

משימות:
- כל משימה מכילה: כותרת, תיאור (אופציונלי), צבע תיוג, ותאריך יצירה
- לחיצה על משימה פותחת מודל לעריכה
- כפתור מחיקה בתוך המודל
- בחירת צבע תיוג (לפחות 4 צבעים)

גרירה ושחרור:
- גרירת משימה בין עמודות (drag and drop)
- סימון ויזואלי של העמודה שאפשר לשחרר בה (drag over effect)
- סימון ויזואלי של המשימה הנגררת
- עדכון מספר המשימות בכל עמודה אחרי גרירה

שמירה:
- שמירת כל המשימות והמצב שלהן ב-localStorage
- טעינה מ-localStorage בפתיחת האפליקציה
- כל שינוי (הוספה, עריכה, מחיקה, גרירה) נשמר מיד

ארגון קוד:
- גישת אי-שינוי (immutable) לניהול state
- פונקציות טהורות לעדכון state
- מודולים נפרדים: board.js, task.js, drag.js, storage.js, ui.js

בונוסים

  • סינון משימות לפי צבע תיוג
  • חיפוש משימות
  • ייצוא/ייבוא משימות כ-JSON (עם Clipboard API)
  • התאמה למובייל
  • אנימציה כשמשימה עוברת עמודה
  • שימוש ב-ResizeObserver להתאמת גובה עמודות

פרויקט 4 - צ'אט מדומה - Mock Chat

בנו ממשק צ'אט שמדמה שיחה עם תגובות אוטומטיות.

דרישות טכניות

  • הפרויקט חייב לרוץ עם Vite
  • התגובות האוטומטיות מדומות עם setTimeout (ללא שרת)

דרישות פונקציונליות

ממשק צ'אט:
- שדה הקלדת הודעה עם כפתור שליחה
- תמיכה בשליחה עם Enter
- הצגת הודעות בבועות (bubbles) - הודעות שלי מימין, תגובות משמאל
- הצגת זמן שליחה ליד כל הודעה
- הצגת "מקליד..." (typing indicator) כשהצד השני "מקליד" תגובה
- גלילה אוטומטית להודעה האחרונה

תגובות אוטומטיות:
- כשהמשתמש שולח הודעה, מתחילה "הקלדה" אחרי 500ms
- אחרי 1-3 שניות אקראיות, מגיעה תגובה
- התגובות נבחרות ממאגר מוכן, או לפי מילות מפתח בהודעה
- לדוגמה: הודעה שמכילה "שלום" מקבלת תגובת ברכה, "עזרה" מקבלת הסבר

התראות:
- שימוש ב-Notifications API להתראה על הודעה חדשה
- ההתראה מופיעה רק אם הלשונית לא בפוקוס
- לחיצה על ההתראה מחזירה פוקוס ללשונית

שמירה:
- שמירת כל ההודעות ב-localStorage
- טעינת היסטוריית ההודעות בפתיחה
- כפתור "נקה שיחה" שמוחק את ההיסטוריה

לולאת אירועים:
- השתמשו ב-setTimeout לדימוי השהיית תגובה
- השתמשו ב-requestAnimationFrame לאנימציית "מקליד..."
- וודאו שאנימציות לא חוסמות את ה-UI

ארגון קוד:
- מודולים: chat.js, responses.js, notifications.js, storage.js, ui.js
- פונקציות טהורות לניהול רשימת הודעות (immutable)
- פונקציית pipe לעיבוד הודעה נכנסת (ניקוי, תיוג זמן, בחירת תגובה)

בונוסים

  • כמה "אנשי קשר" עם שיחות נפרדות
  • שליחת תמונות (בחירה מהמחשב, הצגה בצ'אט)
  • חיפוש בהודעות
  • ייצוא שיחה עם Clipboard API
  • אפקטי קול (Web Audio API)
  • מצב כהה/בהיר עם matchMedia