← Main Web Dev.

Websites: Volume of a Cylinder

Create a website that allows the visitor to enter the radius and height of a cylinder, and it calculates the volume and puts it on the webpage.
Example webpage.
Notes and Code Outcome

HTML

The structure of the page is laid out in the HTML code.
  • Input Elements: (Lines 18-22) 
    radius: <input type="number" id="r" value="1"><br>
  height: <input type="number" id="h" value="1">

  <p>
    Units: <input type="text" id="units" value="cm">
  </p>
</div>
    Radius and height are entered as "number" types so when your javascript gets these values they'll already be numbers and not strings (text).
  • An Element for Output (Line 28) 
    Volume = <span id="volume" class="outputValue"></span>
    The span element with the id outputValue is set as a placeholder for the JavaScript code to put the results of the calculations.
cylinder.html 
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Cylinders</title>
    <link href="cylinder.css" rel="stylesheet" />
  </head>
  <body>

    <h1>Geometry of Cylinders</h1>

    <p>
      In order to calculate the volume and surface area of a cylinder, you will need to enter its <b>radius</b> and its <b>height:</b>
    </p>

    <div id="inputs">
      <h2>Inputs</h2>
      radius: <input type="number" id="r" value="1"><br>
      height: <input type="number" id="h" value="1">

      <p>
        Units: <input type="text" id="units" value="cm">
      </p>
    </div>

    <div id="outputs">
      <h2>Output</h2>
      Volume = <span id="volume" class="outputValue"></span>
    </div>

  </body>

  <script type="text/javascript" src='cylinder.js'>
  </script>

</html>

JavaScript

Javascript does the actual calculations. It gets the values input from the page, does the calculations, and outputs the results to the page.
  • volCylinder function: (Line 2): 
    function volCylinder(){
    Create function that recieves no parameters (it will read the radius and height from the input elements on the webpage).
  • Get radius (r), height (h), and units (u) from webpage : 
    let r = document.getElementById("r").value;
let h = document.getElementById("h").value;
let u = document.getElementById("units").value;
    Get values from elements with the given id's.
  • Calculate volume (Line 9): 
    let vol = Math.PI * r**2 * h;
    Javascript has some built in constants like Math.PI
  • Output result to webpage (Line 12-14): Get the webpage element where the output is going to go: 
    let vOut = document.getElementById("volume");
    We've already calculated the volume (see above) but now we'll set up the units as whatever input units there were cubed: 
    vUnits = " " + u + "3";
    Place the volume calculated (vol), and the units (vUnits) into the output element (vOut) using the innerHTML attribute. 
    vOut.innerHTML = vol + vUnits;
 cylinder.js 
// Function to calculate the volume of a cylinder
function volCylinder(){
  // Get input from webpage
  let r = document.getElementById("r").value;
  let h = document.getElementById("h").value;
  let u = document.getElementById("units").value;

  // do calculations
  let vol = Math.PI * r**2 * h;

  // output to webage
  let vOut = document.getElementById("volume");
  vUnits = " " + u + "3";
  vOut.innerHTML = vol + vUnits;

}

// call function/s when page loads
volCylinder();

//   add event listeners to run function whenever a change
// is made to one of the inputs
rInput = document.getElementById("r");
rInput.addEventListener("change", volCylinder);

hInput = document.getElementById("h");
hInput.addEventListener("change", volCylinder);

uInput = document.getElementById("units");
uInput.addEventListener("input", volCylinder);

CSS

Styles the page to make it look pretty.
cylinder.css 
body {
  background-color: khaki;
}

h1 {
  font-family: "Times New Roman", Times, serif;
  color: blue;
  padding-left: 2em;
}

input[type="number"]{
  width: 5em;
  text-align: center;
}

#inputs {
  border: 1px solid black;
  width: 50%;
}

.outputValue {
  background-color: lightgreen;
  border: 4px inset green;
  padding: 5px;
}

Test: A Class in Javascript

Using a class for cylinders. (in progress).

Creating the Class

// a class to deal with cylinders
class cylinder{

  constructor(r, h) {
    this.r = r;
    this.h = h;
  }

  // method for calculating the volume of the cylinder
  volume(){
    let v = Math.PI * this.r**2 * this.h;
    return v;
  }

}
  • The class requires you to pass two variables, r and h. You can see this in the class' constructor.
  • This class has one method (volume) that calculates and returns the volume of the cylinder.

Using the Class

An instance of the class is created using the new keyword. 
// do CALCULATIONS USING THE CYLINDER CLASS
let c = new cylinder(r, h);
let vol = c.volume()
 cylinderClass.js 
// a class to deal with cylinders
class cylinder{

  constructor(r, h) {
    this.r = r;
    this.h = h;
  }

  // method for calculating the volume of the cylinder
  volume(){
    let v = Math.PI * this.r**2 * this.h;
    return v;
  }

}

// Function to calculate the volume of a cylinder
function volCylinder(){
  // Get input from webpage
  let r = document.getElementById("r").value;
  let h = document.getElementById("h").value;
  let u = document.getElementById("units").value;

  // do CALCULATIONS USING THE CYLINDER CLASS
  let c = new cylinder(r, h);
  let vol = c.volume()

  // output to webage
  let vOut = document.getElementById("volume");
  vUnits = " " + u + "3";
  vOut.innerHTML = vol + vUnits;

}

// call function/s when page loads
volCylinder();

//   add event listeners to run function whenever a change
// is made to one of the inputs
rInput = document.getElementById("r");
rInput.addEventListener("change", volCylinder);

hInput = document.getElementById("h");
hInput.addEventListener("change", volCylinder);

uInput = document.getElementById("units");
uInput.addEventListener("input", volCylinder);