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
source