<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <h1>Modular JavaScript as Parts of Speech</h1>
  <!--See script.js for the code-->
  
  <script>
    livingRoom.display();
    kitchen.display();
    bedroom.display();
    livingRoom.toggleLights();
    livingRoom.display();
    bedroom.repaint("orange");
    kitchen.display(); 
    /*Note how kitchen is unaffected by the changes to livingRoom and bedroom.*/
  </script>
</body>

</html>
//*****
//Note: I changed the document.write calls to console.log in this version.
//*****
function room(title, height, width, length, color, lightsOn) {
  this.title = title;
  this.height = height;
  this.width = width;
  this.length = length;
  this.color = color;
  this.lightsOn = lightsOn;

  this.display = function() {
    console.log("The " + this.title + " is " + this.height + "ft high, " + this.width + "ft wide, and " + this.length + "ft long. It is painted a lovely shade of " + this.color + ".");
    if (this.lightsOn) {
      console.log("The lights are currently on.");
    } else {
      console.log("The lights are currently off.");
    }
  };

  this.turnLightsOn = function() {
    this.lightsOn = true;
    console.log("The lights in the " + this.title + " are now on.");
  };

  this.turnLightsOff = function() {
    this.lightsOff = false;
    console.log("The lights in the " + this.title + " are now off.");
  };

  this.toggleLights = function() {
    if (this.lightsOn) {
      this.turnLightsOff();
    } else {
      this.turnLightsOn();
    }
  };

  this.repaint = function(newColor) {
    this.turnLightsOn();
    this.color = newColor;
    console.log("The " + this.title + " is now an even beautiful shade of " + this.color + ".");
  };

}

var livingRoom = new room("living room", 10, 20, 20, "green", false);
var kitchen = new room("kitchen", 10, 15, 15, "purple", true);
var bedroom = new room("bedroom", 12, 10, 15, "blue", false);
body {font-family: Calibri, Arial, sans-serif;}