1. תיבות טקסט מסונכרונת

בנו פקד עם 5 תיבות טקסט שהקלט בכל תיבות הטקסט מתואם. שינוי קלט בתיבה אחת משנה את הקלט בכל התיבת האחרות. דוגמא לקוד שמשתמש בפקד זה:

React.render(<MultiInput />, document.querySelector('main'));

וכך התוצאה צריכה להתנהג:

2. ממחיר יחידות זמן

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

לדוגמא, כאשר משתמש כותב 60 בתיבת השניות יש להציג 1 בתיבת הדקות ו 0.016 בתיבת השעות.

3. משחק ניחוש מספר

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

בשביל שיהיה מעניין על המחשב לרמות מדי פעם ולרשום "קטן מדי" על מספר גדול או "גדול מדי" על מספר קטן.

4. בורר צבע

כתבו תוכנית ריאקט המציגה תיבת קלט לבחירת צבע ולידה תיבת div צבעונית. בכל פעם שמשתמש בוחר צבע יש לעדכן את הצבע של ה div.

לאחר מכן עדכנו את הפקד כך שיוכל לקבל בתור Property ערך של צבע שיוצג לפני שמשתמש בחר את הצבע הראשון.

5. בחירת צבעים

כתבו תוכנית ריאקט המציגה תיבת קלט לבחירת צבע ו-10 מלבנים. בכל פעם שמשתמש בוחר צבע יש לצבוע את המלבנים בצבע שהולך והופך כהה יותר כך שהמלבן האמצעי יהיה צבוע בצבע שנבחר, המלבנים משמאל בהירים יותר והמלבנים מימין כהים יותר.

כך נראית התוצאה (החליפו צבע בתיבה לראות את האפקט):

רמז: הספריה tinycolor עושה עבודה מצוינת במניפולציות על צבעים ועוזרת למצוא צבעים כהים או בהירים יותר. קראו עליה בקישור https://github.com/bgrins/TinyColor