| 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);
|
