Web FullStack Course first project that combine HTML, CSS and JavaScript.
Full Stack Web Developer פרויקט JavaScript + HTML5 + CSS3 27642-4578-04
כללי בפרויקט זה עליכם לפתח לוח משימות; לוח המשימות מאפשר להוסיף משימות פשוטות ללוח, כאשר כל אחת מהן מכילה תיאור המשימה וזמן יעד לביצוע המשימה. הפתקים המכילים את תוכן המשימות יופיעו על לוח העץ לפי סדר ההכנסה. כמו כן, ניתן יהיה למחוק משימה. המשתמש ימלא את פרטי המשימה בטופס ולאחר לחיצה על לחצן ההוספה, המשימה תתווסף לשאר המשימות על לוח המשימות והטופס יחזור להיות נקי. המשימות נשמרות ב- Local Storage של הדפדפן ולמעשה נשמרות בו באמצעות פורמט JSON . אם סוגרים את הדפדפן וחוזרים אל העמוד, המשימות שלא הסתיימו יטענו אל המסך . הפרויקט נועד לסכם את חלק ה- Client Side ויתרגל את הנושאים הבאים: תכנון דף HTML5 עיצוב ע"י CSS3 שימוש ב- Bootstrap כתיבת לוגיקה ב- JavaScript :
- שימוש ב- Local Storage
- ביצוע DOM Manipulations
- שימוש באירועי HTML .
- שימוש במערכים ובאובייקטים
- שימוש ב- JSON פירוט הפרויקט הפרויקט מכיל דף אחד שבו מתבצעות כל הפעולות: צפייה בכל המשימות הוספת משימה חדשה מחיקת משימה קיימת כל הזכויות שמורות לג'ון ברייס הדרכה בע"מ מקבוצת מטריקס © פירוט האלמנטים על הדף 1 1 . כותרת הדף
- צריכה להיות ממורכזת
- צריכה להיות מוגדרת ע"י גופן ייחודי בעזרת CSS3 Fonts 2 2 . טופס ממורכז על רקע תמונת דף מחברת שורות, המכיל את האלמנטים הבאים:
- תיבת input להכנסת נתוני המשימה )שדה חובה(
- תיבת input להכנסת תאריך יעד עבור המשימה )שדה חובה(
- תיבת input להכנסת שעת יעד עבור המשימה )שדה רשות(
- לחצן לשמירת המשימה
- לחצן לאיפוס הטופס 3 3 . הפתק עליו מופיעה המשימה
- הפתקים יתווספו משמאל לימין
- הפתק יופיע ע"י אפקט Fade-In של CSS3 ( Transitions )
- על טקסט המשימה לתפוס את החלק הפנימי של הפתק. במידה והטקסט חורג מגבולות הפתק, יש להציג Scroller אנכי כך שהטקסט לא יחרוג, אלא המשתמש יוכל לגלול את הטקסט.
- על התאריך והשעה להיות בתחתית הפתק מצד שמאל )כפי שמתואר בתמונה לעיל( 4 4 . לחצן x למחיקת הטופס.
- יש להציג את הלחצן אך ורק כאשר המשתמש מרחף עם העכבר מעל הטופס ) CSS )
- יש להציג את תמונת ה- x ע"י Glyph Icon של Bootstrap ולא כתמונה רגילה
- בלחיצה על לחצן ה- x יש למחוק את הפתק מהמסך ומה- Local Storage נוהל הגשה הגשת הפרויקט הינה שבועיים מסיום שיעור הנחיית הפרויקט. הגשה: יש להעלות את תיקיית הפרויקט לדרייב האישי שלכם ולשתף את התיקייה עם רכזת הקורס ועם המרצה.