<!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;}