1
00:00:00,060 --> 00:00:05,250
Awesome application, which is the color generator app, so if you are a developer and especially if

2
00:00:05,250 --> 00:00:10,680
you are a frontend of the labor, then you must be needing a website like which generates colors for

3
00:00:10,680 --> 00:00:12,900
you or which you can just find a color.

4
00:00:12,900 --> 00:00:17,190
You can just type the name of color and you can get close to it with the Hex code.

5
00:00:17,580 --> 00:00:22,280
So because we generally use hex code during the development and the cfsan.

6
00:00:22,860 --> 00:00:28,680
So that is what that's why today we're going to build this collision application in which you can just

7
00:00:29,070 --> 00:00:34,980
type the name of the color or tap the hex sort of the color, and you can get as many colors as you

8
00:00:34,980 --> 00:00:37,230
want, according to the color you typed.

9
00:00:37,380 --> 00:00:43,320
Like a little too dark color, you will find colors here and you will also find the hex scored and you

10
00:00:43,320 --> 00:00:48,090
can just copy it and you can see whenever you copy it will be copied to your clipboard.

11
00:00:48,090 --> 00:00:49,620
So it is as simple as that.

12
00:00:50,010 --> 00:00:53,310
So let me just show you, let me just give you a quick demo of the application.

13
00:00:53,730 --> 00:00:59,640
So this is the UI of the application here to the search bar where you will search for the color, or

14
00:00:59,640 --> 00:01:02,640
you can even put tax code to his submit button.

15
00:01:02,640 --> 00:01:07,920
Or you can even press enter and then and the page will load, and it will show you the different, different

16
00:01:07,920 --> 00:01:09,390
colors to down.

17
00:01:09,390 --> 00:01:12,210
We have the containers, these these are all the colors.

18
00:01:12,450 --> 00:01:17,730
So any one of them, if you want, like in your websites, you can just click it and it'll be copied

19
00:01:17,730 --> 00:01:18,540
to your clipboard.

20
00:01:18,810 --> 00:01:21,480
It will be shown a message that copied to your clipboard.

21
00:01:21,490 --> 00:01:21,780
OK?

22
00:01:22,840 --> 00:01:29,740
So this is what it is, and when we lowered initially, we I've already given a color value, a default

23
00:01:29,740 --> 00:01:32,800
value, even if you don't provide any value here.

24
00:01:32,800 --> 00:01:39,130
So this these colors will be static and this will be shown to because I thought that like displaying

25
00:01:39,130 --> 00:01:41,170
a blank page on the very first visit.

26
00:01:41,440 --> 00:01:42,370
It doesn't look good.

27
00:01:42,370 --> 00:01:43,810
It'll be looking so empty.

28
00:01:43,810 --> 00:01:46,810
So that's why I've given a default value in the place of a literal twin.

29
00:01:46,810 --> 00:01:50,320
And the value also to that is you can even change it in.

30
00:01:50,320 --> 00:01:54,490
You can give your favorite color on the like first visit and that will be the default value.

31
00:01:55,060 --> 00:01:56,140
So that's it.

32
00:01:56,240 --> 00:01:58,720
So let me just show you by giving our demo.

33
00:01:58,720 --> 00:02:05,760
So if I write you out a blue and dobrindt and press enter so you can see all of the blue colors and

34
00:02:06,080 --> 00:02:11,620
to the blue colors, along with the Hex score, along with the percentage of the colors is shown to

35
00:02:11,620 --> 00:02:11,800
me.

36
00:02:12,040 --> 00:02:19,900
Maybe if I typing so this is the pinkish light pinks and if I press violet.

37
00:02:22,280 --> 00:02:28,430
Violet colors pops up, and now let me try with the Hex scored, so if I die for that, it's continued

38
00:02:28,460 --> 00:02:35,020
to Typekit the hashtag first and then you need to type in it to like IMAX Corp., for example, if I

39
00:02:35,090 --> 00:02:37,940
type this one night with two.

40
00:02:38,900 --> 00:02:43,820
And if I submit you can see I got this and if I try something else.

41
00:02:44,930 --> 00:02:48,230
Maybe, maybe, maybe, maybe, maybe.

42
00:02:49,470 --> 00:02:50,220
This one?

43
00:02:50,970 --> 00:02:52,340
Yeah, that's different.

44
00:02:53,010 --> 00:02:55,600
We can try as many as we want, there's no limit to this.

45
00:02:55,920 --> 00:03:01,740
You can like search for any hex cord here that will be like one too.

46
00:03:02,130 --> 00:03:06,720
So if I have this along with the hashtag so you can see the colors change.

47
00:03:07,120 --> 00:03:08,210
So this is the best part.

48
00:03:08,220 --> 00:03:12,210
You can even increase the number of like related colors right now.

49
00:03:12,210 --> 00:03:18,060
I've just given limited to like I limited the number of colors, which actually you can even increase

50
00:03:18,060 --> 00:03:20,880
the number of colors and the tiles will increase in number.

51
00:03:21,420 --> 00:03:27,960
So this is what it is about the applications now moving on to what we are going to use in building this

52
00:03:27,960 --> 00:03:28,530
application.

53
00:03:28,530 --> 00:03:32,500
So first of all, we are going to use, of course, the edges for this application.

54
00:03:32,520 --> 00:03:34,380
Next, we'll be using a really important.

55
00:03:35,880 --> 00:03:41,220
Really important library, not really important, but we are going to use important library from and

56
00:03:41,220 --> 00:03:43,150
beyond that is the values of our days.

57
00:03:43,610 --> 00:03:46,830
So that will mean providing us all the colors and all.

58
00:03:47,220 --> 00:03:49,590
So that's all for the styling of this.

59
00:03:49,590 --> 00:03:52,230
Everything the containers and all will be using scissors.

60
00:03:52,770 --> 00:03:55,830
And that's it about this application.

61
00:03:55,830 --> 00:04:00,690
So you will be learning how to use the values words and you will be learning how to make containers.

62
00:04:00,690 --> 00:04:07,770
And how do you how to implement this on click whenever I click to copied to the clipboard.

63
00:04:07,770 --> 00:04:12,750
So you will learning how to implement this feature when you click on an object in it and like it is

64
00:04:12,750 --> 00:04:17,470
completely applicable to you when we are learning that we are learning how to like, search and get

65
00:04:18,300 --> 00:04:20,910
queries and so the queries and get the desired.

66
00:04:21,480 --> 00:04:24,240
So that's all we are going to learn in this project.

67
00:04:24,420 --> 00:04:25,800
So soon, the next one.