1
00:00:09,160 --> 00:00:11,840
Hey, everyone, welcome to a news section.

2
00:00:11,860 --> 00:00:18,570
We're now going to start a very exciting project, which is this online quotation of t shirts.

3
00:00:18,970 --> 00:00:24,450
So let me show you how this works when we change anything here in these filters.

4
00:00:24,700 --> 00:00:26,920
So let me change the color to white.

5
00:00:27,640 --> 00:00:35,350
As you can see, we have the product photo updated and now the pricing and basic information about the

6
00:00:35,350 --> 00:00:35,890
order.

7
00:00:36,310 --> 00:00:41,210
So the photo is actually a combination of color and style.

8
00:00:41,440 --> 00:00:43,420
So here I have white printed.

9
00:00:43,630 --> 00:00:45,790
Let me try white plain.

10
00:00:46,780 --> 00:00:48,850
So as you can see, it's a different photo.

11
00:00:49,060 --> 00:00:50,280
Let me try colored.

12
00:00:50,920 --> 00:00:52,700
So now it's colored plain.

13
00:00:52,720 --> 00:00:54,760
Let me try color printed.

14
00:00:55,690 --> 00:01:02,590
So these two filters, they make the combination for the photo that should appear here and the other

15
00:01:02,590 --> 00:01:05,710
filters, they will just affect the price.

16
00:01:05,720 --> 00:01:13,240
So if I change the quality to high, as you can see, this is a little more expensive if I change the

17
00:01:13,240 --> 00:01:14,200
quantity here.

18
00:01:14,410 --> 00:01:16,300
So let's change it to one hundred.

19
00:01:18,310 --> 00:01:23,110
Now, as you can see, we are updating all the information and the price down here.

20
00:01:23,970 --> 00:01:26,050
This should be pretty simple to do.

21
00:01:26,100 --> 00:01:33,330
We just need to inspect these elements and understand how can we get these informations and how can

22
00:01:33,330 --> 00:01:42,930
we use this to update the price actually to form the price and then to update these elements before

23
00:01:42,930 --> 00:01:43,530
we go ahead.

24
00:01:43,560 --> 00:01:48,520
Let's go to Visual Studio to see what do we have to get started with.

25
00:01:48,810 --> 00:01:50,760
So here we have the project.

26
00:01:50,760 --> 00:01:57,150
We have the HTML file where you can see all the elements we have on that page.

27
00:01:57,270 --> 00:02:02,580
If you want to check the IDs and classes of elements, you can just come here and here.

28
00:02:02,580 --> 00:02:09,920
We have the scripts that JS file and inside it we can see that we have this variable called products.

29
00:02:10,260 --> 00:02:14,720
So this is how we are going to calculate the final price of the order.

30
00:02:14,970 --> 00:02:21,270
So here inside this object, we have a property called white and one called colored.

31
00:02:22,020 --> 00:02:26,090
So inside here we have prices for the white t shirt.

32
00:02:26,310 --> 00:02:31,880
So we have a plane and a printed style inside plane and printed.

33
00:02:31,890 --> 00:02:36,660
We have the unit price and the link for the photo.

34
00:02:37,230 --> 00:02:38,650
Same thing for colored.

35
00:02:38,910 --> 00:02:43,320
So this is how we are going to calculate the price and get the right photo.

36
00:02:45,060 --> 00:02:51,210
Down here, we have a variable called search parameters in which we are going to use.

37
00:02:52,180 --> 00:02:59,980
To store everything that's selected in the theaters and in that quantity input field, so every time

38
00:02:59,980 --> 00:03:06,310
something changes on those filters, we're going to update this variable and then run a function to

39
00:03:06,310 --> 00:03:07,900
calculate the price.

40
00:03:08,800 --> 00:03:16,300
So going down here, we have some additional pricing rules, the first one is the prices above are for

41
00:03:16,300 --> 00:03:17,970
basic quality.

42
00:03:18,580 --> 00:03:27,270
Q one 50, the high quality shirt has a 12 percent increase in the unit price.

43
00:03:27,700 --> 00:03:29,770
So going back to the page.

44
00:03:31,220 --> 00:03:39,320
We can see that the quality is not inside that object, so what we need to do is just increasing the

45
00:03:39,320 --> 00:03:43,160
price in 12 percent if high is selected.

46
00:03:44,370 --> 00:03:51,120
The second rule is applied the following this counts for higher quantities, so if the person wants

47
00:03:51,120 --> 00:03:58,590
to order more than a thousand units, we're going to give a 20 percent discount in the total price above

48
00:03:58,590 --> 00:04:05,470
five hundred units, 12 percent and above a hundred units, five percent discount.

49
00:04:05,670 --> 00:04:10,680
So these are the information that we need to start working down here.

50
00:04:10,680 --> 00:04:12,800
You can see the place for the solution.

51
00:04:13,080 --> 00:04:17,070
So as you know, this is the ready event in January.

52
00:04:17,400 --> 00:04:24,570
So everything we write inside here is going to be executed when the page is fully loaded and ready.

53
00:04:24,840 --> 00:04:26,880
So as you can see, this is blank.

54
00:04:26,880 --> 00:04:30,390
So we are going to start from the absolute beginning.

55
00:04:30,570 --> 00:04:37,700
You can download all these files right below the name of this lesson in the right hand panel.

56
00:04:37,710 --> 00:04:39,870
So just download the zip file.

57
00:04:39,870 --> 00:04:46,320
Then, as usual, you can just go to open folder and then you can open the folder.

58
00:04:47,220 --> 00:04:54,620
I just saved the last t shirts, so if you open it, you have exactly the same thing I have here.

59
00:04:55,410 --> 00:05:01,080
So let me just open the starting project, which is this one.

60
00:05:01,230 --> 00:05:03,750
So as you can see, nothing is working here.

61
00:05:04,140 --> 00:05:07,580
If I click on the filters, nothing happens.

62
00:05:08,400 --> 00:05:10,100
We don't have the updated price.

63
00:05:10,110 --> 00:05:12,720
So this is exactly what we need to do.

64
00:05:12,930 --> 00:05:19,470
We need to put this page to work following the rules we have in that JS file.

65
00:05:19,680 --> 00:05:24,310
If you want to try to do this by yourself, just go ahead.

66
00:05:24,330 --> 00:05:30,450
I think this is a very good opportunity to practice what you know about JavaScript and Jake Querrey.

67
00:05:30,720 --> 00:05:38,490
Some parts might be a bit hard because you need some tricks that we haven't talked about yet.

68
00:05:38,970 --> 00:05:43,830
But still, you can make some research and try to solve this by yourself.

69
00:05:43,830 --> 00:05:50,160
If you have any questions, you can always come to me, use the Q&A section and I will help you out.

70
00:05:50,520 --> 00:05:56,550
To be honest, the times in my life where I learned the most was when I was trying to do something like

71
00:05:56,550 --> 00:06:00,030
this, something that was above what I knew at the time.

72
00:06:00,060 --> 00:06:07,320
I remember some situations where I did some code challenges to try to get hired by companies and they

73
00:06:07,320 --> 00:06:10,200
just asked for stuff that I didn't know.

74
00:06:10,380 --> 00:06:12,450
I didn't even know how to get started.

75
00:06:12,450 --> 00:06:16,590
But those were great opportunities for me to learn.

76
00:06:16,590 --> 00:06:21,700
So I encourage you to do this and I know this is going to be very good for you.

77
00:06:21,870 --> 00:06:24,720
So having said that, now it's time to move on.

78
00:06:25,080 --> 00:06:27,090
Let's start working on this.

79
00:06:27,210 --> 00:06:30,630
So if you want to do this by yourself, just go ahead.

80
00:06:30,810 --> 00:06:36,240
If you want to do this with me in the next video, I'm going to start solving this challenge.

81
00:06:36,540 --> 00:06:37,530
So I'll see you then.