OOP - menu

by Ksenia Polyakova

HTML

<div id="mymenu"></div>
<button id="button">убрать</button>
<button id="goback">вернуть</button>

CSS

.menu a {
  display: block;
}

.submenu {
  margin-left: 2em;
}

.menu {
  margin-bottom: 2em;
}

JavaScript

'use strict';

function Container() {
	this.id = '';
  this.htmlCode = '';
  this.className = '';
};

Container.prototype.render = function() {
	return this.htmlCode;
};
Container.prototype.remove = function() {
	var x = document.getElementById( this.id );
  x.parentNode.removeChild(x);
};

function Menu( menuId, menuClass, menuItems ) {
	Container.call( this );
  this.id = menuId;
  this.className = menuClass;
  this.items = menuItems;
};
Menu.prototype = Object.create( Container.prototype );
Menu.prototype.constructor = Menu;
Menu.prototype.render = function(  ) {
	var menucode =  '<div class ="' + this.className + '"' + ' id="'+ this.id + '">';
 	for( var i = 0; i < this.items.length; i++ ) {
    	menucode += this.items[i].render();
  }
  menucode += '</div>';
  return menucode;
};
Menu.prototype.test = function() {
	for( var i = 0; i< this.items.length; i++) {
  	console.log( this.items[i] );
  }
}

function Submenu( submenuId, submenuClass, items ) {
	Menu.call( this );
  this.id = submenuId;
  this.className = submenuClass;
 	this.items = items; 
};
Submenu.prototype = Object.create( Menu.prototype );
Submenu.prototype.constructor = Submenu;

function MenuItem( href, label ) {
	Container.call( this );
  this.className = 'menu__item';
  this.href = href;
  this.label = label;
};

MenuItem.prototype = Object.create( Container.prototype );
MenuItem.prototype.constructor = MenuItem;
MenuItem.prototype.render = function(  ) {
	return '<a href ="' + this.href + '"' + '>' + this.label + '</a>'
};

var menuItem1 = new MenuItem( '#', 'Домашняя' ), 
		menuItem2 = new MenuItem( '#', 'Каталог' ),
    menuItem3 = new MenuItem( '#', 'Портфолио' ),
    menuItem4 = new MenuItem( '#', 'Цветочки' ),
    menuItem5 = new MenuItem( '#', 'Грибочки' ),
    mySubmenu = new Submenu( 'submenu', 'submenu', [menuItem4, menuItem5] ),
    myMenu = new Menu( 'menu01', 'menu', [menuItem1, menuItem2, mySubmenu, menuItem3] );

var x = document.getElementById( 'mymenu' );
x.innerHTML =...