Bubble Navigator

by Pavlo

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  text-align: center;
}

.bubble {
  border: 2px solid red;
  padding: 10px;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  position:relative;
}

TypeScript

const $ = jQuery;

interface IBubbleOption {
  size: number;
  color:  string;
}

class BubbleNavigation {
	container: any;
  options: IBubbleOption[] = [];
  
  constructor(container: any, options: IBubbleOption[]) {
  
  this.container = container;
  this.options = options;

  this.init();
  }
  
  init() {
    // this.container.innerHTML = 'bubbles gonna be here!';
    console.log('jquery', $, jQuery);
    console.log('this.options', this.options);
    
    const self = this;
    this.options.forEach(option => {
    console.log('option', option);
    console.log('self', self);
    self.addBubble(option);
		})
  }
  
  addBubble(option: IBubbleOption) {
  	$('<span>B</span>').addClass('bubble')
			.appendTo($(this.container));
  }
}


let bubbles = [{ size: 3, color: '#d1ea44'}];

const container = document.querySelector("#app");
const bubbleNavigator = new BubbleNavigation(
	container,
	bubbles
);
//document.querySelector("#app").innerHTML = 'bubbles';