Bill Rosener: Well. So, Dr. Bell, welcome back in this video you learn how to create a health club application. Using Javascript. Let's start by taking a brief kind of a tour of this, and then we'll go ahead and I'll walk through it. So we're gonna have. They can choose their membership, and if I choose gold, it would be a hundred
Bill Rosener: if I choose. Basic. That would be 80 and then go plus would be under 20. These are going to be mutually exclusive, and I can only have one of these selected. Then I'm going to go ahead and allow them to choose 0 or more of these additional charges, and if I choose tennis
Bill Rosener: that would add $15 to it.
Bill Rosener: I choose racquetball 20, and then golf would be 125. But again, I could actually select 0 or all of these and have them work there.
Bill Rosener: Let's go ahead and take a look. Here. Here was the assignment description. I'm going to get you the code to do the membership and additional charges, and I'm have you do some more additional charges on your own with childcare, personal trainer, etc, there and then here would be the value. So we saw the basic was 100. I mean, basic is 80 gold 120. Then we got these additional charges there.
Bill Rosener: So anyway. Also, I should probably point out, while I'm right here, here is you can view the screen. There's a screen capture the Javascript code that I use. So you can
Bill Rosener: look at this if you want, and if you do that, you may go. Man that's really small default. Read. But just go ahead and click on that. And then you can actually use like control
Bill Rosener: and the plus and minus arrows on your keyboard to get whatever font size you want, and then you can go ahead and just scroll through this, so you can have a nice large font size, not trying to stare at some small. But this is an image. So hopefully, you'd literally look at this kind of get some ideas.
Bill Rosener: but you can't copy and paste the code there.
Bill Rosener: Okay, let's go ahead. And I get started here. So I'm gonna come right here to visual studio.
Bill Rosener: And I'm just going to go ahead and start, grab a bunch of code here and we'll start.
Bill Rosener: Don't even get that closing. HTML, Tag, I'm come right up here.
Bill Rosener: I'm gonna choose. I've got digital studio code. I'm gonna go to file new file, new text file.
Bill Rosener: I'm just going to go ahead and paste. And you can see, I've got my closing. HTML, let me go ahead and start through taking a look at this. So we're going to start the body
Bill Rosener: form. I just called it, form one. Ideas, form one health club. Javascript. Go ahead and put your name here.
Bill Rosener: Then we're gonna start a Div tag, and we can see that 1st one was in pink. If I came back here, we're working on this here area that's in pink, the next one will be yellow.
Bill Rosener: Okay, so these are going to be radio buttons. These are going to be mutually exclusive. Notice. They all have the exact same name.
Bill Rosener: and then also even check over here currently, if I load this file gold plus is checked. But if I wanted to, I could come up here and type. I've got you. I'll put it on the gold.
Bill Rosener: So now
Bill Rosener: I'll go ahead and well here in a second. I'll save this. When I now 1st view it, the default value will be gone.
Bill Rosener: Then we'd have some additional charges. These are check boxes. I could have tennis, racquetball and golf.
Bill Rosener: And then we're going to have
Bill Rosener: when we press on this. It's gonna call Javascript.
Bill Rosener: Let's just see if you can do the clear values. And then the also, we're gonna have
Bill Rosener: a tax and a total there.
Bill Rosener: Okay, let me go ahead and save this. I'm gonna come right up here
Bill Rosener: and go to file. I'm gonna go to save. As
Bill Rosener: we just looked at the finished version. Let's go ahead and call this one assignment 3
Bill Rosener: dash Js. For Javascript, dot HTML,
Bill Rosener: and I'll go ahead and save that.
Bill Rosener: And if I was to come right over here. I'm just saving that right in my temp directory. Here's the file I just got done creating right here, Java. 3 Java assignment 3 Javascript. Okay? And if I wanted to, I could come over here right click on that and open it with the browser. But since I've got my extension. I can just come up here right click open and default Browser.
Bill Rosener: and here it is. So I've already got that is already given me all the code here. Nothing's gonna happen yet.
Bill Rosener: because I haven't finished any of the Javascript there. But anyway, I'm gonna let you guys type that up. But I'm trying to save a little time. Make this video a bit quicker. So I'm just kind of copying and paste in there.
Bill Rosener: Okay, so that was starts the body all the way down here, closes the body, closes the HTML. Now I'm going to come up to the very top. I'm just going to grab all this code here, and then I'll kind of stop and explain it.
Bill Rosener: Okay, moving on here, I'm gonna start my HTML, I've got a head tag. So now there's going to be a title in the in the title.
Bill Rosener: I'm going to start my script.
Bill Rosener: Notice down here. I'm going to close the script.
Bill Rosener: I'm going to go ahead and have a function called calculate. And if I moved on down here.
Bill Rosener: so when I press on my button, it's gonna call calculate, and just let you know if you wanted to. I could have put these some double quotes around button here
Bill Rosener: either way, and same thing on the clear values.
Bill Rosener: Okay? So it's gonna call something called calculate. The 1st one is gonna go is form one, membership 0, 1, 2. So it's gonna take a look. And the 1st one, it's gonna have 0 1 and 2. And I'm gonna go. Okay, was 0 checked was one check or was 2 checked. And again, since these are mutually exclusive, one of these has to be turned on. So then I'm either gonna set total cost 8,000 or 120.
Bill Rosener: Then I'm going to go ahead and take a look. Is tennis checked, and if so, I'm going to take whatever's in total cost. Let's say it was the gold, which would be 100, I'm going to add. Total cost would be 100 plus 15 stored back in here. 100 plus 15 would be 115 there.
Bill Rosener: Okay, the final. I'm gonna be doing some stuff with, I got a couple of ways to compute
Bill Rosener: rounding it and computing tax. Finally, the last thing I'm doing is I'm gonna take total cost and store it into my
Bill Rosener: way down here into total.
Bill Rosener: Okay, let me go ahead and save this
Bill Rosener: it and it should be running.
Bill Rosener: Go ahead and right click open and default browser. And here it is. So when I hit the calculate total. Sure enough, I'm getting a hundred
Bill Rosener: if I press on gold plus under 20 basic.
Bill Rosener: or if I choose, tennis that should be 115. And this is all working. Okay, one last step I want you to do is let's assume
Bill Rosener: I want to have it as soon as I press on one of these. It computes the total.
Bill Rosener: And if you want, I'm gonna I can start closing these as, or I can just keep keep them open there.
Bill Rosener: Okay, to do that, I just need to go ahead and add an on change.
Bill Rosener: And so if I come on down here to my form.
Bill Rosener: so what I'm gonna do is anywhere in here. I'm going to put
Bill Rosener: go ahead and put on change. So if this value changes, the calls, calculate
Bill Rosener: do the same thing with the gold
Bill Rosener: and the gold plus. And then I'm gonna come on down here and do the same thing
Bill Rosener: with these additional charges for tennis, for racquetball
Bill Rosener: and for go. So if those change it automatically for
Bill Rosener: right up here which is going to compute some new values, so let me go ahead and save this
Bill Rosener: file, save
Bill Rosener: come back and reload that open and default Browser. Here's my new version. So watch now when I press gold, plus. Hence I didn't even have to press, calculate, or if I choose, gold or basic.
Bill Rosener: or if I choose, tennis instantly is computing those values. So again, I've given you the code to do that. You still have a little work out of you as far as typing that code up and looking for hopefully a month
Bill Rosener: have to track down a few errors as you're entering that code. What I'll have you do is also add some additional charges for childcare, personal trainer and swimming pool there.
Bill Rosener: So that's going to kind of wrap it up. One thing which I have mentioned on the Php. Which I probably haven't mentioned is if you spend a bunch of time developing this, someone can just come right over here and go to view Page source, and they can look at all of the code there used to create that.
Bill Rosener: whereas the case with Javascript, I mean with Php, they can only look.
Bill Rosener: They can actually look at the source code used to create that. Anyway, that's gonna wrap up this video last step. I mean, go ahead and get your finish off your additional charges. There's also going to be a tax there. If you want to challenge yourself, see if you can get the clear and then find the last step is simply upload that to your website there.
Bill Rosener: Well, I'll catch you in the next video. That again, that was assignment 3, and the next one will be doing this exact same thing, using? Php, thanks a lot back.