1
00:00:09,220 --> 00:00:14,060
Taylor, I hope you were able to do the exercise without any problems.

2
00:00:14,350 --> 00:00:16,650
So now let's start with the solution.

3
00:00:16,670 --> 00:00:21,960
So, number one, we should reuse that function to convert Celsius to Fahrenheit.

4
00:00:21,970 --> 00:00:30,190
So before we get started with anything, let's just go to X to the jazz and let's just copy this function.

5
00:00:31,990 --> 00:00:38,200
Now, let's reuse it here, there's no use in rewriting it again because it is just going to be the

6
00:00:38,200 --> 00:00:39,550
same calculation.

7
00:00:40,180 --> 00:00:46,430
So now we should only do something when this button is clicked so I can write any temperature in here.

8
00:00:46,480 --> 00:00:52,990
So 30 and everything is just going to start after pressing this button.

9
00:00:53,140 --> 00:00:55,360
So let's see the ID of this button.

10
00:00:55,600 --> 00:00:58,140
So this button has the idea of convert.

11
00:00:58,740 --> 00:01:00,130
So let's copy this.

12
00:01:00,520 --> 00:01:04,720
Let's just do document dot get element by ID.

13
00:01:04,720 --> 00:01:06,700
So the same thing we've been doing.

14
00:01:07,030 --> 00:01:09,010
This is the idea of this element.

15
00:01:09,220 --> 00:01:13,300
Now what we are going to do is create the on.

16
00:01:14,660 --> 00:01:16,460
Click event.

17
00:01:17,730 --> 00:01:20,280
Then let me just close this.

18
00:01:21,300 --> 00:01:26,580
Then we are going to assign a function to this event, so function.

19
00:01:33,920 --> 00:01:40,280
So now when we enter dysfunction, it means that the user has clicked this button, so the first thing

20
00:01:40,280 --> 00:01:43,130
we need to do is get the value of that input.

21
00:01:43,370 --> 00:01:47,270
So let's create a variable called can be like.

22
00:01:51,980 --> 00:01:58,460
Temperature Celsius, just so we don't repeat the same name we used for the argument of the function.

23
00:01:59,640 --> 00:02:05,310
I think this can be a bit confusing, so I always choose different names, so now I'm just creating

24
00:02:05,310 --> 00:02:08,340
this variable and this variable is going to be.

25
00:02:11,370 --> 00:02:12,000
This.

26
00:02:13,240 --> 00:02:19,030
But the idea of this element of this input is temp Celsius.

27
00:02:22,030 --> 00:02:30,370
So temp Celsius and I've just left a tip for you saying that in order to get that value, instead of

28
00:02:30,370 --> 00:02:35,260
using the inner HTML, you should use the value property.

29
00:02:37,240 --> 00:02:43,960
All right, so now that we have this temperature in Celsius, we can just run this function.

30
00:02:45,960 --> 00:02:51,150
And send the value to that input, so let's just run this function.

31
00:02:52,140 --> 00:02:59,750
Bypassing the Celsius temperature as an argument, and now we just need to throw it inside that element,

32
00:02:59,770 --> 00:03:02,600
so let's see what element is that?

33
00:03:03,000 --> 00:03:04,890
So this element is the.

34
00:03:07,820 --> 00:03:09,170
Temp far.

35
00:03:11,460 --> 00:03:12,150
Element.

36
00:03:13,260 --> 00:03:14,970
We just copy this.

37
00:03:16,580 --> 00:03:17,900
So document.

38
00:03:21,950 --> 00:03:26,520
That that element by behind this is the idea of that element.

39
00:03:26,720 --> 00:03:29,840
So this time the inner age TML.

40
00:03:32,400 --> 00:03:35,770
It's going to be what this function is going to return.

41
00:03:36,090 --> 00:03:40,230
So this is always going to happen after we press the button.

42
00:03:40,440 --> 00:03:42,390
All right, let's save this.

43
00:03:42,390 --> 00:03:45,330
Let's go back there, refresh the page.

44
00:03:46,690 --> 00:03:51,070
We should always go to the console just so we can see if there's no errors.

45
00:03:51,430 --> 00:03:55,570
So now let's try 30, let's calculate this.

46
00:03:55,690 --> 00:04:02,680
And now we can see that we just made a pretty cool conversion functionality in our page so we can type

47
00:04:02,680 --> 00:04:06,550
different Celsius values like zero.

48
00:04:07,740 --> 00:04:08,430
Or.

49
00:04:10,580 --> 00:04:14,990
Minus 10, and now we can just convert them into Fahrenheit.

50
00:04:15,990 --> 00:04:24,030
Just one thing that we should pay attention is that if we leave this blank and we try to calculate this

51
00:04:24,030 --> 00:04:30,950
is considering that the value was zero, which is not exactly the behavior we want.

52
00:04:31,290 --> 00:04:34,970
So in this case, we can create an if statement.

53
00:04:35,460 --> 00:04:40,800
So after getting that value, we can create an if statement.

54
00:04:41,870 --> 00:04:50,420
And now we cannot just do this, just use the name of the variable here, because in this case, if

55
00:04:50,420 --> 00:04:54,600
the value is zero, zero is actually a valid value.

56
00:04:55,130 --> 00:05:01,550
So if we do it like this, when it's zero, this is going to return in force because we know that JavaScript

57
00:05:01,730 --> 00:05:03,650
evaluates zero as false.

58
00:05:03,890 --> 00:05:06,170
So in this case, we really need to.

59
00:05:07,150 --> 00:05:14,110
Compare it with an empty string, which is what is going to be returned if that element is empty.

60
00:05:14,350 --> 00:05:20,050
So in this case, we should just run an alert saying that the temperature.

61
00:05:25,330 --> 00:05:26,320
Is invalid.

62
00:05:28,080 --> 00:05:31,230
The temperature informed is invalid.

63
00:05:32,230 --> 00:05:33,250
Otherwise.

64
00:05:40,750 --> 00:05:47,740
We can just get this and do the same thing we were doing before, so let's go back there, let's save

65
00:05:47,740 --> 00:05:48,120
this.

66
00:05:48,310 --> 00:05:54,790
So if we try to leave the blank, we calculated it says that the temperature is invalid.

67
00:05:55,300 --> 00:05:58,060
So it's not going to be considered as zero.

68
00:05:58,270 --> 00:06:04,660
If we try zero, then, well, zero is a valid temperature to minus five.

69
00:06:06,560 --> 00:06:08,180
Good, this is working well.

70
00:06:08,360 --> 00:06:14,960
Thirty five, so we can see that this is working great, if we leave this blank, then we have this

71
00:06:14,960 --> 00:06:15,470
error.

72
00:06:15,680 --> 00:06:20,750
We cannot type text in here because I use they no input.

73
00:06:20,780 --> 00:06:23,330
So the front end is controlling this.

74
00:06:23,330 --> 00:06:29,240
It doesn't let me type any letter here so we don't have to take care of this validation.

75
00:06:29,240 --> 00:06:33,860
We just need to be careful if this field is left blank.

76
00:06:34,080 --> 00:06:36,540
So that was the solution for number one.

77
00:06:36,740 --> 00:06:41,090
Now, number to print in the list below.

78
00:06:41,090 --> 00:06:42,610
So we have a list here.

79
00:06:42,620 --> 00:06:44,440
Let's see it in the inspector.

80
00:06:44,750 --> 00:06:51,500
So this is the ID for the list, print in the list below the years when the World Cup of soccer will

81
00:06:51,500 --> 00:06:55,090
happen from twenty twenty two to twenty fifteen.

82
00:06:55,820 --> 00:06:56,570
So.

83
00:06:58,220 --> 00:07:00,440
Let me just copy this ID.

84
00:07:05,960 --> 00:07:07,350
So this was number one.

85
00:07:07,370 --> 00:07:10,130
Now we are solving number two.

86
00:07:17,900 --> 00:07:20,780
So this is the idea of the element and.

87
00:07:22,040 --> 00:07:24,920
These are the years that we need to use.

88
00:07:30,600 --> 00:07:36,240
So the first thing we need to do is creating a variable that is going to call start.

89
00:07:37,700 --> 00:07:42,620
Here, so this is going to start in twenty twenty two.

90
00:07:44,430 --> 00:07:47,340
Then we are going to use a while loop.

91
00:07:48,290 --> 00:07:54,770
So while something is true, we are going to execute something, so we'll start here.

92
00:07:56,660 --> 00:08:04,640
Is less than or equal to 20, 50, then we are going to do something, what we are going to do, we

93
00:08:04,640 --> 00:08:09,140
are just going to append list elements to this list.

94
00:08:10,390 --> 00:08:14,950
So document that get element by ID.

95
00:08:16,600 --> 00:08:19,270
This is the idea of the element.

96
00:08:23,110 --> 00:08:33,250
Not in our e-mail plus equal, so we don't replace the entire e-mail, we just add stuff to it, so

97
00:08:33,250 --> 00:08:38,230
we are just going to add a new list item.

98
00:08:41,120 --> 00:08:41,870
Let's.

99
00:08:45,560 --> 00:08:46,490
Close it here.

100
00:08:48,930 --> 00:08:57,270
And in the middle of this list item, we can just print the start here, actually, this this wasn't

101
00:08:57,270 --> 00:09:00,680
a very good name because we are going to change it.

102
00:09:00,690 --> 00:09:04,430
So this is not going to be just the start here.

103
00:09:04,830 --> 00:09:09,660
So let's use current here, because this is going to start at twenty, twenty two.

104
00:09:09,870 --> 00:09:12,120
Then this is going to change every time.

105
00:09:12,420 --> 00:09:14,060
So let's just use another name.

106
00:09:14,460 --> 00:09:15,750
It's going to be better.

107
00:09:17,340 --> 00:09:22,710
So then this is just going to print the current here, which is going to be twenty, twenty two in the

108
00:09:22,710 --> 00:09:29,150
first time this loop runs, and then before we run it again, we just need to increment.

109
00:09:29,160 --> 00:09:34,020
So current year, we just need to increment for.

110
00:09:35,420 --> 00:09:40,280
So now this is going to keep running until this is 20, 50.

111
00:09:40,570 --> 00:09:42,470
All right, so by doing this.

112
00:09:43,990 --> 00:09:45,070
Let's save this.

113
00:09:47,720 --> 00:09:50,090
And when we refresh the page.

114
00:09:52,010 --> 00:09:59,460
Now we can see all the years of the next World Cups, if you want, you can erase this value.

115
00:09:59,510 --> 00:10:02,810
We know how to do this before starting the loop.

116
00:10:03,440 --> 00:10:05,390
You can just get this element.

117
00:10:08,570 --> 00:10:11,000
And just.

118
00:10:13,040 --> 00:10:16,420
Make its inner adjustment as an empty string.

119
00:10:16,460 --> 00:10:22,790
Be careful if you do it inside the loop, then it's just going to reset its value every time we don't

120
00:10:22,790 --> 00:10:27,650
want this, we just want to reset it once before we start running.

121
00:10:27,830 --> 00:10:30,250
And then we can just include all the years.

122
00:10:30,680 --> 00:10:36,970
So by doing this and refreshing the page now in this list, we only have the years.

123
00:10:37,190 --> 00:10:38,980
So this one is done.

124
00:10:39,590 --> 00:10:46,490
Number three, use the input fuds below to inform two greats and the number of absences of a student.

125
00:10:47,150 --> 00:10:50,870
Then we should follow the rules to print the result.

126
00:10:51,080 --> 00:10:57,540
So this one and number four are going to be solved in the second part of this video.

127
00:10:57,590 --> 00:10:58,400
I'll see you then.