Vanilla JavaScript - Build A Tesla Car Configurator | Tailwind & Vanilla JavaScript

5.0 (3)

31 learners

What you'll learn

This course includes

52 hours of video
Certificate of completion
Access on mobile and TV

Summary

Keywords

javascript tailwind tailwindcss tailwind css js reactjs javascript project javascript tutorial html css

Full Transcript

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