בלוג TopSpeed

כלים, פרויקטים, ותובנות מהשטח

← חזרה לכל הפוסטים
🇺🇸 English

כלי השוואת רכבים — כי אף אחד באמת לא יודע כמה רכב עולה

כשהתחלתי לחפש רכב חדש, הבנתי שאף אחד לא מראה לך את התמונה המלאה. אתרים מציגים מחיר מחירון, אולי תשלום חודשי, וזהו. אבל מה עם ביטוח? רישוי? דלק? ירידת ערך? מה עם הפער בין חשמלי לבנזין אחרי 5 שנים?

אז בניתי כלי שעושה את החשבון האמיתי

  • השוואה של עד 4 רכבים זה לצד זה — חשמלי, בנזין, היברידי, מה שתרצו
  • מחשבון מימון מלא — ריבית, מקדמה, בלון, תקופה. לא סתם ״תשלום חודשי״ אלא עלות כוללת אמיתית כולל ריביות
  • מד סיכון בלון — אינדיקטור צבעוני: אם שווי הרכב בסוף התקופה < מה שאתה חייב, יש בעיה
  • עליית עלויות תחזוקה — עלייה מצטברת של 15% אחרי שנה 5. כי רכב בן 8 לא עולה אותו דבר בתחזוקה כמו חדש
  • גרף השוואת עלויות לאורך זמן — מצויר על Canvas, אפס תלויות חיצוניות. רואים בדיוק מתי חשמלי ״מתאזן״ מול בנזין
  • מכירה אחרי X שנים — סליידר שמראה כמה נשאר בכיס אחרי מכירה, כולל ירידת ערך

טכנולוגיה — אפס תלויות

car-compare/
├── index.html          # Pure HTML
├── css/style.css       # Black Liquid Glass design
├── js/
│   ├── app.js          # Main: DOM, events, settings
│   ├── calc.js         # Engine: all calculations
│   ├── data.js         # Car database (manual)
│   ├── modals.js       # Modals, tooltips
│   ├── ui-cards.js     # Card rendering
│   ├── ui-compare.js   # Comparison + Canvas chart
│   └── state.js        # URL state management
└── test.sh             # Automated tests (!)

אפס פריימוורקים. אפס npm. אפס שלב בנייה. Vanilla JS בלבד. הגרף מצויר ישירות על Canvas API — ידני, מודע ל-DPI, בלי Chart.js. כל החישובים ב-calc.js — פונקציה אחת calcCar() שמחזירה 30+ שדות.

למה Vanilla ולא React?

כי זה אתר אישי על VPS ב-4 דולר שרץ nginx. אני לא צריך SSR, hydration, ו-800MB של node_modules. כל הבאנדל (JS+CSS+HTML) שוקל פחות מ-100KB. זמן טעינה: אפס.

נסו בעצמכם | ריפו ב-GitHub

JavaScript Canvas פיננסים רכבים עברית אפס תלויות