Composite Example

In this example below you will see how to do a Composite Example with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by curveball, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright curveball ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Composite Example</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h1>Composite Example</h1>
<p>There is an area where several properties (Components) are located including single buildings (Leaves) as well as building complexes (Composites). A building complex may include several buildings. The goal is to get the total number of dwellers living in the area regading area as a "super complex". Using Composite pattern we can handle complex objects (Composites) that contain other objects (Leaves and/or Composites) as if they were simple objects. Another common example involves military Unit (Component), Army (Composite) and ArmyUnit (Leaf).</p>
<button id="sender1">Add building</button>
<button id="sender2">Add complex</button>
<button id="reset">Reset</button>
<br>
<div class="items" id="properties">
  <header>Area:</header>
</div>
<br>
<div class="items">
  Total dwellers: <span id="dwellersNum">0</span>
</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/curveball/composite-example-BpQgyV */
body {padding:10px;}
#receiver {
  border:1px solid gray;
  width:25%;
  margin-top:1em;
  padding: 5px;
}
div.items {
  overflow:auto; 
  padding:10px; 
  border:1px solid #222; 
  margin-top:10px; 
  display:inline-block;
}
div.items div, div.items header {
  border-bottom:1px solid #000;
  margin-bottom:10px;
}

/*Downloaded from https://www.codeseek.co/curveball/composite-example-BpQgyV */
// Component
function Property(dwellers) {
  this.dwellers = dwellers? dwellers : +prompt('Insert number of dwellers in the building:', 100);
}
// Leaf
function Building(dwellers) {
  Property.call(this, dwellers);
  this.type = 'Single building';
}
Building.prototype = Object.create(Property.prototype);
Building.prototype.getDwellers = function() {
  return this.dwellers;
}
// Composite
function Complex() {
  this.type = 'Building complex';
  this.buildings = [];
  this.propertyList = document.getElementById("properties");
}
Complex.prototype = Object.create(Property.prototype);
Complex.prototype.getDwellers = function() {
  var dwellers = 0;
  for(var i = 0; i < this.buildings.length; i++) {
    dwellers += this.buildings[i].getDwellers();
  }
  return dwellers;
}
Complex.prototype.addProperty = function(property, inform) {
  this.buildings.push(property);
  // getting the current number of dwellers in the area. Area can be regarded as a Super Complex containing single buildings and building complexes.
  document.getElementById("dwellersNum").textContent = this.getDwellers();
  if(!inform) return;
  var record = document.createElement('div');
  record.textContent = property.type + " added: " + property.getDwellers() + ' dwellers';
  this.propertyList.appendChild(record);
}


function Setup() {}
Setup.prototype.run = function() {
  var area = new Complex(); // area that contains complexes and single buildings
  
  var btn1 = document.getElementById("sender1");
  btn1.addEventListener("click", function() {
  area.addProperty(new Building(), true); // adding a single building to the area
  });
  var btn2 = document.getElementById("sender2");
  btn2.addEventListener("click", function() {
  var smallComplex = new Complex(); 
  // adding a building complex, made up of two buildings, to the area
  smallComplex.addProperty(new Building(), false);
  smallComplex.addProperty(new Building(), false);
  area.addProperty(smallComplex, true);
  });
  var reset = document.getElementById("reset");
  reset.addEventListener("click", function() {
  var list = document.getElementById("properties");
  area.buildings.length = 0;
  document.getElementById("dwellersNum").textContent = '';
  removeMsg(list);
});
function removeMsg(elem) {
  var msgs = Array.prototype.slice.call(elem.children);
  msgs.forEach(function(element, index, array) {
   if(msgs[index].tagName != 'header'.toUpperCase()) {
     msgs[index].remove();
   }
  });
}
}
var setup = new Setup();
setup.run();

Comments