AI is revolutionizing the way that we
write code, and there's nothing more evident about that fact than
GitHub Copilot, it's groundbreaking. GitHub Copilot has been
trained on millions and millions of lines of code from all sorts
of programming languages and repositories. It is your virtual coding teammate,
helping you write code faster by offering insightful suggestions that
save you tons of valuable time. I am Jeremy McPeak with Envato Tuts+. In this video, we will use GitHub Copilot
to write an application from scratch, and you'll see firsthand how it can
identify patterns in your code and significantly cut your development time. But first, if you're ready to take
your applications to the next level, then look no further than Codecanyon. The ultimate marketplace for developers
and programmers, featuring solutions for web development, mobile apps,
e-commerce, and so much more. Explore, build, and transform your project with the unmatched
resources available on Codecanyon today. GitHub Copilots is a fantastic tool,
and I think that it is one that most developers would reach for, because
it is a pair programming experience. Basically, that means that
as we are typing our code, Copilot is going to offer suggestions. Copilot is not free,
the cheapest plan is ten bucks a month. However, that's cheap if you find
that it provides value to you. There is a free trial, but
you have to create a GitHub account and you have to provide a payment method. The trial, I think, is 30 days, and
after the 30 days, if you don't cancel, it's going to charge you. But I highly recommend that
you give Copilot a try, especially if you write code for a living. Now, Copilot in and of itself,
isn't going to magically do anything, you have to install an extension for
your code editor, which there are extensions for
a variety of code editors. I don't know them off the top of
my head because I typically use Visual Studio Code. So you install the extension, you have
to sign in using your GitHub account. But once you do that,
you are ready to start using Copilot. Now, in Visual Studio Code,
there is an icon in the bottom right-hand corner of the screen,
this will tell you if you're assigned in, it will also tell you if
the extension is activated or not. So we are going to look at a couple of
different ways of how we can use Copilot, and the first thing to do is
just to start writing code. Because as you add some code and
then you go to a new line, it's going to start prompting you
with what it thinks you want to do. Here, I've added a doctype. On the next line,
it's prompting us to add an HTML element, which of course, we want that. So I'll hit Tab, I'll hit Enter, and then it's going to prompt
us to add a head element. Now, we don't have to stick with
whatever it is prompting us. There are other options if you
hold down the Alt or Cmd key, and then use the brackets or
the square bracket keys, then it will cycle through
different options. So here, there's only two options,
one includes a link element for a style sheet, the other does not. I don't plan on creating a CSS file, so I'm just going to use the version
that doesn't have that. But notice that the title here is
calculator, and they probably got that from the name of the file, which is,
of course, calculator.html. Now, another way that you can
use Copilot is with comments. I want to add Bootstrap to this file,
and we can see here that as I started to write a comment,
Copilot is prompting me to add Bootstrap. So if I hit Tab there and then Enter,
it's going to link in bootstrap. But this is assuming that I
have bootstrap, which I don't, I want to use a CDN. So what I can do instead is say,
Add Bootstrap, and then on the next line, it should prompt for a link element
that pulls in Bootstrap using a CDN. This is version three, but
that's going to be fine. So if there's something specific
that we want Copilot to do, we can specify that inside of a comment. And that comment is really dependent upon
what language we are currently using. Since I'm using HTML,
we're using HTML comments. If we were using JavaScript,
then we could use JavaScript comments. So if we wanted to write a calculator
object, then that's what we could put in our comments and
it would start generating some stuff, but we'll get to the actual
JavaScript here in few moments. All right, so we have our head elements,
we need our body, and let's just start defining our UI. So we're going to use a container,
but this container is going to be the container for
the entire calculator application. So I'm going to give it an ID
of calculator container. And then, the first row is going to
be the display of our calculator, which is going to be an input element,
it will be a text box, and let's give it a class of form control,
let's give it an ID of display. And then, the next row is going to
start our buttons for the numbers and the operator. So a typical calculator would have seven
eight and nine for the first row, and we can see that this wants to generate
a row that has some operators such as, clear backspace, divide, and multiply. I don't want that, so
let's see if there's any other options. I'll hold down ALT or command, and then press one of the square bracket keys,
and that changed our options. So this is more along the lines
of what I want, however, it's not exactly what I want. I don't want to use an onclick event
handler, I want to use event delegation. So I'm going to delete most of this, and
I'm going to change this one entry for the number 7, and
what I'm going to use is a data attribute. In this particular case,
we'll just say data-value, we'll give it the value of 7 because
this is the button for 7, and that's it as far as this
button is concerned. So let's start with the next
button in this grid, and we can see that Copilot is prompting
us almost exactly the same thing, except that the value of 8 is
being used for this button, that is exactly what I wanted. So we will close out that div, it will
then prompt us for the nine button, and then we should have an operator, and in
this case, it wants us to have division, so that's going to be fine. There is something different
that I want to do here. Instead of data-value,
I want to use a data operator. That way, we can know if we
are dealing with a value, or we are dealing with an operator. I also want to change the class here. Instead of the button Defaults,
I want to use the button, Secondary so that our buttons will
have different colors. The number buttons will be default,
the operators will be secondary, and then the clearer will be a different
color, as well as the equal sign. So this is our first row, this is what I want to use as
far as the pattern is concerned. So let's go on to the second row, and Copilot is going to prompt us
with an interesting set of HTML. Notice that it is following the same
pattern, so the numbers have data-value, the operators have data-operator. Notice that the class for
the button is secondary for the operator. So Copilot knows what is inside of our
file, it knows what patterns to identify, and it will start using those
patterns in its suggestions. So for the next row, once again, the numeric values have
a data-value attribute. The operator has an operator-attribute,
and the operator uses the secondary class. So we should have another row that would
have the equal sign, the zero, and other things. And sure enough,
Copilot is suggesting that as well. There are some changes, though. The equal sign is an operator, so
I want to give that the data-operator and the value would just be an equal sign,
everything else is going to be okay. But notice what it did for the equal sign, it automatically added
the primary class there. So that's really awesome, I think. So let's take a look at this in
the browser, let's refresh, and that needs to be squished together,
but that's a good start. We do need a clear button, and
let's do this at the very top, let's do this directly
underneath the display. So we will have our display,
then we will have a row for the clear button, and
let's see what Copilot gives us. Well, there it is. Now, it thinks that we might want to have
parentheses and the percent, but I don't. Let's just stick with a clear button,
let's do this, though. Let's use the data-operator attribute,
and we'll just say see there. But notice the class,
it used the danger class. So it knows that this is the clear button,
and that it needs to be a different
color than everything else. And it needs to stand out so
that we know, hey this, you might want to not click this,
so that's perfect. The only other thing is that
we need some style to make this look a little bit
better on the screen, so we could add a CSS file because it
wants us to add an external CSS. Instead, I'm just gonna
have a style element, but notice it is prompting us selectors
that are relevant to our document. So calculator container
with the margin top of 50, display with the margin bottom of 10. Let's give the container
a width of 300 pixels. That way, it will be a little
bit easier to see on screen, that's great right there. Something else though,
the display needs to be right justified. So let's set the text align to right, and
let's see if it's gonna prompt us for anything else. So after the display rule,
let's just hit Enter. Let's see what it says, button width 100%,
margin bottom 5 pixels. I think that that would look great,
it does. Let's see what else it's going to offer,
which doesn't look like anything. I hit Enter twice, which is habit for
me, but it doesn't look like it's gonna offer anything else for
our style, which is fine. I think that looks great as is, so
we can now focus on our JavaScript. Now, I already have in mind how I want
this to work, it's not gonna be the safest thing, but what we will do as we click on
these buttons, it's going to add those numbers to the display, and it will
do the same thing for the operators. So if we say 1 + 2, then in the display,
we would see 1 + 2. And then, whenever we click on the equal
sign, it's going to eval that expression. And it's not gonna be the safest thing,
but it's going to work in
this particular case. So I want to use object-oriented
programming here, so I want a calculator object. So let's just start with calculator,
let's see what it's going to offer us. It thinks that we're going to want
methods for add, subtract, multiply, and divide, which I don't want. First of all, though, we need to get
the elements that we want to work with, so we need our container which it
wants us to use query selector. I want to use getElementById, and
that's almost it, we just need to say calculator-container, and it's popping
up right there, that's awesome. Display is now coming up,
and that's almost correct, we just don't have
the calculator- in front of it. But then, we have, let's see what else, it
wants buttons, I don't think we need that. Instead, all we really need
are three methods one called add number which will accept the number. And then,
let's see what this is going to prompt us. Append that to the display,
that's exactly what I wanted. And then, we will have an add operator, which is essentially going
to do the same thing. But we want to take into account that
an operator might be equal sign or clear, and
we will get to that here in a moment. But then, we will have calculate, and this method should just eval
the value of the display. So let's see what this is
going to generate for us. And it doesn't look like it's
going to generate anything, which that's a little disappointing but
let's just start typing, and sure enough, that's exactly what I want to do. Eval, the display value, and
then set the result to the display value, that's perfect. So as far as our add operator, let's check to see if
the operator is equal to C. Well, it's prompting us there, and let's see what this is going to
prompt us to do, just clear. Let's do this, we will set
the display value to an empty string. I don't have to type just a few
keystrokes, and then it's going to prompt me with exactly what I want, which of
course, this is a simple thing to do. But the fact that I'm able to just
type a few keystrokes, hit Tab, and then that's almost the functionality
that I want, that's perfect. Okay, so this is our calculator object. All we need to do now is set up the event
delegation for the click event. Look at what it's doing, calculator,
container, add event listener, this is so awesome, so
let's see what this is gonna prompt us. This will be interesting, so we want to
get the target if the class list contains number, if it contains operator. Let's look and
see what other options are there, I don't think any of these,
well, that's close. In fact, let's run with that
because we don't use a class list. Instead, we have the data attributes, so
really, no, we don't even need to do that. We could do something like this,
if the target dataset operator, then we know that we have an operator. So we're going to call add operator
passing in that operator, and then we will just simply return. If it's a number, then our dataset will
have the value property in which case, we will call add number passing in
that value, and that is so awesome. Didn't have to write but just a few
keystrokes, and then it's filling out everything else, and this is all that
we really need to do for this method. We could make it a little bit cleaner like
this else if that way we won't have to have the return statements there, but that
is the functionality that I was after. We can go back to the browser,
let's refresh, and as I press 1 plus 2, none of that is working, so
we have an error somewhere. You know what? I didn't add that JavaScript file to the
HTML, that's kind of important, isn't it? So at the bottom here,
add in that calculator js to our HTML. Let's go back to the browser,
let's refresh, and now, all of this should work but
there's a reference target is not defined what is that, yes,
I got rid of the target variables. So we will add that back in, Copilot
just automatically prompted it for us. So 1 plus 2 equals 3 plus 9 should be 12,
let's clear it and we're good to go. Now, we could have created this
application using ChatGPT, but it would have taken us
quite a few prompts and even then, we really wouldn't
end up with what we wanted. Because you never really get exactly what
you want, you can get something close, but eventually, you have to take it and then
make whatever changes that you need to. But using Github Copilot, well, we just
had to write the code that we wanted to write, and it just started offering
suggestions that fit right in. And I don't know about you, but this is definitely a tool
that I will use on a daily basis. Thank you so much for watching, please
like this video if you found it helpful. And be sure to subscribe to
the Envato Tuts+ channel so that you won't miss out on any of
our new and fantastic content. I'm Jeremy, and I will see you next time. [MUSIC]
