Composite Example

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

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
Copyright curveball ©


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

  <meta charset="UTF-8">
  <title>Composite Example</title>
    <link rel="stylesheet" href="">

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



  <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>
<div class="items" id="properties">
<div class="items">
  Total dwellers: <span id="dwellersNum">0</span>

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



/*Downloaded from */
body {padding:10px;}
#receiver {
  border:1px solid gray;
  padding: 5px;
div.items {
  border:1px solid #222; 
div.items div, div.items header {
  border-bottom:1px solid #000;

/*Downloaded from */
// Component
function Property(dwellers) {
  this.dwellers = dwellers? dwellers : +prompt('Insert number of dwellers in the building:', 100);
// Leaf
function Building(dwellers) {, 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) {
  // 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';

function Setup() {} = 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 = '';
function removeMsg(elem) {
  var msgs =;
  msgs.forEach(function(element, index, array) {
   if(msgs[index].tagName != 'header'.toUpperCase()) {
var setup = new Setup();;