לדלג לתוכן

3.5 בעבוע ודלגציה תרגול

תרגול בעבוע ודלגציה

תרגיל 1 - הבנת בעבוע

בהינתן ה-HTML הבא:

<div id="outer">
  <div id="middle">
    <button id="inner">click me</button>
  </div>
</div>

וה-JavaScript הבא:

document.getElementById("outer").addEventListener("click", function () {
  console.log("outer");
});

document.getElementById("middle").addEventListener("click", function () {
  console.log("middle");
});

document.getElementById("inner").addEventListener("click", function () {
  console.log("inner");
});

ענו על השאלות הבאות (בלי להריץ את הקוד):

  1. מה יודפס כשלוחצים על הכפתור?
  2. מה יודפס כשלוחצים על ה-div middle (לא על הכפתור)?
  3. מה יודפס כשלוחצים על ה-div outer (לא על middle)?
  4. מה ישתנה אם נוסיף event.stopPropagation() ל-handler של inner?

תרגיל 2 - כרטיס עם כפתורים

בנו כרטיס מוצר שבו:
- לחיצה על הכרטיס כולו מדפיסה "card clicked"
- לחיצה על כפתור "like" מדפיסה "liked!" בלי להפעיל את ה-handler של הכרטיס
- לחיצה על כפתור "share" מדפיסה "shared!" בלי להפעיל את ה-handler של הכרטיס

דרישות:
- צרו את ה-HTML עם div לכרטיס ושני כפתורים בתוכו
- השתמשו ב-stopPropagation כדי למנוע את הבעבוע מהכפתורים
- הוסיפו handler על document שמדפיס "document clicked" - ודאו שהוא נקרא כשלוחצים על הכרטיס אבל לא כשלוחצים על הכפתורים

תרגיל 3 - רשימה דינמית עם דלגציה

בנו רשימת קניות עם הפונקציונליות הבאה:
- שדה input וכפתור להוספת פריטים לרשימה
- כל פריט מכיל: טקסט, כפתור "V" לסימון, כפתור "X" למחיקה
- לחיצה על "V" מוסיפה קו חוצה על הטקסט (text-decoration: line-through)
- לחיצה על "X" מוחקת את הפריט מהרשימה

דרישות:
- השתמשו בדלגציית אירועים - handler אחד על ה-ul
- השתמשו ב-event.target.closest() לזיהוי מדויק
- ודאו שפריטים חדשים שנוספים עובדים כמו כל השאר

תרגיל 4 - טבלת עובדים עם דלגציה

בנו טבלה עם רשימת עובדים (שם, תפקיד, מחלקה) עם הפונקציות הבאות:
- לחיצה על שורה מדגישה אותה (צבע רקע שונה). רק שורה אחת יכולה להיות מודגשת בכל רגע
- כל שורה מכילה כפתור "delete" שמוחק את השורה
- כפתור "add employee" מוסיף שורה חדשה עם נתונים שנכתבים ב-3 שדות input
- לחיצה על כותרת עמודה ממיינת את הטבלה לפי אותה עמודה (אלפביתית)

דרישות:
- השתמשו בדלגציית אירועים - handler אחד על ה-tbody לפעולות השורות
- השתמשו בדלגציה גם על ה-thead למיון
- אלמנטים דינמיים חייבים לעבוד כמו הקיימים
- התחילו עם לפחות 4 עובדים בטבלה

תרגיל 5 - תפריט אקורדיון

בנו אקורדיון - רשימת שאלות ותשובות שבו לחיצה על שאלה פותחת/סוגרת את התשובה:

<div id="accordion">
  <div class="accordion-item">
    <div class="question">What is JavaScript?</div>
    <div class="answer">JavaScript is a programming language...</div>
  </div>
  <div class="accordion-item">
    <div class="question">What is the DOM?</div>
    <div class="answer">The DOM is a tree representation...</div>
  </div>
  <!-- more items -->
</div>

דרישות:
- handler אחד על ה-div הראשי (דלגציה)
- לחיצה על שאלה מציגה/מסתירה את התשובה שלה
- רק תשובה אחת יכולה להיות פתוחה בכל רגע (לחיצה על שאלה סוגרת את כל השאר)
- הוסיפו אנימציה פשוטה - התשובה תיפתח בצורה חלקה (CSS transition על max-height)
- בנו לפחות 5 שאלות ותשובות
- הוסיפו כפתור "add question" שמוסיף שאלה ותשובה חדשות (מ-input) - ודאו שהפריטים החדשים עובדים

תרגיל 6 - גלריית תמונות עם סינון

בנו גלריית תמונות עם כפתורי סינון:

<div id="gallery-app">
  <div class="filters">
    <button data-filter="all" class="active">all</button>
    <button data-filter="nature">nature</button>
    <button data-filter="city">city</button>
    <button data-filter="food">food</button>
  </div>
  <div class="gallery">
    <!-- image cards with data-category attribute -->
  </div>
</div>

דרישות:
- handler אחד על ה-div של הפילטרים (דלגציה)
- handler אחד על ה-div של הגלריה (דלגציה)
- לחיצה על כפתור פילטר מסתירה/מציגה תמונות לפי הקטגוריה (display: none/block)
- לחיצה על כרטיס תמונה מציגה את התמונה במודאל מוגדל
- הכפתור הפעיל מקבל class של active
- צרו לפחות 9 תמונות (3 מכל קטגוריה) - אפשר להשתמש ב-placeholder images
- הוסיפו מעבר חלק כשהתמונות מוסתרות/מופיעות

תרגיל 7 - capture מול bubble

בנו הדגמה ויזואלית של שלבי ה-event propagation:
- צרו 3 divים מקוננים עם צבעי רקע שונים (גדול, בינוני, קטן)
- רשמו handlers בשני השלבים - capture ו-bubble - על כל שלושת האלמנטים
- כשלוחצים על האלמנט הפנימי, הציגו לוג ויזואלי (div עם טקסט) שמראה את סדר ההפעלה:
- "outer - capture"
- "middle - capture"
- "inner - target"
- "middle - bubble"
- "outer - bubble"
- כל שלב צריך להופיע עם עיכוב קטן (setTimeout) כדי שאפשר יהיה לראות את הסדר קורה בזמן אמת
- הוסיפו כפתור "clear log" שמנקה את הלוג

תרגיל 8 - מנהל משימות מתקדם

בנו מנהל משימות (task manager) מתקדם עם לוח קנבן פשוט:
- שלושה טורים: "to do", "in progress", "done"
- כל משימה היא כרטיס עם: כותרת, תיאור קצר, וכפתורי חצים (< >) להזיז למצב הבא/הקודם
- כפתור "add task" שמוסיף משימה חדשה לטור "to do"
- לחיצה על כפתור > מעבירה את המשימה לטור הבא (to do -> in progress -> done)
- לחיצה על כפתור < מעבירה את המשימה לטור הקודם
- כפתור X למחיקת משימה

דרישות:
- השתמשו בדלגציה לכל טור - handler אחד על כל טור (או handler אחד על כל הלוח)
- השתמשו ב-closest() לזיהוי הכרטיס והכפתור שנלחצו
- ודאו שמשימות חדשות שנוצרות דינמית עובדות
- עצבו בצורה בסיסית עם CSS