1.10 Skill-builder: Volume of a sphere

Many ways to input numbers

There are several simple ways to have users enter numbers into your javascript program:

For example

Input by text line - <input type="text" id="inputText" name="inputText" size="5">

Please enter the radius of the sphere:

Input by spinbox - <input type="number" id="inputNumber" name="inputNumber" min="0" max="100">

Please enter the radius of the sphere:

Input by range slider - <input type="range" id="inputRange" name="inputRange" min="0" max="100">

Please enter the radius of the sphere: 0 100


A sphere of radius has a volume of:

Saving your work

Download the template and rename it to your last name, such as "1.10S-VolumeOfASphere-LastName.html"

The assignment

Analyse using an Input/Processing/Output chart and then create a program that calculates the volume of a sphere using V=4/3*πr3, given the radius.

  1. Fill in the IPO chart at the top of the page (see Organizing Problems, if needed)
  2. Fill in the code to make things calculate properly with a text input box
  3. Look at the new code at the top of the page to figure out how to calculate powers
  4. Then change the code so that it works with a range slider or number spinbox

Extend and expand

How do you get your code to show both the radius and the volume, like in the example?

Is it possible to automatically draw a sphere of the proper radius on the screen, as well?