תרגיל client נוסף – מחשבון המחירים של א.א נגרות

תרגיל client נוסף – מחשבון המחירים של א.א נגרות

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

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

המחשבון עצמו מורכב משני קבצים –

  • קובץ HTML שמכיל גם JS וCSS בסיסי, ע"מ שהאתר יעבוד
  • קובץ json שמספק את המידע על המוצרים השונים.
    בעולם האמיתי צד שרת יכול לייצר את הקובץ אוטומטית.
    עד שנלמד צד שרת – נשנה את הקובץ ידנית לפי הצורך.

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

 

האתר לא מיושר בהתאם לקוראינו הישראלים, דוברי העברית, מכווני ימין לשמאל (right to left=RTL).

איך לדעת שהאתר מרוטל?

  • טקסטים מיושרים לימין
  • טקסט המסתיים בסימן פיסוק (ובכלל זה נקודותיים) יכיל את סימן הפיסוק משמאלו
  • אלמנטים המופיעים זה לצד זה יופיעו מימין לשמאל
ישרו את האתר כך שיופיע מימין לשמאל, באופן ראוי לקוראינו העבריים !

הלקוח מעוניין שהטופס יראה יותר אסתטי – שיופיע שם השדה ולצידו תיבת הטקסט (במקום מתחת).

דוגמה לביצוע תוכלו למצוא תחת הכותרת Bootstrap Horizontal Form בקישור טפסים בבוטסטראפ

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

חישוב המחיר:

  • מתחילים לחשב את החשבון – בהתחלה החיוב עומד על 0 ש"ח.
  • עבור כל אחד מהמוצרים:
    • מוסיפים לחיוב את המכפלה של מחיר המוצר בכמות המוצרים שהלקוח מעוניין לקנות.
  • בסוף החישוב, נכניס את הסכום שחושב במקום המחיר הסופי הקודם.

נקודה למחשבה – לאיזה אירוע נרצה להאזין?

keypress? keydown? keyup?

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

  • כשמשתמש בוחר USD, נרצה להכפיל את המחיר הסופי בשער החליפין משקל לדולר
  • כשמשתמש בוחר EUR, נרצה להכפיל את המחיר הסופי בשער החליפין משקל ליורו
  • כשמשתמש בוחר ILS, נרצה להכפיל את המחיר הסופי בשער החליפין משקל לשקל (1)

שערי החליפין מופיעים בקובץ הJSON שאנחנו טוענים. הקוד שלכם מתבקש:

  • בכל חישוב של המחיר הסופי:
    • לבדוק איזה שער בחר המשתמש
    • להכפיל את הסכום הסופי בשער החליפין הרלוונטי מקובץ הJSON

הבעיה:

  • כרגע קוד הHTML של הכפתורים מופיע בצורה של HTML סטטי
  • אנחנו מעוניינים שגם בקובץ הJSON מתווספים שערי מטבעות נוספים, יופיעו כפתורים נוספים התאם להמרת שער המטבע
הוסיפו לקובץ הJSON מטבעות נוספים כרצונכם – יין, דולר אוסטרלי, ליש"ט – כרצונכם, ושדרגו את המחשבון לרמה בין לאומית.

בהצלחה !

נ.ב – מוזמנים לשלוח הגשה כבר בתחילת העבודה – גם כשהאתר עוד לא מוכן, שנוכל לעקוב אחרי ההתקדמות

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *