Build A Tesla Car Configurator | Tailwind & Vanilla JavaScript

Published: 29 October 2024
on channel: Traversy Media
31,735
1.2k

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

Code:
https://github.com/bradtraversy/tesla...

Codepen:
https://codepen.io/bradtraversy/pen/j...

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


On this page of the site you can watch the video online Build A Tesla Car Configurator | Tailwind & Vanilla JavaScript with a duration of hours minute second in good quality, which was uploaded by the user Traversy Media 29 October 2024, share the link with friends and acquaintances, this video has already been watched 31,735 times on youtube and it was liked by 1.2 thousand viewers. Enjoy your viewing!