Build A Tesla Car Configurator | Tailwind & Vanilla JavaScript
Oct 29, 2024•Channel
AI Analysis
Data from YouTube Data API v3•Updated Just now
Video Overview
Video Details
PublishedOct 29, 2024
Duration1:30:35
Video IDui0PmJtKGhQ
Languageen
CategoryScience & Technology
PrivacyPublic
Made for KidsNo
Video TypeRegular Video
Performance Metrics
Views20.6K
Likes939
Comments67
Engagement Rate4.88%
Likes per 100 views4.56
Comments per 1K views3.25
Video Tags
Description
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