JSFiddle - React, Tailwind, and code Playground

by subzey

HTML

<input type="button" class="lt" value="Less">
<input readonly type=phone>
<input type="button" class="gt" value="Greater">

JavaScript

(function(){
	var min = 0;
  var max = 99999999999;
  var current;
  
  var ltButton = document.querySelector('input.lt');
  var gtButton = document.querySelector('input.gt');
  var field = document.querySelector('[type=phone]');

	var guess = function(){
  	current = Math.ceil((min + max) / 2);
    sync();
  }
  
  var hint = function(greater){
  	if (greater) {
    	min = current;
    } else {
    	max = current;
    }
    guess();
  }

  var sync = function(){
  	field.value = '+' + ('00000000000' + current).slice(-11);
    if (min >= max - 1) {
    	ltButton.disabled = true;
      gtButton.disabled = true;
    }
  }
  
  ltButton.addEventListener('click', function(e){
  	e.preventDefault();
    hint(false);
  });  

  gtButton.addEventListener('click', function(e){
  	e.preventDefault();
    hint(true);
  });
  
  guess();
})();