Taylor, I hope you were able to do the exercise without any problems.
So now let's start with the solution.
So, number one, we should reuse that function to convert Celsius to Fahrenheit.
So before we get started with anything, let's just go to X to the jazz and let's just copy this function.
Now, let's reuse it here, there's no use in rewriting it again because it is just going to be the
same calculation.
So now we should only do something when this button is clicked so I can write any temperature in here.
So 30 and everything is just going to start after pressing this button.
So let's see the ID of this button.
So this button has the idea of convert.
So let's copy this.
Let's just do document dot get element by ID.
So the same thing we've been doing.
This is the idea of this element.
Now what we are going to do is create the on.
Click event.
Then let me just close this.
Then we are going to assign a function to this event, so function.
So now when we enter dysfunction, it means that the user has clicked this button, so the first thing
we need to do is get the value of that input.
So let's create a variable called can be like.
Temperature Celsius, just so we don't repeat the same name we used for the argument of the function.
I think this can be a bit confusing, so I always choose different names, so now I'm just creating
this variable and this variable is going to be.
This.
But the idea of this element of this input is temp Celsius.
So temp Celsius and I've just left a tip for you saying that in order to get that value, instead of
using the inner HTML, you should use the value property.
All right, so now that we have this temperature in Celsius, we can just run this function.
And send the value to that input, so let's just run this function.
Bypassing the Celsius temperature as an argument, and now we just need to throw it inside that element,
so let's see what element is that?
So this element is the.
Temp far.
Element.
We just copy this.
So document.
That that element by behind this is the idea of that element.
So this time the inner age TML.
It's going to be what this function is going to return.
So this is always going to happen after we press the button.
All right, let's save this.
Let's go back there, refresh the page.
We should always go to the console just so we can see if there's no errors.
So now let's try 30, let's calculate this.
And now we can see that we just made a pretty cool conversion functionality in our page so we can type
different Celsius values like zero.
Or.
Minus 10, and now we can just convert them into Fahrenheit.
Just one thing that we should pay attention is that if we leave this blank and we try to calculate this
is considering that the value was zero, which is not exactly the behavior we want.
So in this case, we can create an if statement.
So after getting that value, we can create an if statement.
And now we cannot just do this, just use the name of the variable here, because in this case, if
the value is zero, zero is actually a valid value.
So if we do it like this, when it's zero, this is going to return in force because we know that JavaScript
evaluates zero as false.
So in this case, we really need to.
Compare it with an empty string, which is what is going to be returned if that element is empty.
So in this case, we should just run an alert saying that the temperature.
Is invalid.
The temperature informed is invalid.
Otherwise.
We can just get this and do the same thing we were doing before, so let's go back there, let's save
this.
So if we try to leave the blank, we calculated it says that the temperature is invalid.
So it's not going to be considered as zero.
If we try zero, then, well, zero is a valid temperature to minus five.
Good, this is working well.
Thirty five, so we can see that this is working great, if we leave this blank, then we have this
error.
We cannot type text in here because I use they no input.
So the front end is controlling this.
It doesn't let me type any letter here so we don't have to take care of this validation.
We just need to be careful if this field is left blank.
So that was the solution for number one.
Now, number to print in the list below.
So we have a list here.
Let's see it in the inspector.
So this is the ID for the list, print in the list below the years when the World Cup of soccer will
happen from twenty twenty two to twenty fifteen.
So.
Let me just copy this ID.
So this was number one.
Now we are solving number two.
So this is the idea of the element and.
These are the years that we need to use.
So the first thing we need to do is creating a variable that is going to call start.
Here, so this is going to start in twenty twenty two.
Then we are going to use a while loop.
So while something is true, we are going to execute something, so we'll start here.
Is less than or equal to 20, 50, then we are going to do something, what we are going to do, we
are just going to append list elements to this list.
So document that get element by ID.
This is the idea of the element.
Not in our e-mail plus equal, so we don't replace the entire e-mail, we just add stuff to it, so
we are just going to add a new list item.
Let's.
Close it here.
And in the middle of this list item, we can just print the start here, actually, this this wasn't
a very good name because we are going to change it.
So this is not going to be just the start here.
So let's use current here, because this is going to start at twenty, twenty two.
Then this is going to change every time.
So let's just use another name.
It's going to be better.
So then this is just going to print the current here, which is going to be twenty, twenty two in the
first time this loop runs, and then before we run it again, we just need to increment.
So current year, we just need to increment for.
So now this is going to keep running until this is 20, 50.
All right, so by doing this.
Let's save this.
And when we refresh the page.
Now we can see all the years of the next World Cups, if you want, you can erase this value.
We know how to do this before starting the loop.
You can just get this element.
And just.
Make its inner adjustment as an empty string.
Be careful if you do it inside the loop, then it's just going to reset its value every time we don't
want this, we just want to reset it once before we start running.
And then we can just include all the years.
So by doing this and refreshing the page now in this list, we only have the years.
So this one is done.
Number three, use the input fuds below to inform two greats and the number of absences of a student.
Then we should follow the rules to print the result.
So this one and number four are going to be solved in the second part of this video.
I'll see you then.