E3 EC 1, JS Classes Answers

by jessupjs

HTML

<h1>Extra Credit Assignment 1, Week 8</h1>
<p>This exercise is designed to demonstrate how JS classes can be built and used with the new ES6 'class' declaration.</p>

<div id='container'>

<div id='mockForm'>
  <label>Radius: 
    <input id='radius' type='number' min='10' max='50' placeholder='min:10 | max:50'>
  </label><br/>
  <label>Height: 
    <input id='height' type='number' min='10' max='50' placeholder='min:10 | max:50'>
  </label> <br/>
  <input id='submit' type='submit' value='SUBMIT'>
  <div id='circleResults'></div>
</div>

<div id='theCan'>
</div>

</div>

CSS

#container {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
}

#mockForm {
  display: flex;
  flex-flow: column nowrap;
  width: 35%;
}

input {
  text-align: center;
  width: 60%;
}

label:last-of-type input {
  margin-left: 0.5%;
}

#submit {
  background-color: black;
  color: white;
  font-size: 1.25rem;
  font-weight: bold;
  width: 50%;
}

#circleResults {
  color: midnightblue;
  line-height: 125%;
}

#theCan {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-top: 5%;
  width: 65%;
}

#canCyl {
  background-color: white;
  border-left: 2px solid red;
  border-right: 2px solid red;
  display: flex;
  justify-content: center;
  position: relative;
}

#canTop {
  border-radius: 50%;
  border: 2px solid red;
  position: absolute;
}

#canBot {
  border-radius: 50%;
  border: 2px solid red;
  position: absolute;
}

JavaScript

// A class declaration should only be performed in "strict mode"!
"strict mode";

// Below is the declaration of a class named `Circle`. You will need
//   to fill in the constructor and add a useful function.

class Circle {
	// The special method "constructor" can only be used once in a class.
  //   We want to use it now to build a Circle object requiring one 
  //   parameter, `radius`.
  constructor(radius) {
  	
    // The user may input any `radius` value, so use the keyword "this"
    //   to represent the specific instance of its use as you build
    //   property for 'radius'.
    this.radius = radius;
    
    // The other formulaic component of a circle should not be modified
    //   by the user, so we'll add this as a variable.  Use the built-in
    //   Math object to create the `pi` variable.
    var pi = Math.PI;
    
    // Finally let's apply the 'radius' property and 'pi' private variables
    //  to construct the 'circumference' and 'area' for THIS circle, using 
    //  their famous formulas.
    this.circumference = 2 * this.radius * pi;
    this.area = pi * Math.pow(this.radius, 2);
  }
  
  // We're now outside of the constructor, but still within the class 
  //   declaration (hint: that means we don't have access to everything
  //   anymore). Include a function `cylVolume` that takes in `height` as 
  //   a parameter and performs the expected task of calculating the
  //   volume of a cylinder.
  	
    cylVolume(height) {
    	return (this.area * height);
    }
}

// Woohoo! The class is built! Let's get it to work in the form.
var button = document.getElementById("submit");
button.onclick = function () {

	// The user has entered values for radius and height, but we only need
  //   to pass in `radius` into the constructor.  Build a Circle object
  //   called `circle`.
  var userRadius = document.getElementById("radius").value;
  var circle = new Circle(userRadius);

	// Now that the Circle object is built, we can place the...