ChatGPT Inside VSCode. Your new coding partner

in this video I'm going to show you how to integrate chat GPT within Visual Studio code and show you how it can help you write HTML CSS and JavaScript I can't believe it will even write the code to connect to an API that will pull live cryptocurrency data from the net so let's get started if you enjoyed this video check out designcores.com where you can learn UI ux CSS and more with my custom interactive platform that makes learning fun and easy alright so to get started go ahead open up visual studio code click over here on the extensions and then type up here chat gpt4 and it's going to give you a bunch of different uh extensions that you can use now there's even way more if you just type in chat GPT itself tons of them and so I typed in chat gpt4 and I saw this one right here and I used it and it seems to work quite well now the output is so fast it kind of seems like it's using 3.5 under the hood however it still worked for my intentions so make sure you install install this and this one requires no session key or open AI key required so that's also another reason I used it that way you don't have to use an API key I'm going to show you the HTML real quick in the CSS and the project so I have some initial HTML I already created and also some SAS that I created as well now the actual result doesn't look that great if I show you and we're going to ask our chat GPT extension to help us out with it first of all it needs a better font this is terrible this is terrible it's not aligned very well let's do some fixing up in that regards real quickly so all we have to do is we're going to click on after you install that you're going to see a new tab here called gpt4 and we're going to go ahead and ask it to help fix and import a font called nuneto so right up here I'm going to type in the needle font is not loading and can you import that font from Google fonts for me all right let's go ahead and ask code base now it's going to say this feature requires you to First index your code base please select your project folder hit OK and we're going to go ahead and just select the folder that it shows indexing complete hit ask code base again and it's going to tell us right over here that it can't actually perform out actions outside of the platform however blah blah blah it's going to give us the relevant HTML and the CSS so all we have to do is just take this now if we click it once it's just going to copy it to the clipboard otherwise we can select a specific line because I already have the head tags and I can revert back to my files here let's double click on these and get them loaded up let's go ahead and then paste this right where it needs to go and then we take a look at our result and we have a much better font already alright so that's great another thing this delete button in the trash icon they don't really look like they're centered aligned very well maybe you're not very good with flexbox and you're not sure how to align things vertically all right so all you have to do is go back we're going to go to our extension over here on the side and I'm going to ask it that this following prompt right here so can you make it so that the span and SVG elements are vertically centered as flexbox children all right let's go ahead and ask the code base here we go align item Center very very easy nothing too impressive at this point in time however we're just going to go over here and we're going to make sure that we place this in the right section I believe we place it right here in this flexbox area align Center and much better Center align okay so now at this point let's go ahead and ask it to actually write some JavaScript all right so the the following prompt that we're going to issue is with the following HTML structure write the JavaScript that will do the following once a user clicks on the element with the class of delete which is in the HTML it will remove the card in which it resides and it will fade out and Shrink to zero for 0.3 seconds and here is the code so in order for us to copy the code we'll just go ahead and specify just the HTML right here I'm gonna come back here to the end as I've just copied it and we will paste it right there ask code based and let's get us back over here and here it goes so now it's starting to print all this out now for some reason sometimes it doesn't get added into actual code blocks like format like in the format style over here but that's fine all we have to do is just copy a couple of these and it looks like it's it doesn't have the editor for me to copy let's just copy this it's just JavaScript that we can add down here and script tags all right and let's save it and let's see if it actually works look at that it works right out of the box very very nice okay so let's take it a step further let's say for instance we want to issue the following prompt all right utilizing the same HTML structure I previously pasted write the JavaScript that will connect to a publicly available crypto API then in the paragraph element of each card display the name and current price of the top three cryptocurrencies and if you don't have access to the top three choose any provide me with the updated HTML and JavaScript okay now sometimes this happens where it doesn't finish the actual prompt and you can see it clearly didn't finish this one please finish the JavaScript from the previous prompt ask that okay there we go so now we're going to copy this and we're just going to paste this over here and what would be really cool if it could actually modify the code yourself so you don't have to manually do it because we're so lazy these days we're going to copy this I'm going to paste it down beneath our previous JavaScript and save it and we're going to see if it works I have no clue if it's gonna work oh look at that so it kind of worked except it broke the layout I wanted them to use this selector for that specifically so let's ask it to fix that please revise the HTML to remove the new span element you added instead display the cryptocurrency name and price in the existing paragraph element of each list item so I can't be more explicit than that we'll see how it does all right so I'm going to go ahead and copy this once again and we'll paste let's save it and it's completely not working this is not displaying the correct crypto [Music] all right let's copy give it another shot looks like this time it might actually work and there we go finally look at that so we have Bitcoin currently at 28 254. all right so let's just hit delete these all still work and that is it people um as you can see you clearly can just have a conversation like you normally would in the chat GPT I normal open AI website but we can do it now in Visual Studio code and you can ask it to help you with your code essentially and this is going to be great for beginners or intermediate or Advanced because everybody always has to search and this is just going to make your life that much easier so hope you enjoyed that if you did make sure to subscribe leave a comment like and I'll see you soon goodbye

Channel: DesignCourse

Views: 248,424

Keywords: chatgpt extension, chatgpt vs code, chatgpt vscode, chatgpt visual studio code, chatgpt 4 vs code, chatgpt 4, gary simon, designcourse

Id: AsOssGeuFUw

Length: 8min 48sec (528 seconds)

Published: Tue Mar 21 2023