 Welcome to simple JavaScript app with Tokyo EdTech. That is me today We're gonna learn how to convert Celsius to Fahrenheit using JavaScript fascinating stuff So before we begin, let me just give a quick shout out to my members I got a lot of members here to thank. Thank you so much six months or more up to six months everybody I appreciate all your support. Let's get started JavaScript JavaScript is a language that is kind of been designed to be used on the web It's of course it is expanded. It's used almost everywhere But its original use was in web pages and this is where you would see it most as a user for sure So what we need to do is we need to create an HTML page and we're going to put our JavaScript into that HTML page Now there are other ways to do these things you can put it separately I'm going to put it together just to keep it simple and this is something I've been doing with my students and Hopefully they are enjoying it Now if you haven't seen my introduction to HTML Tutorial check that out first because it goes over a lot of what I'm about to do so first I create a simple HTML page and I need to Have my opening and closing HTML now you notice how there's no color coding and this is like red I'm using something called genie here to write my cat my code So I'm gonna go ahead and save that and you can see there's a bunch of stuff here So on my desktop, I've created a folder called Celsius to Fahrenheit because that's what this does So I'm gonna call this. I'll just call it Celsius to Fahrenheit. What the heck? Fair and height. That's a hard one to spell and notice it is a dot HTML file Even though we're talking about JavaScript, we're gonna make an HTML file here Okay, so now you can see that there is some color coding now my HTML page has a oops has a head and that head will have a Title so I'm gonna give it a title and Celsius to Fahrenheit Fahrenheit Fahrenheit Bye I'll put that later Fahrenheit and Then we're gonna have a body and that's where our content is gonna go and I'm making each one which is a heading a large heading and I'm gonna call it see No, I'll call it Celsius to Fahrenheit. It's gonna be lazy to fair and height Bye at Tokyo. That is me So I'm gonna go ahead and hit command s or control s depending what kind of computer using you see now This is turned white. So I know it's saved So now I can go over here and open it but I think I should be able to click this and it should open in your browser now if your computer is not set up that way you might have to go in and go to I'm not sure where you find it here. I'm on Linux, but you should be able to Maybe open a new window or you should be able to find it on your computer You might have to go to the desktop and actually click on it But once it's open once it's pretty easy to do. So you'll see here. We've got our HTML code we've got Celsius to Fahrenheit that's where this comes from here We've got Celsius to Fahrenheit by at Tokyo ed tech that comes from here again If you didn't watch my intro to HTML video and you don't know what this is stop now go watch that and come back Hey, so as I said, what we're gonna do is we're convert Celsius to Fahrenheit now. I've lived in Asia. I've lived in Europe. I've lived abroad Probably a little over half my life now and I still have not gotten used to Celsius. I'm sorry I I know 30s warm. I know 40s really hot. I know 50 is like you're not good But beyond that, I don't really know a lot. So anyway, I Need help converting Celsius to Fahrenheit. So what I'm gonna do is I'm gonna put some labels I'm gonna put Celsius and I'm gonna put fair and height And I might put Yeah, we don't really use this as much anymore bold tags, but I could put bold here just to make it look nice I guess Now you see how genie is doing a little bit of autocomplete for me, which works out well Sometimes things you know, I've had to delete a few things now. I'm gonna go ahead and save this I'm gonna come over here and refresh. You'll see something a little bit weird. Now. You notice how even though over here It's the next line over here. It's not and this is a little each the way HTML works I'm gonna put a BR tag again. This is not a an HTML video If you don't know what this means watch the other video. So I'm just gonna check that and now I've got The basic HTML setup for this page Now if I'm gonna be converting stuff I should go ahead and make this a little bigger so you can see it easier in the video If I'm gonna be converting stuff. I need to have a place to input the information. I have a place to Put the information out and then I need to have some way of actually, you know starting the calculation So what I'm gonna do is I'm gonna put a little text entry box here text input box I'm put a text input box here. I'm gonna put a button down here So to do that I'm gonna go ahead and just before the break because I want it to be on this line Here's what I do. I'm gonna do input So I'm gonna be inputting information type equals quote text. There are different types of inputs we're doing text today and Actually, I'm just gonna stop there for a second and I'm gonna save and just see if that works Okay, so that gives a little box that I can actually go ahead and type information into Which is pretty cool. Okay, so Now I can just go ahead and copy that And I can put that here Save it and then I can refresh it and now I've got a text box here as well Now I can I can put information into a text box or I can display information with the text box That's how I'm gonna do it today and then finally as I said, I'm gonna need a button And I'm gonna put a button here and I would say call this convert See Cool arrow C to F. I'm gonna save it Open it. I'm gonna refresh it. I mean and here is basically what my app is going to look like. It's not pretty We're not doing a CSS here, but we've got all of the elements that we need. We need this text box We need this text box. Now, of course, if you know a little HTML, I didn't have to use a text box here I could have used div. There's different things I could do, but I'm just gonna use text boxes And then I've got my little button here. It says convert C to F Now, of course when I click this nothing happens, you know, I could put 100 and click nothing happens Because we haven't coded it yet so First things first you need to understand a little bit about the way Coding works particularly in well, just basically in any language, but in a web page as well is If we want to refer to things We need to give things an ID sometimes you might call it a name, but we're gonna be using the ID as property here so We need to give this an ID That tells us what it does. We need to give this an ID that tells us what it does so What we'll put here is I want to put ID equals now here's what I told my students. I said look you could put box one and you could put ID equals box two So you can see these are unique. So names or IDs should be unique. So only one per page So these are unique, but they're not really meaningful. They don't really tell us much about what these things do So what I told my students to do is do the following. So text because it's a text input type and this is Celsius And then this one's gonna be Text Fair and height. Fair and height's hard to spell. I had to look that one up. So anyway I'm gonna bring that back over. Let me just screw this over a bit so we can see everything. Now you can see how the elements move You know based on what we're doing. So yours depending on your screen size could look like that It could look like this doesn't really matter at this point So it's very clear that this box is where we're gonna put Celsius and this box is where we're gonna see some fair nights Okay, so Now that we have that Okay, and again, if I'm going too fast just pause and go in return. You can copy the code here So we've created some input boxes. We've created they're called their text types We've given them unique and meaningful names. Okay, so there's only one text Celsius There's only one text fair night and we've got a little button that says convert C to F Now this is so far. This is all HTML. We haven't done any JavaScript at this point So now what we're gonna do is get into our JavaScript. So down here. I'm gonna put a script tag Now I could put it up here and probably actually should but we're gonna put it down here just to make our lives easier So now if you've never programmed in JavaScript before this might be a little bit You know complicated for you I'm assuming that you've done at least some coding or you know, it can follow along So when we write some code Typically, we put code into blocks called functions or sometimes called methods and what each Function or method does is usually just does one thing really really well So what we have to do is we need to create a function To convert Celsius to Fahrenheit. So I'm gonna go ahead and type function See it and I'm gonna call it. We're gonna call it that convert Celsius to Fahrenheit Now you notice how I'm doing The capitalization So I have a small C here capital C. So I've capitalized each internal word, but not the first one Okay, so this is called camel casing and you'll see this this pattern here So one thing you got to know about JavaScript and most programming languages is that capitalization counts So if I had a function with a small C and it's function with function with a big C There are two different functions. So the computer is really really pecky pecky about that sort of thing Same thing over here. If I've got a capital C here or a small C that makes a big difference So to convert Celsius to Fahrenheit. So for example, let's say Celsius equals 100 And I'm gonna use C here and to find Fahrenheit. We say Fahrenheit equals and here's the formula. It's nine divided by five times C Plus 32 Now I could put this in extra parentheses just to make it clear So it is nine divided by five multiplied by Celsius Plus 32. This is the formula to take Celsius to Fahrenheit Now we've basically just assigned a few values and again, I'm assuming you know what variables are I could put there here But I think it's optional again, I'm not an expert on JavaScript. This is something I'm still kind of learning myself to be honest So let's go ahead and just run this. Let's I've saved it and let's just go ahead and Refresh now if I click this nothing happens You know, I haven't done anything yet I've just entered some I've just I've got some numbers in memory at this point So the first thing I want to do is I want to go ahead and see if this is working So I need to put this value this f which should be 212 into this box Okay, so what I got to do is the following document gets element by ID note the capitalization capital E capital B capital I you don't have that's not gonna work quote So what I'm trying to do is I'm trying to access this element Okay, now we gave this element an ID So I can just copy that for quotes and parentheses So I said document get element by ID text Fahrenheit So I want to do something with this box This box has a value and we're gonna set it equal to f So let me go over that one more time. So document is this entire page We're getting an element on this page by its ID in this case. It's text Fahrenheit Text Fahrenheit has something what's called a value. It's an attribute and we're gonna set that equal to f Which we just calculated here So again, I'm gonna go I've saved it I'm gonna refresh it and I'm gonna click this button and you'll see that nothing happens Okay, this is to be expected. Now. I asked actually literally like on Friday I did this lesson with my students and I said, why doesn't this work and My students she raised her hand. She said well, you didn't connect the button to the function, which is exactly right So there's no code here to tell this button To call what we say call this function Okay, so to do that We do something called on click Okay, so what this means is when I click here Put an equal sign couple quotes here. I want to call this function I want this function to happen So I'm gonna copy that put that in there and put a little semicolon at the end May notice I put semicolons at the end of everything here So I'm gonna go ahead. I've saved it. I'm gonna refresh it Don't forget to refresh cuz you don't refresh. It's not gonna work. I'm gonna click this and I should see 212 there And there we go So far so good So now You know in our code we've hard-coded 100 But what we need to do is we need to pull the number from here Now it's basically it's the exact same thing. I just did But I want to pull the number from text Celsius Celsius now this is a little confusing especially for beginners. So in this case I'm taking the value that's here Putting it into C in this line. I'm taking the value of F Putting it into the value of this box So now I'm gonna save it again. I'm gonna refresh and in here and put zero and put convert Yeah, I gave us 32 that makes sense because zero times nine fifths is zero Plus 32 is 32. That's the freezing point of water if I do 100 and Hit convert that gives me 212 So that is That's it. That's that's your first basic very basic web app and but As I literally as I told my students the other day I said everything that you've learned here is basically the foundation of Of coding you've learned all quite a lot about coding here First thing is that objects in this case these text boxes Need to have a name It needs to be unique So that's different from the other boxes and it needs to be meaningful so that we know what our Information is coming from what's supposed to represent Okay, so again if I call this box one and box two it would work computer doesn't know the difference But just makes our coding a lot more, you know hard to understand We have here on click. This is called an event. So in It's called event-driven programming some event happens and then a function is called and usually it's called a callback Something happens. So I always tell my students, you know all programming comes down to the concept of if this Then that so in this case if I click on this particular button It's going to call this function It means it's going to jump down to this function and it's going to do the code inside that particular function So now we have some variables in this case. I did see I did f. I could call it Celsius I could call it Fahrenheit again variables should be unique names should be meaningful and Just there's some rules about variable naming like don't put spaces in them But for now just let's not worry about that and then you can see here This comes down to how JavaScript interacts with the elements of a web page So we've given it an ID. So because we want to access it So here we had say The variable C is going to be set to the value in this element called text Celsius So we take that value pop it in C do some calculations take that value put it into This text box this element. Okay, so the order here is very important how that works I think if you can get this basic concept down, you know at this point you should be able to code almost any type of Conversion program, you know with with numbers and things as long as you keep remembering that you need not to go you need You know unique names and you to you know have unique variables and all that sort of thing now Again, if you haven't done any coding before, you know some of the way that I did this is probably a little confusing But hopefully you have somewhat of a little bit of a coding background and this makes a little bit of sense So anyway, that's about it now if you're wondering what to do next what I would probably do is just as practice is I would add an extra button called convert f to C and a function here called convert Fahrenheit to Celsius and see if you can get that to work and If you don't know the formula, actually, I don't know it either. You can either derive it from here or you can Yeah, you can look it up. You can Google the formula. That would be your next challenge if I were you, okay? So again, thanks to everybody for tuning in. I appreciate it. I hope you found this helpful I know it was a little fast, but it's just kind of an introductory lesson to get you used to JavaScript where it goes and how to connect JavaScript to the different elements On the HTML page and especially buttons because that's super duper important. Okay. So anyway, have a great day night Whatever wherever you're at and as I'd say keep on coding. Take care