Build A Tesla Car Configurator | Tailwind & Vanilla JavaScript

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

Code:

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

Codepen:

https://codepen.io/bradtraversy/pen/jOgaRQg

My Courses:

https://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