Uploaded October 2024 | Updated September 2026, 1 week ago

---

Build a Tesla Model Y Configurator interface using nothing but HTML, Tailwind CSS and JavaScript.

Code:
github.com/bradtraversy/tesla-configurator-vanilla-js

Codepen:
codepen.io/bradtraversy/pen/jOgaRQg

My Courses:
traversymedia.com

Timestamps:

0:00 - Intro
4:03 - Create Files
5:40 - Base HTML
7:08 - Top Bar & Header
10:21 - Main Layout
13:10 - Image Section
15:46 - Start Sidebar
16:28 - Exterior Buttons
20:23 - Interior Buttons
23:30 - Wheel Options
25:38 - Full Self Driving
27:36 - Performance Upgrade
29:00 - Accessories & Pricing
33:00 - JavaScript Start - Top Bar Animation
38:07 - Color Buttons Select Border
44:38 - Image Map Object
47:36 - Change Image On Color Select
50:17 - Wheel Selection
56:04 - Refactor To Keep Selected Color
1:02:34 - Performance Button Select
1:05:14 - updateTotalPrice Function
1:09:22 - Add Wheel Price
1:10:43 - Add Performance Upgrade Price
1:12:37 - Full Self-Driving Price
1:16:43 - Accessories Price
1:21:55 - Payment Breakdown Calculation