1. שלוש תמונות של חתולים

מצאו שלוש תמונות של חתולים ברשת וכיתבו קומפוננטת Vue שתציג אותם בעזרת אלמנטי img. הגדירו כללי CSS כדי להוסיף מסגרת (border) לכל תמונה.

לאחר מכן הגדירו את הנתיבים לתמונות בתור משתנים בקובץ ה script, ועדכנו את התבנית כך שתציג את התמונות לפי הנתיבים במשתנים, כלומר בלוק ה script יכלול את הקוד:

const img1 = "https://images.unsplash.com/photo-1595433707802-6b2626ef1c91?q=80&w=3700&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D";

const img2 = "https://images.unsplash.com/photo-1592194996308-7b43878e84a6?q=80&w=3987&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D";

const img3 = "https://images.unsplash.com/photo-1600489601447-81ce0b723d44?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTB8fHxlbnwwfHx8fHw%3D";

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

2. לוח הכפל עד 4

כתבו קומפוננטת Vue שמציגה טבלה עם 16 תאים שמציגים את לוח הכפל עד 4. אין צורך להשתמש בלולאות כי לא למדנו אותן עדיין (למרות שאם תרצו לחקור לבד וכן לכתוב את זה עם לולאה אני לא אעצור אתכם).

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

3. טופס כניסה לאתר

כתבו קומפוננטה שמציגה טופס כניסה לאתר הכולל תיבה עבור שם משתמש, תיבה עבור סיסמה ו Checkbox עבור Remember Me. התוצאה צריכה להיראות כך: