תרגיל client נוסף – מחשבון המחירים של א.א נגרות
noam Comments
בשיעור האחרון, התחלנו לעבוד על אתר האינטרנט לעסק המצליח (והפיקטיבי) "א.א נגרות ובניו בעמ".
הלקוח הגיע עם דרישה חדשה – מחשבון מחירים – ואפילו עם טיוטה שתעזור לכם להתחיל.
המחשבון עצמו מורכב משני קבצים –
- קובץ HTML שמכיל גם JS וCSS בסיסי, ע"מ שהאתר יעבוד
- קובץ json שמספק את המידע על המוצרים השונים.
בעולם האמיתי צד שרת יכול לייצר את הקובץ אוטומטית.
עד שנלמד צד שרת – נשנה את הקובץ ידנית לפי הצורך.
המשימות מסודרות מהקלות לקשות. ביצוע חלקי יהווה הישג נהדר – אין הכרח לפתור את כולן.
האתר לא מיושר בהתאם לקוראינו הישראלים, דוברי העברית, מכווני ימין לשמאל (right to left=RTL).
איך לדעת שהאתר מרוטל?
- טקסטים מיושרים לימין
- טקסט המסתיים בסימן פיסוק (ובכלל זה נקודותיים) יכיל את סימן הפיסוק משמאלו
- אלמנטים המופיעים זה לצד זה יופיעו מימין לשמאל
הלקוח מעוניין שהטופס יראה יותר אסתטי – שיופיע שם השדה ולצידו תיבת הטקסט (במקום מתחת).
דוגמה לביצוע תוכלו למצוא תחת הכותרת Bootstrap Horizontal Form בקישור טפסים בבוטסטראפ
מטרת העמוד – כשהלקוחות מזינים מספרי כמויות, אנחנו רוצים לחשב את המחיר הסופי בהתאם ולהציג אותו.
חישוב המחיר:
- מתחילים לחשב את החשבון – בהתחלה החיוב עומד על 0 ש"ח.
- עבור כל אחד מהמוצרים:
- מוסיפים לחיוב את המכפלה של מחיר המוצר בכמות המוצרים שהלקוח מעוניין לקנות.
- בסוף החישוב, נכניס את הסכום שחושב במקום המחיר הסופי הקודם.
נקודה למחשבה – לאיזה אירוע נרצה להאזין?
keypress? keydown? keyup?
בזכות עבודתכם הקשה, הנגריה עלתה לאינטרנט ומעוניינת להיפתח לקהלים בחו"ל.
- כשמשתמש בוחר USD, נרצה להכפיל את המחיר הסופי בשער החליפין משקל לדולר
- כשמשתמש בוחר EUR, נרצה להכפיל את המחיר הסופי בשער החליפין משקל ליורו
- כשמשתמש בוחר ILS, נרצה להכפיל את המחיר הסופי בשער החליפין משקל לשקל (1)
שערי החליפין מופיעים בקובץ הJSON שאנחנו טוענים. הקוד שלכם מתבקש:
- בכל חישוב של המחיר הסופי:
- לבדוק איזה שער בחר המשתמש
- להכפיל את הסכום הסופי בשער החליפין הרלוונטי מקובץ הJSON
הבעיה:
- כרגע קוד הHTML של הכפתורים מופיע בצורה של HTML סטטי
- אנחנו מעוניינים שגם בקובץ הJSON מתווספים שערי מטבעות נוספים, יופיעו כפתורים נוספים התאם להמרת שער המטבע
בהצלחה !
נ.ב – מוזמנים לשלוח הגשה כבר בתחילת העבודה – גם כשהאתר עוד לא מוכן, שנוכל לעקוב אחרי ההתקדמות