class Fish {
  constructor(habitat, length) {
    this.habitat = habitat
    this.length = length
  }
  
  renderProperties(element) {
    element.innerHTML = JSON.stringify(this)
  }
}

class Trout extends Fish {
  constructor(habitat, length, variety) {
    super(habitat, length)
    this.variety = variety
  }
  
   renderPropertiesWithSuper(element) {
    element.className="green" 
    super.renderProperties(element);
  }
}

let grouper = new Fish("saltwater", "26in");
console.log(grouper);
grouper.renderProperties(document.getElementById("grouper"));

let rainbowTrout = new Trout("freshwater", "14in", "rainbow");
console.log(rainbowTrout);
//invoke function from parent prototype
rainbowTrout.renderProperties(document.getElementById("rainbowTrout"));
//invoke function from child's prototype
rainbowTrout.renderPropertiesWithSuper(document.getElementById("rainbowTroutParent"));