Build A Tesla Car Configurator | Tailwind & Vanilla JavaScript

hey what's going on guys so I have a pretty cool project for you today and I created this the other night been having a lot of insomnia lately so I decided instead of just tossing and turning all night I just get up and and create something so I created this Tesla car configurator much like the one they have on their website and we're going to be building it with just HTML tailwind and just vanilla JavaScript now if I were to build this in real life as a production project I would most definitely use a framework like react or View because it's pretty interactive and and that's where you know Frameworks really shine however I think doing it in vanilla JavaScript as a tutorial is very beneficial because it's just going to it's just going to teach you more of the fundamentals and more about interacting with the Dom so I think it's uh a pretty cool project to do with just JavaScript now I will be doing a react version I don't know if it'll be a YouTube video or part of a course but I will definitely be doing that because I did I do like this project um but just to give you a quick demo so we have two images on the left and if we scroll it only Scrolls it's the sticks at the top and we can scroll the sidebar and we have some options like the exterior color and on the side on this side we have the exterior image and interior image and if I want to look at the car in pearl white for example I'll click on that and it just changes the color look at the blue the the solid black Ultra red and I think this one is Quick Silver so we can just change between the colors now if we want to change the interior color that's going to reflect in this image so this is the dark version and then if I click the light it'll show you the white version so you can kind of mix and match see what color exterior and interior you want and then in addition to that we have a Performance Wheels option for $2500 and if I click that it'll actually show us the car with the Performance Wheels and you can change the color and it will stay it will show you the Performance Wheels with that color and I can go back to the standard if I want all right so you can customize the wheels the interior the exterior and then at the bottom we have our pricing info so the total price and then the breakdown with the down payment and the monthly payment and if I choose standard Wheels you can see the base price is 52490 you have the down payment monthly payment if I choose the Performance Wheels all three of those are going to go up a little bit and then we have other options like the full self-driving click that that's going to bring it up 8,500 click the performance upgrade that's going to bring it up 5,000 and then we also have these accessories as well so you can see the price is is quite a bit more if I'm choosing all the you know all the features and then at the top we just have this bar that will slide up and down as we scroll to the top of the page I just added that because that's what they have on the Tesla website so yeah that's the project we'll be building it is responsive so the the images will stack on top of the options if uh you know if you're viewing this on a small screen and as far as the code goes I have the GitHub repo there's a lot of images so you'll have to download these right so you have all the buttons you have all the different versions of the car and then I also have a code pen that I'll put in the description if you want to try it out I wouldn't suggest using this code because it's a little different because if I'm on the Red version for instance and I choose the Performance Wheels it's going to go back to the the original stealth gray it doesn't stay red and that's just because of the way I had to deal with the remote images in in codepen but if you want to try it out you can of course visit that link all right so yeah I think it's a really nice project to to just kind of jump in and and get into some JavaScript we are going to build it from scratch meaning we're going to type out most of the Tailwind most of the classes and the HTML but if you want to skip that I'll have timestamps and you can go right to the JavaScript so it's completely up to you on on how you want to you know follow along all right so let's get started [Music] okay so like I said we're going to start from absolute scratch I don't even have a folder created or anything like that and I'm going to leave the the final version open just in case we need to reference it for anything say and and you can create a folder just on your desktop through your operating system I'm just going to use my terminal I'm in my Dev folder and I'm going to make a new directory for my project and I'm going to call it Tesla Das configurator and I'm going to add vanilla JS just because I plan on building multiple versions of this and then I'm going to open up vs code in that folder and of course you can use a different text editor if you want and I just have an empty directory so let's start to create some files and it's going to be pretty simple we're just going to have an index HTML and then let's have our CSS folder and in that we'll have a whoops in that we're going to have a style do CSS we're using Tailwind but there are just a few custom styles that we're going to add as well and then in the root we're going to have a folder for our JavaScript and I'm just going to use a single file called main.js okay and then we just want an images folder and then what you're going to do is get the images from that repo in the description so let me just grab those real quick so these are all the images I'm just going to bring these over we don't need the screenshot all right so we'll just bring those over and those are like all the different versions of the interior and the exterior the buttons things like that the logo all right so now we're ready to start on some HTML so I'm just going to add a boiler plate with EMT so exclamation enter and for the title we're going to say design your Tesla Model Y and then I'm going to link in the stylesheet that I created so/ CSS and then style CSS and since we're using Tailwind I'm going to just get it you know the easy way and use the CDN so if we go to Tailwind uh I think that's the link there but if you go to Tailwind CSS and just go to docs you'll see this play CDN link if you click that you just want to grab this script tag I probably should have that as a snippet okay so we get that and then we're also going to be using the font awesome icon Library so I like to get that from cdnjs dcom and if you just type in font and then right here font awesome copy the link tag and we're going to paste that in right there okay and then for now actually you know what let's Link in our script tag as well down at the bottom here so script source and say JS and Main JS and then I'll just we'll just put hello and then I'm going to open this with uh live server which is a visual studio code Plugin or extension you don't have to use it but that's just what I like to use and there we go and you can see Tailwind is being implemented there's no margin or padding and the font you can tell by the font as well okay so now we're ready to just kind of build this out we're going to start top to bottom we have the top bar and later on we'll have some JavaScript that'll make it go away when we scroll but for now we're just going to have it there along with the header so let's add those two things first so we're going to come down into the body and again if you want to skip this stuff and you just want to go right to to the fun part the JavaScript you can do that but uh I just I I like to do things you know front to back so I'm just going to comment uh comment each part here now the top bar since we're going to have that little bit of effect with JavaScript I'm going to give it an ID of top bar so we can grab on to that later and then as far as classes we're just going to add some Tailwind classes let's do BG D gray 100 for the background and I want it fixed to the top and then the positioning we'll do top zero right Z and left zero and then I'm just going to add a little bit of padding on the Y AIS so py2 and then a paragraph with let's say text Center and let's do py2 there as well and then font I'm going to do semibold and of course if you want to change anything to do with the design you can so this text is just going to say 0% APR available for what is it for qualified buyers okay so if we take a look there we go we got our gray bar and then right under that we're going to have the header and that's going to use the HTML 5 header tag and then as far as classes go I'm going to make it a flex boox because there's two items which are going to be the logo and this this icon here which on the Tesla website this will open up a draw menu with the length languages but I'm not going to add that but it is a button it just doesn't do anything so we want to align those in a flex row so I'm just going to add the class of flex we want the space to be in between so justify between and to align vertically let's say items Das Center and then we're also going to do padding on the X AIS 10 and padding on the Y AIS 6 and let's do margin top 16 and I'm adding the margin top because the gray bar is positioned fixed which means the header will be put behind it so we want to push it down with the margin and then let's add an image we're going to add our logo so images SL logos SVG and then alt Tesla and then I'm just going to add a width of let's say 120 and a height of 24 so we should now see our logo then we want that icon which I'm actually going to wrap in a button even though it's not going to do anything and then we'll have our it tag with the class of fa- fa- solid as well as fa- Globe that'll give us that Globe icon and then we're just going to have a span next to it with a font bold class and say us okay so that'll add that for us now we want to add the layout and if we look at this you can see we have a a wide column on the left and a more narrow one on the right with all the the options and we want this to stick at the top see how it stays but we can still scroll the side that's that's how we want to do that and we can do that with the sticky class so what I'm going to do is add a main tag under the header so let's say Main and then for the classes Let's uh we're going to make that flex and I want it to be a flex column to begin with because on small screens we want it to be a column meaning everything is stacked right but when we hit the medium break point which is right here we want it to be a a flex row so what we can do with Tailwind is say on medium screens and up then we want to say we want a flex row instead of a flex column that'll make it responsive and then we're also going to do justify between and let's do padding on the xaxis 4 whoops what am I doing padding x-4 and then on medium screens and up I want PX X to be 10 and then padding y 6 okay so that's our main tag now inside that we're going to have the image section and then we're going to have the sidebar so it start with the image section which is going to have a section tag and it's going to have a class of width full meaning it takes up the entire container but again on medium screens and up then I want the width to be let's say 34 so 3 34s of the screen okay and uh for now I'm just going to put some text in here and say image section just to make sure that we that everything's lined up and then in the sidebar that's going to be in a side tag and for that we're going to do same thing with full but on medium screens and when I say MD that means the medium break point and everything wider so it's not like you have to do medium and large and extra large and so on so that's going to be uh WID Dash and then 1/3 and here let's just say sidebar all right so if I save that we should be able to see if the alignment is correct which it looks right once we hit below the medium then they stack which is what we want all right and there's a couple other classes I want to put on the as side so we might as well add those I'm going to do padding left zero uh and then on medium screens I want to do padding left eight and let's do a little bit of margin on the top mt6 and then on medium screens and up we want no margin on the top so mt0 and then a zindex of two okay now let's go into the image section get rid of this text and let's add our exterior and interior image right so these two right here and those like I said I want them to be sticky so we're going to have a div with the class of sticky and then top-24 so basically it's going to stop right here I'm not exactly sure what this measurement is but um you can see it does scroll down a little bit the images but then it's sticks and that's because of that top 24 and then inside that we're going to have I'll just put a comment here let's say exterior uh exterior image and that's going to be in a div with a height an h96 class let's do BG gray-20 let's make it a flex say items Dash Center justify Center and I want to do an overflow of hidden so that it doesn't overflow into the sidebar and then a margin bottom four okay and then in that div is going to be the image and that's going to have a couple classes we're going to do Max width full and then height Auto and I'm going to add transform because I want to scale it up a little bit with scale 125 cuz it's a little small and then for the The Source it's going to be images and we're going to just add the first color which is model- y- stealth gray so all the cars with the colors are going to be called model y-h and then whatever that color is and then for the alt we're just going to put model y all right and then we also want an ID on this image because we're going to be bringing it into the JavaScript so we're going to call this exterior image for the ID D so if we take a look you should see that and then if I don't have the scaling right if I get rid of the transform and the scale you'll see it's a little too small that's why I added that that scale now for the interior very similar so we can actually I spelled that wrong we can actually just grab that whole div with the image and paste that in and then change this and the ID to interior and then we're going to change uh let's see the image is going to be imagesmodel y SL interior dark and then for the alt we're going to call that model y interior so save that and now we have the interior image Okay cool so now let's jump over to the sidebar and there's a couple headings so we'll have an H1 let's do text 5xl make it really large and then text Center and then let's do font bold and we're going to do margin bottom five and the text is going to be model Y and then under that we'll have an H2 let's do make it a little smaller so text XEL text Center text Center and then let's do font light for that and that's just going to say uh customize your car okay so there we go there's our headings and then the first set of options we want to add is the exterior color which are going to be these icons they it's going to be a button with a an image inside of it so let's go right H2 and we'll put a comment here let's exterior or we'll say exterior buttons and I'm going to give it a class of m-8 margin on on the Y AIS and I'm also going to give it an ID of exterior Dash buttons now now I'm putting the ID on the wrapper of all the buttons instead of on the buttons themselves because I don't want to add an event listener on every single button I'm going to add an event listener onto the div and then we're going to look at what we're actually clicking on and say if it's a a button then you know do whatever so we're using event delegation here rather than putting an event listener on every single button and then let's see we're going to add our heading so H3 let's say font Das semibold and we'll do a margin bottom two and we're going to say exterior color Okay underneath that we're going to have a div that wraps the buttons it's going to make be a flex box add some spacing between each item on the X AIS and then let's add the button and these buttons are going to have a transition Dash transition Dash transform class and duration D300 the reason for that is when I hover over them we want to have that smooth scale okay so we're going to add that and then on Hover let's see put that in there and then on Hover we want to scale let's do scale 11 uh 110 okay and then the button itself uh I'm sorry the image itself is going to have a class of width uh 22 and and it's going to be dot slash this first one is going to be button what is it button Dash stealth gray is the first one and then the alt this is really important because we're going to be using that the alts in the JavaScript you want to put the name of the color here so it's stealth gray all right um and then yeah that should give us the first one okay and it'll it'll shrink down as we add the others so let's just copy let's take this button there's six of them total so that's 1 2 3 4 5 six and then the second one is going to be pearl white so let's change the color here to pearl white and then the button itself is going to be button Dash pearl white okay so see the second one's white and then we got the next color which is uh deep blue metallic so it's going to be button Dash deep blue metallic and for the color for the alt we're just going to say deep blue okay then we got solid black I believe is the next one so let's change this to solid black and change this to solid solid black and then we got the ultra red so we're going to change that to ultra red Ultra red okay then finally we have the Quick Silver all right and there we go so there's are all of our different buttons and let's see why are they not hovering oh I put a space here should not be a space all right okay so now we have that smooth hover now the interior buttons are very similar so let's go under the under this disc the exterior and let's say interior buttons and this same thing we're going to have a class of my8 but then we're going to have an ID of interior interior Dash buttons okay and we can probably just copy the um the H3 the div and I guess the first two buttons and then just add a div on the end yeah so we want to make sure we add our div on the end and let's change this to interior color and let's change the actual button so that's going to be button um what did I call those but okay button light and button dark so this one is going to be for the dark so button dark and then this is important we want the alt to be dark right and then this one is going to be button Das light and we want the alt to be light and let's change the the the size they're a little too big so instead of 22 let's select both of these and make it W12 there we go now I want to have a class where we have this border for the selected one so we're going to have some just very simple custom CSS for that but let's add on the first button on the in the exterior so the stealth gray let's add a class right here of BTN Das selected and then I'm also going to add that onto the first interior one right here so BTN selected now let's go into the style CSS and let's just add The Styling for that so BTN selected and we're going to do border is going to be 2 pixels solid and the color will be Triple C and then border radius it's going to be a circle so we want to do border radius 50% okay then we want to have some padding we'll do eight pixels for that and then add a transition to make it smooth on the transform and we'll do 0.3 seconds and there we go so now the first one has that border now I actually don't want to have the hover effect on the selected one so what we can do is say BTN selected and then the hover State and then I want to set the uh let's say transform and we'll set the scale to one which is just the original size now the Tailwind Tailwind is going to overwrite that so we're just going to add the important flag and now these ones you can see hover but this one does not all right so let's go back to our HTML and we're going to add the wheel section so let's go down below the last div and say wheel or we'll say wheel buttons so this is going to be uh a div with margin bottom 8 and we're going to have an ID of wheel Dash buttons and then an H3 with let's do font d semibold and we'll do margin bottom two and let's wheels and underneath that we'll have our button so we're going to do with- full for the button we're going to do padding y4 some margin bottom BG dg-700 which is the dark gray that's basically means it's selected um and then let's do text- white and want to make it rounded so rounded large and then I'm going to add the transition colors class so that when we hover over it the color is like is smooth and we can add the duration -300 class okay now on Hover I just want to add after the BG gray 700 we'll say hover and it's going to be BG gray 600 and let's also add hover text- white all right and then inside that we're going to say a standard Wheels okay let's just take a look there we go standard wheels and then we'll just go ahead and copy this button down and let's change this text to Performance Wheels and we're just going to in parentheses say that this is an extra 2500 and then we're just going to change the class here let's see I just want to have BG gray 200 for the initial background color oh and we don't want we want hover text white but not text white without the hover here we go all right now we're going to do this the full self-driving this thing right here it's card with a check boox inside so let's go down below the last div we'll say full uh self-driving option okay so we're gonna have a div with the class of border and let's do padding four margin bottom 8 and then we'll make it rounded so rounded LG and let's do Shadow okay so in that another H3 with font semibold and margin bottom two and we're going to say full self-driving and then we'll have a label with flex and let's say items Das Center and space X3 for some spacing we don't need a four attribute so we can get rid of that and then in the label we're going to have the input okay so input and we're going to give it a type of checkbox we don't need a name we do want an ID though to grab this in the JavaScript so it's going to be full- self- driving Das checkbox and then for classes see uh class we're going to set form Dash checkbox H5 W5 so that's height and the width and then text is going to be blue 600 and then right next to that or under that we're going to have a span and we'll add the text of add full self driving uh for 8500 o that should be a comma all right so there's our check box now we want the performance upgrade button which is pretty simple so we're going to go right here performance upgrade and let's give it a div with margin bottom eight add our semi bold header semi bold margin bottom two and we'll say uh what do we want here performance package and then the button so for the button we're going to do with full we're going to do background let's do gray-20 and then rounded LG yeah rounded LG and then on the hover so on Hover I want to do background Gray 400 no space there so performance upgrade and then we just want to add the price so it's going to be an additional 5,000 oh forgot the padding Let's see we want to add py py D4 and rounded all right cool so the last thing to add is the accessories the check accessory check boxes which I think I'm just going to paste in I'm sure you guys are tired of typing the stuff out and you can of course just copy it from the final code whether it's the code pen or the GitHub but I'm just going to paste that in right here so basically we just have a div our heading and then we have uh div with space y4 to put some space in between them vertically and then just a label that wraps the span here another span with an input and a checkbox and then whatever the pricing is and the last thing we want is the the pricing info so let's go down here let's say total price section and we're going to have a div with the class of PT so padding top 4 and our H3 font semibold and we're going to do text- large for this and say total price and then it's going to be a paragraph and I'm going to give it an ID of total price because we're going to be changing this from the JavaScript and let's give it a class of we'll say two uh text 2XL actually I want to make it bold too so font Das bold and for I'll just hard code in 52 let's say 52490 for the price all right so that'll give us the total and then underneath that we need the payment breakdown and that should be the last thing we have to add here in the HTML so payment breakdown and we're going to give this a class of Border top or border DT padding top four and margin top six and then our H3 let's do text- l G and we'll say estimated oops so estimated payment breakdown okay so underneath that we're going to have a margin top for div and a paragraph and in that paragraph we're going to say down payment and then we'll have a span and this we want to have an ID here of down- payment and a class of font Das bold and I'm just going to hardcode this to 5000 all right now underneath that so underneath this div or no we want to stay within the div the next paragraph is going to be the loan term and for this we don't need to have an ID because it's just going to be hardcoded so let's just have a span with font Das bold and I'm going to hard code let's say 60 months that's what the formula that we that we're going to use is going to use is 60 months with an interest rate of 3% so let's add a paragraph and let's say interest uh interest rate with a span and the interest rate will say 3% APR all right and then we'll just have another paragraph with say estimated monthly payment and we'll have a span under that and that's going to have an ID because we do want to change this so this will be monthly Dash payment say font bold um what else yeah let's do text- toxel as well and I'm just going to put in here 818 do 65 and those numbers should be correct based Bas on the formula that we're going to be using all right so now we can get into the fun part so we'll jump into the JavaScript and the very first thing I'm going to do is the the bar up here so we just want to make it so that when we're at the top it comes down if we scroll down it goes goes up all right so not a big deal a couple lines of code it just I just added it because I thought it was a nice touch and the Tesla site does it now the way I'm going to format this file since it's just one large monolithic Javascript file we're going to have the selectors at the top and any state variables in the middle will be all the functions and at the bottom will be the event listeners that call those functions so let's bring in the top bar since we're dealing with that first and I'm going to use document. Query selector if you want to use get element by ID that's fine as well because most of these are IDs so I'm going to say ID of top dasar so we're going to bring that in and then we're going to have a function to Let's handle top bar on scroll on scroll and then I'm going to use Arrow functions but if you want to use a regular function that's fine as well and I'm just going to call this handle scroll okay and then what we're going to do is create a variable called at top and I want this to be true if we're scrolled all the way to the top and the way we can do that is we have access to the window object which has has a scroll y value and that's the position where you're scrolled on the Y AIS which is up and down so if I'm scrolled down 100 pixels then that value is going to be 100 if I'm at the top it's going to be zero so I'm going to say where window scroll Y is equal to zero or if it's equal to zero then this will be true if it's not if we're not at the top then this will be false then we just want to apply a couple classes based on that so let's say top bar and then class list. toggle which will add and remove a specific class in this case I want it to be visible dasar which is not a Tailwind class we're going to create this ourselves and toggle actually takes in a second argument of a Boolean as you can see here to force and we want to add the at top so basically what's going to happen is this will be applied if we're at the Top If this is true at the same time I want to add another class called hidden dashar if this is not true so we'll just say exclamation at top so if we're at the top it'll have this if we're not then it'll have this and then we just need to add our event listener and like I said all the event listeners will go down here and this is going to be on the window itself we're going to add an event listener we're going to listen for a scroll and then we're going to have a function and we're going to call request animation frame and then pass in handle scroll we don't I mean you could just pass in handle scroll but by using request animation frame it's going to increase performance because it's used to schedule the function to run at in an optimal time for smooth visual updates without this then handle scroll would just be called hundreds of times or could be called hundreds of times per second and could potentially lead to Performance issues so you want to use request animation frame in this context now if we open up the the um Dev tools here and we take a look at the top bar okay so you can see the div here and if I scroll down you can see it now has a class of hidden bar if I go back up it has a class of visible bar so what we want to do is just add a couple simple Styles so first off on the top bar itself which I'm going to select it by its ID I want to add the transition just so it has that smooth effect on the transform we'll do a half a second so 05 seconds and then ease we'll do ease in out for the effect and then for the visible bar I want to add a transform and I want to add Translate Y which means to move it along the Y AIS and when it's visible I want it to be in its in it's where it's supposed to be which is zero okay that's the position it's in now so let's say Translate Y and pass in zero but then for the hidden I'm just going to copy this down so for the hidden bar we want to instead of zero on the Translate Y we want to say negative 100% oops so 100% which is going to bring it up 100% so it'll basically be up here right and then when it's visible it'll be down here and since we added a transition it'll smoothly go in and out instead of just appearing so let's save that I'm to scroll down and you see that it went up I go back up and it comes back down so very simple you know couple lines of JavaScript and CSS now let's get to the options here and we want to deal with the exterior color now before we deal with the image at all let's just make it so we can click on one of these and it gets selected and this border gets put on whichever one we click so we're going to bring in a couple things up top not import so we're going to set the exterior uh exterior buttons or no let's say ex color section I guess we'll call it yeah so exterior color section and then we want to select from the Dom so query selector and we want to select the ID of exterior Dash buttons and then we're going to do the same thing with the interior so let's select exterior here and here change it to Interior all right and then I want the the two images right so this is the exterior image and the interior image and it has that as an ID so let's say cons exteror image set that to document. query selector and it has an ID of exterior Das image and then we also want the in area so again we're going to select this oops we're going to select this and this interior okay so we're bringing in those things now let's create a function here to handle the color selection and this is going to handle both the interior and exterior color selections so create a function handle color I'm going to call it handle color button click and we're going to pass in the event parameter here use an arrow function and then I'm going to just create a button variable or initialize a button variable and I just want to show you and I'm kind of explaining this to people that are new to JavaScript as well you probably know a lot of this a lot of you guys but on this event there's a Target property that's that's what whatever we click on right so if I come over here I open up the console and I click on this and it's not working because I need we need to add our event listener so let's take the exterior color section and we want to add an event listener and add a click and when that happens we want to call the handle color button click we also want it to run when we when we click on the interior button so we might as well add that as well just change this to interior here all right so now if I click on one of these you can see it shows the image right and it depends on exactly where I click if I click Like right here it shows the button so we have to address that if I click in the middle it'll show a div right if I don't click on the button or the image because I have the event listener on the entire div that wraps this so we need to Target whatever we're clicking on and we can do that by looking at the tag name property if I do that if I click on this you can see IMG right if I click like over here in the corner somewhere there it is button if I click in the middle div so obviously we don't care about clicking on the div but if we click on either the button or the image that's when we want this whatever we're doing to happen so let's add an if statement here and we'll say if the tag name is equal to IMG then I want that button variable that we created to equal the closest button which I can do event. Target which is the element we click on and let's get the closest button okay so closest is a method that we can use to get what the closest element whatever we put in here and it'll set that to that button variable then I'm going to say else if so else if the event.target so what we click on if the tag name is equal to button then we just want to set button equal to the event Target because we want to keep it you know if we click on a button that that's what we want if we click on an image then we're setting it to the button now let's go under that if statement and let's say if button because we only want this obviously to run if we click on if that button exists which would be if we click an image or a button and then there's two things we want to do we want to remove the button selected class right we want to remove it off that and then we want to add it to whichever one we click so let's Loop through the buttons so I'll create a variable called buttons and set that to event and we'll use current Target Dot and then I'm going to run query selector all because we're going to select all of the buttons okay so all the buttons that are um all the buttons that are are in that current Target and then we want to Loop over them so buttons for each and I want to remove that BTN selected class that's the class that has that that border so in the for each we'll pass in our function we'll say for each button or BTN and then we want to take that button and we want to remove a class so classless do remove and the class we want to remove is BTN Das selected so if we save that as it is now and I click on this you'll see it removes the BTN selected now obviously I want to add that to the button I click which is in the button variable so it's say button classlist do add and we want to add BTN selected okay so we're just removing that from one and adding it to another if I click on the blue now it's over here okay so whatever one I click on that's what is selected and that works here as well on the interior cuz where when we run that interior um that event listener that click it runs that same function so the next thing we want to do is handle the image we want the image to change to whatever color we pick so what we're going to do is create an image map which is just an object that's going to map the color to the actual image location to the jpeg so I'm going to put that where do I want to put that let's add it right above the handle color button click so we'll say image image mapping and we're going to have a map for or an object for exterior images and interior images even though there's only two interior images so let's say const ex uh con images set that to an object and this is where we want to put the color name so the first one is stealth gray and this is important that this matches whatever you have is the alt okay remember in our images which are where are they right here you can see the alt has the color names so it's important that that matches the color names here and then we want to map that to the actual image which is going to be/ Images slash and then model- Y and then stealth Das gray. JPEG and then I'll just copy that down so we have what six of them I believe and then we'll change this color here this one's going to be pearl white and we want to change the name of the image to model y-h Pearl Das white then we have deep blue so deep blue and the name of the image is deep- blue Das metallic but I have deep blue as the alt so we just want to make sure that matches and then we have the next one is is solid black so image name is going to be solid black and then we got Ultra red so Ultra Dash red and then we have Quick Silver all right so that's our exterior images then we're going to have our interior images and we're going to have dark and map that to SL imagesmodel dy- interior DD dark. JPEG and then we'll call copy that down and then this one is going to be light and the key for that is going to be light which also matches the alt of the interior images now we can come down into the handle button click and let's go uh let's see we're going to go still within uh within the if button and we're going to go down here and let's say change exterior change exterior image and we're going to check to we need to see if we clicked on an exterior or the interior uh section so let's say if event. Target or let's do current current Target is equal to exterior color selection then we know we clicked in that area so we're going to create a variable here called color and we're going to get the color from the alt so and the alt is on the button right it's on the alt of this of these buttons so we'll say button and then query selector and we want to select the image and do alt that'll give us the value of the alt attribute and then all we need to do is take the exterior image and apply the source or assign the source to the exterior images and then add the color as the key right exterior images is an object and then we're adding whatever this color is let's say it's quick silver then it's going to match this and it's going to give us this image so let's save that let's come up here I'm going to click the red Ultra red there we go solid black blue pearl white quick silver now the quick silver isn't working so I must have screwed something up here or somewhere around here images model y quick sliver yeah okay so now that works and then we going to do the same thing for the interior so we can actually just copy this and let's say change interior image and we're going to check to see if the event current Target is interior color selection or section get the color and then change the interior image interior image and we're going to use the interior images map or object and pass the color in as the key so now come down here click that and now you can see the interior color changes from dark to light so pretty simple now we're going to move on to the wheel section and we're going to we're going to do it two ways right we're going to do it an easy way first which is going to make it so if no matter what color we're on if we clicked Performance Wheels it's going to show us the stealth gray version with the Performance Wheels but then we're going to refactor it a little bit so that it'll show the Performance Wheels no matter what color we're on and it will stay there if we click on Blue it'll stay on the Performance Wheels if we want to see the standard Wheels we can go back and it'll work just like the Tesla website does but we're going to do it kind of a a simple way first so let's bring in the wheels button section so basically basically this right here this ID of wheel buttons and we have two buttons inside so again we'll use event delegation so let's say const and we're going to call this wheel let's call it wheel button section or wheel buttons section yeah and we want to use document do query selector and let's select the ID of wheel Dash buttons okay so we got that now let's come down here let's create a new function so this is going to handle the wheel selection and let's say const handle wheel button click we're going to pass in our vent okay and then we want to just check to see if the tag name is a button that we click we don't need to check for an image there's no image it's just a straight button so if event do uh target. tag name is equal to button then we're going to get the buttons so we'll say cons buttons set that to let's say document. query selector all and we want to get get from within the wheel dasb buttons div we want all buttons and then we're going to Loop over say buttons do. for each pass in let's say for each button then I want to remove the the BG gray 700 because that's that's the dark right so before we we do anything with the price I just want to be able to click on this and then it will stay dark and the dark class will come off of that one and we can toggle back and forth all right so let's say BTN do classlist do remove and we want to remove BG D gray- 700 we also want to remove the text white otherwise we won't be able to see the text okay so let's uh let's add an event listener for this so we're going to take the wheel button section and we're going to add an event listener we're going to list for a click and then we're going to call the handle wheel button click so now if I click this you can see it removed the the um bg700 class from that and then after that I want to add the bg700 to the button that's clicked so let's say add selected Styles uh Styles 2 clicked button so we'll take the event. target which is the element we click on and we're going to add a class to it called BG D gray 700 and we also want to add text- white all right so now I should be able to switch from standard Wheels to Performance Wheels if I click on standard Wheels again it'll go back so now I can go back and forth now what we want to do is change the image based on what it what is selected for wheels so let's do this let's create a variable called selected wheel and let's set that to the event. Target so whatever we click on and then we want to get the text content so whatever is the text in the button and we want to see if it includes using the includes method the text of performance okay okay cuz if if the text has performance then we know that we're selecting the Performance Wheels and then we're going to update the image so let's say exterior uh exterior image and then we want to change the source attribute set that and I'm going to take the selected wheel and use that in a Turner so if there if the selected wheel includes performance then we're going to use the performance image of the the dark stealth so slash imagesmodel y Das stealth Dash gray not dark stealth stealth gray and uh we want to add the dash performance at the end and then jpeg else then we just want uh we want it without without the performance so it would just be this and then jpeg so let's go ahead and click on the standard wheel or the Performance Wheels and now you can see the wheels change I go back to standard okay so we can now switch back and forth but the downside to this code is that if we're on red or any color and I click Performance Wheels it brings us back to the stealth gray okay so let's uh let's make it so we can keep the color and still see the the wheels now to do that I'm going to add uh a couple things I want to add a couple variables up at the top so right above or right below the selectors let's do const and we'll say selected color so I'm going to add that as basically like a a global State value and that's going to be stealth gray because that's the first choice first image um and then we're going to have some s actually we're going to make that a let because that can change and then we'll have an an object called selected options and set that to an object and we'll have a key of performance let's say Performance Wheels and that'll be set to false by default and then we're going to have the performance package remember that that $5,000 addition and then also the full self driving option and these are all going to be false by def fault okay we'll have some other stuff when it when we have when we get into the pricing but we're not dealing with pricing yet so I want to have a function now to update um to update the exterior image because we're going to be doing this in two places we're going to be doing it when we change the color and we're doing it when we change the wheels okay right now they're they're separated so I want to have a function that we can run in in both of those in both handle button click color button click and handle wheel button click so why don't we put it in between the two here so we'll say update image um and we'll say based on color and wheels okay so we'll say const update exterior image and I'm going to have a variable here we'll call this performance performance suffix right because when we're looking at the Performance Wheels the image has U this Dash performance suffix on it so we want we want to know if we need to add that or not so I'm going to set this to the selected options which is an object and then the key uh of Performance Wheels all right so if that is true then let's add the dash performance else then it'll just be an empty string we won't add anything okay next we want to add the color key so we'll say color key and we're going to selected color in exterior images which is that object that image map and then we'll have a turnar here and we'll we'll use the selected color right and then else it's going to be stealth gray which is the first one okay so unless we select a different color it's going to be stealth gray and then finally we need to update the image so take the exterior image we're going to assign the source to exterior images and then pass in the color key which is either going to be the selected color or stealth gray and then we need to add add the dash performance if Performance Wheels is selected so what we can do is we can call replace and we'll say let's replace um the jpeg so we're replacing the extension with and then in back ticks we're going to add here suffix which remember it's either going to be Dash performance or it's going to be just an empty string and then we just want to add jpeg onto that make sure put the jpeg after the closing parentheses so again this performance suffix is either going to be Dash performance or in this case it would be Dash performance jpeg or it's just empty and it would just it would again just be jpeg we would just be replacing jpeg with jpeg because this would be an empty string so hopefully that makes sense now what we can do is go into the handle button or uh let's do the color button first so handle color button and and let's see how do we want to do this yeah so we're just going to replace um right here instead of creating a local variable I'm going to take the selected color the global variable and whoops didn't mean to do that where we handle button color button yeah so we're going to set the selected button to the whatever the alt is when we click the you know click these circles and then instead of doing this we can simply call the update exterior image so let's try that out click red black so it's still working right and and now it's using that update exterior image now we want the wheels button to use that function as well cuz right now we're still going back to stealth gray so down in the handle wheel button click let's see all we should have to do instead of using a local variable here of selected wheel we're going to change it to use our selected options which is our Global State and we want their Performance Wheels we're setting it to true or false based on if the text has performance in it and then we're simply going to get rid of this and call update image so now if I click red goes to red and if I click Performance Wheels it shows me the Performance Wheels on the red I click blue it shows me blue and it stays on the Performance Wheels if I want to see it in standard I click that shows me standard okay so it's much more flexible now and of course the interior still works that's separate so next thing we're going to do is the performance button right so this right here and before we get to any of the pricing stuff I just want to be able to click performance upgrade and have it actually get get selected just like these are being selected and staying with the dark gray so let's add um well first of all let's bring in the performance button so up at the top cons performance what do we want to call this performance BTN and set that to document dot query selector and I believe it's performance so we need the ID so number sign performance- BTN now we need a function for that so let's see the function I'm going call let's say uh performance package selection and I'm going to call this performance what do I want to call it or we'll call it handle performance button click all right so basically we want to take our performance button and we're going to add a class or toggle the class sorry I'm going to toggle the class of BG dg-700 and also the text white so text- white and then let's go ahead and add the event listener down here so we're going to uh let's say performance BTN we want to add event listener we want to listen for click and then we want to call the handle performance button click so now if I click on performance upgrade uh it's not doing anything let's see 107 performance button performance button is that not see oh I didn't put an ID on it okay so we need to just make sure we add an ID onto this so per oops performance- BTN all right so now let's try it again I'm going to click on the button and now you can see it's selected if I click it again then it's taken off all right good now we want to start to get into the the pricing right we want to if I click on Performance Wheels that should change the price and then later we'll we'll do the estimated breakdown things like the down payment and the monthly payment but let's first just work on the total price so let's see we're going to let's bring in the total price element which is this the the number here 52 whatever um I'm going to go back to the top of our JavaScript and let's say con total price we're going to call it total price element and then select it it has an ID of total Dash price and then we're going to have a couple variables at the top here so I'm going to use let and say well we can use cons for this because the base price isn't going to change so base price equals and we're going to do 52 what is it four 49 490 right yeah so that's the base price then we're going to use let and have a current price and that's basically what is going to the track when we add add and remove other things to it it'll be this current price and we're going to set it by default to the base price and then as far as the options the pricing options let's come down here and let's create uh an object called pricing and we have our Performance Wheels which is what 2500 then we have the performance package which is 5,000 then we have the full self-driving which is 8500 and then we have our accessories and the accessories I'm going to put in its own object or in a child object so we got center console trays and that's going to be 35 then we got the sun shade which is 105 and then we got the all weather interior liners that's going to be 225 so all weather interior liners all right so that that's the pricing of our options our features so let's create a new function I'm going to put this one at the the top here so this is going to total price in the UI so const update total price okay and then we're going to start off by resetting the uh resetting the current price yeah reset the current price to the base price we want to do that whenever this runs so current price is going to be set to the base price all right and then we want to update the total price in the UI so let's take the total price element and we're going to add text content and set that equal to let's use some back tis here I want to have a literal money sign and then a money sign so I can add a variable in here and that's going to be the current price but I'm going to add to local string which is going to format it'll add the comma for the thousands okay and then uh let's see what should we do let's let's call this we're going to call this in a bunch of different places wherever we're updating the price let's do the wheels first so we'll just kind of stop top to bottom so that would be in the handle wheels or handle wheel button click so we're just going to Simply call down at the bottom here update total price now at the moment it's not going to add right if I if I click it nothing happens because we need to still add to the update total price because right now all it's happening it's being set to the base price and then we're just adding the current price which is still going to be the base price so we're going to go right here and we want to check for the selected options so check for selected options Wheels and if that's selected then we're going to set the current price or we're going to append to it so make sure you do plus equals and then we want to set the pricing so we're using the pricing object and we want the Performance Wheels price so we're just incrementing the price by that so now if I it's 52490 if I go ahead and click Performance Wheels now it's 54 990 if I click standard Wheels again goes back down to 52490 so we're now able to select that and it it shows us in the price now let's do the performance package so this I'm going to skip the self-driving we'll do that after but let's do the performance upgrade so uh basically we just need to do the same thing here except we're going to change this and this to the performance package okay so we're saying if the select if the performance package is selected then we're going to we're going to increment the price by whatever that costs which is in the pricing object but we need to call this within the function so let's go down to handle performance click so right here and we haven't even added the selected uh selected options yet so let's say update options so uh not selected color selected options and we want the performance package and what we can do is let's set a variable here called is selected because if it has the BG gray 700 then we know it's selected and we'll just set that to is Select Ed which is going to be true or false based on if it has this class which isn't the best way to do it but it's it's vanilla JavaScript so it's it's really difficult to to kind of to structure your project like you would with react where you have your individual component State and all that um that's why Frameworks are so great and then we just need to call the update total price so now if I click click on performance you can see the total price goes to 5749 click it again goes back down to 52 and I can select that and the wheels and it goes up to $ 59990 now let's do the full self-driving checkbox so we need to bring that in because we haven't brought it in yet so let's say const full uh self-driving checkbox and let's see that has believe it has an ID of f Das self- driving Das checkbox okay so we bring that in then let's create a function so you can see the process here we bring we add the selector um we add the the the option and then we add the function and then we add the event listener that's kind of the process of adding adding a feature and of course you could break this up into multiple files if you wanted to use es modules and you can really clean it up but this is just this is an exercise it's not really this isn't meant to be some kind of you know production project so let's go down to the bottom above the event listeners so this is the full self-driving selection so const full self driving we'll call it change because the event when you're dealing with checkboxes usually you're dealing with the change event not a click and I'm going to create a variable called is selected and set that to the full self driv oops full self-driving checkbox okay that element and if it I want to see if it's checked oops so do checked that'll give me a true or false all right then I'm going to add the selected options and we want to select the full self-driving and set that to is selected then we just want to update the total price but of course we have to account for that in the update total price function so let's go back up there and we can just copy this and we should probably put comments here like uh performance whe um I guess option okay so we'll just change this and this to full self de D driving and I believe that should work so let's save it and let's see if we click that no that didn't work and that's because I didn't add the event listener so at the bottom here let's say full self-driving checkbox and we want to add an event listener but again we want to listen for a change not a click and then we call the full self-driving change so now if I click that still not working let's see the hell's going on here okay that doesn't tell me anything so full self-driving Tech checkbox add an event listener full self-driving change okay so we know it's running and then we're checking to we're seeing if it's checked if it is we're setting the options oh forgot the eye or missed the ey all right so now click it and see the price goes to 60,000 all right cool I mean we could even shorten this up we could do that so now the next thing is what do we got the accessories so let's bring in the accessory check boxes which I believe did I even give them no I think they're they have a class that we can use let's see yeah so each one has a class of accessory form checkbox so that's that's what we want to use to bring it in so let's say const accessory checkboxes and we'll set it to document and we want to use Query selector all because we're selecting more than one and then we want to use the class so dot accessory Das form checkbox now I'm going to create an event listener on each of the check boxes so down at the bottom here above the all the other event listeners I mean we could put it down here because technically we're just going to Loop over the checkboxes and then add add an event listener to each one but we'll just say accessory checkbox listeners so let's take the accessory check boxes let's use a for each and we're going to say for each checkbox then I'm going to take that checkbox and I'm going to add an event listener I want to listen for a change and then I'm going to call a function that calls the update total price okay then we just need to handle it in update total price so let's go up there okay so in update total price we'll go under the full self-driving stuff and say accessory check boxes and again I'm going to Loop through them with four each so we'll say for each checkbox then I want to extract the accessory label so the text that's in the label like Center console trays and so on because we need to match them up with up here these so if we look at the structure of the HTML we have a label and then a span and then the text inside the span so let's create a variable here so const and we'll call this accessory label and we're going to set that to the current checkbox and let's get the the closest so I'm going to go on to the next line here dot closest label and from there I'm going to run whoops I'm going to run query selector and I want to get the span that's inside the label and then I want the text that's in the span so we can use text content and then we'll add trim onto it as well all right so basically it's going to get the label for all the different um accessories now we want to get the accessory price so right here let's say const accessory price and we can get that from the pricing object with the key accessories and then remember that's a that's a child object so we want to go inside the accessories object and then use the accessory label that we just created now we just need to add the current price if that accessory is selected actually let's put that let's put that in a comment so add or add to current price if accessory is selected so we can do that by checking if the checkbox is checked so if do checked then we're going to take the current price and we're going to increment it by the accessory price okay so let's try it out 52490 I'll check this one now 52525 that one that one awesome so now our our current price our total price is done we can select all these options and it brings us up to that at 68855 now the last thing to do is the the payment breakdown because we also want this to update the down payment as well as the monthly payment and there's a specific formula to do that for a a loan term of 60 months and an interest rate of 3% and that's something I had to chat GPT because I'm not a I'm not a great math person um so formulas stuff like that I have to I have to look that up it's not something I can figure out in my head so let's uh first off bring those two elements in the down payment and the monthly payment elements so let say const down element and set that query selector and that has I believe an ID of down Dash payment and then we also have our monthly payment okay so we got those elements now let's add another function under update total price and this is going to update the payment breakdown based on the current price so const update payment breakdown and first thing I'm going to do is calculate the down payment which this is very easy I mean we have a the the loan is going to be 10% of the the down payment and to get the down payment we just need to get 10% which is we can just multiply it by 0.1 so let's say cons down payment set that equal to the current price and we want just want to multiply that by 0.1 that'll give us 10% and then we can just simply take the down payment not document down payment element and set the text content to let's set some back ticks because I want to have a literal money sign and then another money sign for our expression and we're going to add the down payment and two local string to format it now where we call this update payment breakdown is inside of the update total price right so so update total prices right here I'm going to go to the very end of it um yeah we'll just yeah we'll go to the end of it here and let's say update update payment breakdown and then I want to call update total price initially we we're calling it in all those different functions but I also just want to call it initially so above the event listeners let's say initial update price and we'll say update total price okay so now instead of just having the hard-coded 5,000 it gives us the actual 5249 okay and uh I'm sorry 52490 but the down payment is also showing because it's it's 10% of the total price so next thing is the monthly payment and that's where the the formula comes in that I had to look up so let's go back to update payment breakdown and we're going to create a couple more variables here so let's say calculate I know there's a lot of comments but I I just want you guys to know what's going on so let's say calculate loan details and we're going to assume so assuming a 60 Monon loan and let's say 3% interest rate so we're going to have a variable for the loan months and the loan months is going to be 60 and then we want a variable for the interest rate and the interest rate is going to 0.03 okay so we got a 3% APR then the loan amount so con loan amount is going to be it's going to be the current price minus the down payment right because you put a down payment of 10% that's not going to be included in your loan you've already paid it so now we have the loan amount and then this is where we can calculate the monthly payment and I'm going to paste in the formula here that we need to use so this is the formula okay that we need to use to to figure this out so we just have to kind of write that in code so first off let's get the monthly interest rate so monthly interest rate which is easy because all we have to do is divide the interest rate by 12 because there's 12 months in a year so monthly interest rate let's take the interest rate and let's divide that by 12 now we're going to get the monthly payment and we're going to use that formula so just if you're following along just make make sure you have parentheses and stuff in the right place so we're going to open up some parentheses and in that we're going to have the loan uh loan amount and that loan amount we're going to multiply that and then open up another set of parentheses and in there is where we want to add our monthly interest rate and we want to multiply that by math math.pow and we want to pass into that one plus the monthly interest rate and then a second argument of the loan term months wait did I not do that oh I said loan months so this right here we should say loan term months and loan term months okay so again we're following this pattern right here where we have the one plus right here so we're we're at this point now we want to go after the third closing parenthesis and we're going to divide right because now we're on this side now we're going to divide that by and open up some other parentheses math.pow and then one plus monthly interest rate and loan term months and then we want a minus one because again going by the formula right here and that's it so that's that this is this formula in our code now we want to update the text content of the monthly payment so let's take the monthly element and let's add let's say the text content we want to set that equal to some back ticks literal money sign and then another money sign with the monthly payment and we're going to add two fixed with two so we want two decimal places and then two local string to format it and hopefully that works so you can see we're at 8486 right if I click on the wheels then the monthly payment goes up to 88929 if I add the self-driving down payment went up estimated monthly payment went up if we choose everything it should be like yeah one 1,000 113 and 51 all right so yeah everything is is working and I again again I know that this is not the most structured code obviously but it gives you an idea of how to do something like this without a framework and of course you could take it and you can start using ES modules and separate into different files I mean that would make it cleaner remember this is something something that I just woke up and didn't wake up I couldn't fall asleep I had insomnia all night so I wanted to create something and I thought it was pretty cool you know it works might not be the the best code it's not it's not something you're going to ship but um you know it hopefully it helped you kind of just dig into vanilla JavaScript more because it seems like there's not a ton of content out there that isn't react that isn't you know vue.js and nextjs so just gives you some more experience with just JavaScript so hopefully you guys enjoyed it again I will have a react version at some point somewhere whether it's YouTube whether it's a course or whatever and that's it thanks for watching