JSFiddle - React, Tailwind, and code Playground

by Sahil Batla

HTML

<input id="isbn" placeholder="isbn" maxlength="12" />
<button id="isbnCalculate">Print ISBN</button>
<div id="target"></div>

JavaScript

function Barcode(attributes) {
    this.isbnSelector = attributes.isbn;
    this.targetSelector = attributes.target;
    //initialize with 0 value for isbn
    this.isbn13 = 0;
}

//this method calculates the isbn as per input
Barcode.prototype.setISBN = function(isbn12) {
  if ((isbn12).match(/^\d{12}$/)) {
    number = 0;
    for(var i = 0; i < 12; i++) {
      number += parseInt(isbn12[i]) * (i % 2 == 0 ? 1 : 3);
    }
    return isbn12 + (10 - ( number % 10));
  } else {
    return 'wrong input'
  }
}

//responsible for any DOM bindings
Barcode.prototype.bindEvents = function(selector) {
    var _this = this;
    $(selector).on('click', function() {
        _this.isbn13 = _this.setISBN($(_this.isbnSelector).val());
        _this.displayValue();
    });
}

//Display the new ISBN value in target Selector
Barcode.prototype.displayValue= function()  {
    $(this.targetSelector).text(this.isbn13);
}

$(function() {
    var barcode = new Barcode({ isbn: '#isbn', target: '#target'});
    barcode.bindEvents('#isbnCalculate');
});