Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
See how to create the four functions in this practice session.
Provide feedback
We're looking for feedback on this new type of practice workshop. When you're finished, could you please review the workshop by filling out this short form?

0:00
How did it go?

0:01
If you didn't get it to work, you can watch my solution,

0:04
compare it to what you wrote, and then try to recreate it yourself.

0:07
Also, keep in mind there are often different ways to solve

0:10
a programming challenge.

0:11
Your solution may be different than mine and still work, that's fine.

0:15
Okay, first I'll use the script tag to attach this JavaScript file

0:19
to the index.html file.

0:23
Because the geometry.js file is inside a JavaScript folder,

0:28
js, the complete path from the index to the JavaScript file is js/geometry.js.

0:35
Okay, next I'll create a function.

0:39
I use the function keyword followed by the name of the function,

0:43
a pair of parentheses, and then some braces.

0:47
I'll name this areaRectangle.

0:49
You probably used a different name, and that's fine.

0:51
As long as the name clearly indicates what the function does, you're doing well.

0:55
Okay, this function needs two parameters to capture the width and

0:59
height values that are passed to it when the function's called.

1:02
Parameters go inside the parentheses.

1:11
And the programming for the function goes inside the braces.

1:15
The area is just the width times the height, so I'll use a simple return

1:19
statement, That returns the result of this calculation.

1:26
Calculating the volume of a box is pretty much the same.

1:30
It just requires a third parameter, the length.

1:36
Now, calculating the area of a circle requires a bit more JavaScript.

1:41
But I'll start with the basic function structure first.

1:44
This function will only take one argument, the radius of the circle.

1:49
Now, to calculate the area of the circle,

1:52
we need to do some more complex math using the value of pi.

1:56
Fortunately, the JavaScript math object includes the value of pi built into it.

2:00
Math.PI, then to calculate the area, we multiple this by the square of the radius.

2:08
To calculate the square of a value, you can use the Math.pow method.

2:14
Pow stands for power, and it lets you raise the value to a given power.

2:18
In this case, I want to square the radius or

2:21
raise the radius value to the second power.

2:24
The pow method takes the value that you wish to raise,

2:27
here it's the radius, and the value that you wanna raise it to.

2:31
In this case, I wanna square the radius, so I use 2 for this value.

2:35
Now, calculating the volume of a sphere is similar.

2:38
You need to use pi and you also need to use pow.

2:40
But this time you'll raise it to the third power.

2:44
Notice that I wrapped the 4 divided 3 inside parentheses.

2:48
This helps group that mathematical statement and

2:50
makes it clear to me that I'm looking at fourthirds here, or 4 divided by 3.

2:55
Now, this is related to the order of operations,

2:57
something you may remember from a math class.

2:59
I've added a link to the teacher's notes for more information on the order of

3:02
operations, if you're interested in learning more.

3:05
Okay, finally, I just need to call each function.

3:08
Remember to call a function, you use the function's name and a set of parentheses.

3:15
Inside the parentheses, I include the arguments, or values,

3:18
that I want to pass to the function.

3:21
In this case, I'm calling the areaRectangle function, and

3:24
passing the width and the height of the rectangle.

3:27
But I also want to print this to the console, so I use the console.log method.

3:38
Now, do you notice something here?

3:40
I'm actually calling two functions.

3:42
The first function, areaRectangle,

3:44
returns a value that's passed to the second function, the log method.

3:49
Now, this is really a common thing in JavaScript, so

3:51
get used to seeing code like this.

3:53
Now, the last three lines are pretty much the same.

3:56
You're just calling different functions with different arguments.

3:59
I'll save this file and preview it in a browser.

4:07
And then I'll open the dev tools, And check out the console.

4:13
There it is.

4:14
I hope you were able to complete this practice successfully.

4:17
If not, why not start over and

4:18
try to write the program without looking at my version?

4:21
Have fun with JavaScript, and I'll see you again soon.
You need to sign up for Treehouse in order to download course files.
Sign up