3.5 Challenge: Temperature Converter

It's time for Challenge 4. Which is a little bit different from what we've done so far. Here, you can see, we have to build a temperature conversion component. So we have some stuff to start with here. We have a TemperatureConvertor component. But right now, it doesn't actually do anything, we have some input boxes here that print out the value of state .f and state .c for fahrenheit and celsius, but we do not actually set those values anywhere. So we are gonna have to do that and of course, since this are input boxes, we would assume that we want to be able to change one and have the other update. I have given you these two helpful functions, fahrenheit to celsius, and celsius to fahrenheit, so you can pass in a temperature and get the other one back. So pretty basic. I'm sure you could figure that out yourself, but this just makes it a little easier, okay. So go ahead and fork this code pen and get to work. Cuz now we're gonna do the exact same thing here. And I will change the title once again, and let's find out how I am going to solve this problem. First, of course, we're gonna need some deep fault state for f and c, so let's go ahead and write a getInitialState function and this is going to return an object here which obviously is gonna have to have some variables f and c. So let's go ahead and set c equal to 0 and then, we'll set f equal to c2f and we'll just pass it 0 as well. So this way we have a default of 0 for celsius and of course 32 for fahrenheit. And as you can see already, we have that showing up in our application 32 fahrenheit, 0 celsius. However we can't change these values yet, so we need to be able to do that. So to do that we need to add an on-change listener to both of these things. But first let's go ahead and write that on-change listener. On change is gonna be a function and let's say it's gonna take two things. It's gonna take the change event and it's also gonna take the unit for the value that got changed. So if it's farenheit, we'll pass f, if its celsius will pass c and we'll just call that the unit. So now what do we need to do? Well, first we need to make sure that the value that they have typed into the input box is actually a number that we can work with. And we'll just stick with whole numbers for now, so we can use percent. So let's destructure e here so that we can get that value, so inside the event we'll have the target and inside of the target we have the value which is the one we need. So we'll get that like that and then we can say value = parseInt(value, 10). Okay, now, if this is not a number, we don't want to change the values of our state, so we can say, if is not a number, and we'll pass it the value, then we'll go ahead and return. Otherwise, we can do this.setState, because we want to change our state in some way. Let's start with celsius here and we'll say, if the unit that we've passed in is celsius, then we know that the value Is celsius, so we'll just pass the value. Otherwise, we know that the value is fahrenheit. And so we're gonna have to do fahrenheit to celsius and we'll pass in the value. Same thing for fahrenheit. If the unit is f, then we know that the value is fahrenheit. Otherwise, we're gonna do c2f and we'll pass in the value there. So now, we need to use this onChange function here on our inputs. So let's say onChange and we will take the event and we can say this to onChange. It will pass at the event and we'll pass at f for fahrenheit. Now, I'm gonna go ahead and copy this and let's paste it down here for celsius and we will change the f to a c and there we go. We can actually well, let's change this after we've made sure this works. So let me go ahead and save this and now, let's see if we change celsius to 10, we have farenheit changed to 50. Say 100 degrees celsius is 212 degrees farenheit, perfect. We can make this negative and that works fine. However, if we try and delete the 1 then, what happen is we're gonna have just that negative sign there. And so, we parseInt this is not a number and so we return and so these values never change. It's interesting that if I try and add a point to this then, it doesn't really work. But we can get partial degrees if the converted numbers are partial degree, okay. There's actually one way we could maybe shorten up what we're doing a little bit more and that is if we switch the order of these parameters. Then we could do some partial application. And we're not gonna pull in a functional library to do partial application here. We can just make onChange a function that returns another function. So what we could do here is, onChange will take the unit as its first parameter. That is a function and then, it's gonna return a function that expects that event object and let's see, do we get this right? I think so. We're gonna return this function and the,n we can indent all of that, right. So now, unchanged takes a unit and returns a function that takes an event. So now, we can change this to be this.onChange, and we pass it an f. And this one will be this.onChange, and we pass it a c. And that returns the function that will be our change handler. So that just cleans this up a little bit. And actually kind of looks cool. Looks like we have a syntax, unexpected token. Let's see what's the problem here. I guess I misspelled return so fix return then great. And where syntax errors and let's give this a try for a change this to 10 we get 5000 we get 212 that's great if we change this to -100 we get -148, I can change this, excellent, there we go. So, once again, we have our working temperature converter. So that is my solution. You may have come up with something a little bit different and that's great. Good job with this challenge.