תרגיל שיעורי בית – תגבור JS ראשון (שיעור שני)

תרגיל שיעורי בית – תגבור JS ראשון (שיעור שני)

בוקר אור 🙂
הכנתי עבורכם תרגיל שיעורי בית.
עלילה – אני שואף להכין לעצמי אתר צבעוני ויפה, מבוסס JavaScript.
הצלחתי לייצר גרסת HTML מאוד מוצלחת שלו (קישור), אבל הייתי רוצה שהHTML המכוער יוחלף בקוד JS אסתטי.
אשמח מאוד אם תשתמשו ביכולתכם החדשות עם כלי המפתחים של כרום, ותעזרו לי לדבג מה לא הלך שם כמצופה !
הגבלות:
  • אין לשנות את הקוד מחוץ לתגית script – זו לא המטרה.
המלצות:
  • מוזמנים לבחון בגרסת הHTML את האלמנטים בעמוד הדמו, ע"מ לקבל תמונת מצב יותר טובה של איך הייתי מצפה שהאתר יראה ויתנהג בסוף הפיתוח.
  • מוזמנים לנסות למקם breakpoints, ולעקוב אחרי הקוד והמשתנים בו – מקווה שזה יספק תמונת מצב יותר טובה של התהליך שהקוד עובר והבעיות מולן הוא מתמודד.
אפיון האתר:
  • כותרת – כרצונכם. כל אות אמורה להופיע בצבע שונה.
  • מתחת לכיתוב "השפות שאני מכיר" – מדדי ידע. רוחב המלבן הכחול מייצג את אחוזי השליטה שלי בחומר. בלחיצה על מלבן, נקבל מידע מפורט יותר (ראו דמו).
  • בחליצה על כפתור "הסתר הכל", אני רוצה שאחד אחרי השני יעלמו כל היכולות שלי מהדף, מהסוף להתחלה. אנימציה מההתחלה לסוף פחות אסתטית לטעמי.
הגשה:
  • עדיפות א': העלאת הקובץ המתוקן לשרת, ושליחת קישור
  • מי שלא מצליח – להגיש בדוא"ל.

בהצלחה !

3 thoughts on “תרגיל שיעורי בית – תגבור JS ראשון (שיעור שני)

    1. פתרון מצויין !
      אשמח להתייחס לכמה נקודות מעניינות:
      בשורה 59:
      randomColor = Math.floor(Math.random() * 146);
      הצבעים נבחרים באקראי. ז"א, בפתרון שלך בכל כניסה לאתר נוכל להיתקל בצבעים אחרים – אפקט מתוחכם 🙂

      בשורה 77:
      .attr("content", skill.description)
      שים לב שהוספת content לdiv זה לא תקני – לdiv אין attribute כזה.
      אם נרצה להוסיף attributes משלנו, יש לנו data-content בשביל זה. זו צורת עבודה תקינה יותר (למרות שגם הפתרון שלך יעבוד בכל הדפדפנים הרלוונטיים)

      בנוגע להעלמה של האובייקטים – עשית מעקף מגניב עם הi שסופר אחורה.
      מצויין! 🙂

להגיב על noam לבטל

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