JSFiddle - React, Tailwind, and code Playground

by kirrrusha

HTML

<div id="main">
  <div id="notebook">123</div>
</div>

JavaScript

var element = document.querySelector("#main");

// Define like a ~class
var PriceCalculator = function(element){
	this.element = element;
  this.items = [];
  this.COUNTS_ARRAY = [1,2,3,4,5,6,7,8,9,10]
  this.TYPE_TO_PRICE_MAP = {
  	a: 1, b: 2, c: 3, 
    aa: 11, bb: 22, cc: 33
  };
  // item example:
  // { types: [], colors: [], counts: [] }
};
PriceCalculator.prototype.add = function(item){
	item.counts = this.COUNTS_ARRAY;
	this.items.push(item);
};
PriceCalculator.prototype.remove = function(item){
	index = null;
	for (var i = 0 ; i < this.items.length - 1 ; i++) 
    if ( this._areDeepEqual(this.items[i], item) ) 
      index = i;
  if (index == null) return;
  this.items.splice(index, 1); // delete
};
PriceCalculator.prototype._areDeepEqual = function(item1, item2){
	return JSON.stringify(item1) === JSON.stringify(item2);
};
PriceCalculator.prototype.getItemPrice = function(item){
	var type = item.typeSelected;
  var count = item.countSelected;
  var price = this.TYPE_TO_PRICE_MAP[type] || 0;
  var result = price * count;
  return result;
};
PriceCalculator.prototype.calculate = function(){
	var _this = this;
	var pricesArray = this.items.map(function(_item, i){
  	var price = _this.getItemPrice(_item);
  	return price;
  })
  var result = pricesArray.reduce(function(a, b) { return a + b; }, 0);
  return result;
};
PriceCalculator.prototype.render = function(el){
var el = document.getElementById("notebook");
if (el.parentNode) {
  el.parentNode.removeChild(el);
}
  // remove events listeners https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener
  // delete all <select> elements https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild
  // map/forEach through all this.items
  // create/append DOM element for each <select> element https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement
  // add events handlers and call this.calculate()...