WEBVTT

1
00:00:00.000 --> 00:00:01.610
[MUSIC]

2
00:00:01.610 --> 00:00:05.910
Hey, what's up?

3
00:00:05.910 --> 00:00:06.780
My name is Dustin.

4
00:00:06.780 --> 00:00:08.870
And I'm a developer here at Treehouse.

5
00:00:08.870 --> 00:00:12.450
How often have you seen a Copy to
Clipboard button while you're on the web?

6
00:00:12.450 --> 00:00:13.770
They're all over the place.

7
00:00:13.770 --> 00:00:17.290
And they're actually really easy to create
with just a little bit of JavaScript.

8
00:00:17.290 --> 00:00:19.500
So let me show you how we can build one.

9
00:00:19.500 --> 00:00:24.390
Let's take a look at the HTML. We basically
just have a container for our input and

10
00:00:24.390 --> 00:00:28.100
inside of it we just have an input
the type of text and a button.

11
00:00:29.150 --> 00:00:33.080
The magic is actually going to be in
the JavaScript so let's create a couple of

12
00:00:33.080 --> 00:00:37.750
variables. I'll right const input
= document.querySelector

13
00:00:37.750 --> 00:00:40.220
And we'll select the input and
I'll do the same for

14
00:00:40.220 --> 00:00:44.790
the button I'll write const btn =
document.querySelector('button').

15
00:00:45.840 --> 00:00:48.640
And what we'll do is we'll run
an event listener on the button by writing

16
00:00:48.640 --> 00:00:51.900
button.addEventListener(),
and we want to listen for clicks.

17
00:00:52.980 --> 00:00:59.760
Inside the callback function, we'll just
write navigator.clipboard.writeText().

18
00:00:59.760 --> 00:01:02.910
And write text is a method
that takes in one argument,

19
00:01:02.910 --> 00:01:04.890
which is the text that we want to copy.

20
00:01:04.890 --> 00:01:08.100
So in this case,
we want to copy the input.value.

21
00:01:08.100 --> 00:01:10.500
I'll hit Save and
head on over to my browser.

22
00:01:10.500 --> 00:01:14.790
I'll type in hello world into the input
and I'll hit our copy button and

23
00:01:14.790 --> 00:01:16.870
now our text is copied.

24
00:01:16.870 --> 00:01:20.720
I'll open up our console and
I'll press Command V on my keyboard and

25
00:01:20.720 --> 00:01:23.950
now you see Hello World
pasted into the console.

26
00:01:23.950 --> 00:01:27.740
Now I'll erase Hello World and
I'll type in Team Treehouse.

27
00:01:27.740 --> 00:01:30.970
I'll hit the copy button again and
paste our clipboard into the console and

28
00:01:30.970 --> 00:01:32.620
now you see Team Treehouse.

29
00:01:32.620 --> 00:01:33.460
Sweet, it works!

30
00:01:34.670 --> 00:01:35.500
And that's it.

31
00:01:35.500 --> 00:01:38.650
It really doesn't take a whole lot of code
to write a copy to clipboard feature using

32
00:01:38.650 --> 00:01:39.810
JavaScript.

33
00:01:39.810 --> 00:01:42.650
This was just one demonstration
of one solution but

34
00:01:42.650 --> 00:01:45.280
if you'd like to learn more
about Clipboard or Navigator,

35
00:01:45.280 --> 00:01:48.750
check out the description or teacher's
notes down below for more resources.

36
00:01:48.750 --> 00:01:51.030
I hope this quick guide helped and
I'll see you in the next one.

37
00:01:51.030 --> 00:01:52.850
Until then, have fun and happy coding!