JSFiddle - React, Tailwind, and code Playground

by CommandLineDesign

HTML

<div id="isPrime-Controls"></div>
<div id="isPrime-Log"></div>

CSS

li{
  list-style: none;
}

.num{
  padding-right: 8px;
}
.result{

}

JavaScript

//Functions
var isPrime = function(n){
	for(var i = 2; i < Math.sqrt(n); i++){
  		if(n%i == 0){
      	return false;
      }
  }
  return true;
}

//Controls
var Control = function(placeHolderID){
	this.placeHolder = document.getElementById(placeHolderID+'-Controls');
	
  this.input = document.createElement('input');
  this.input.type = "text";
  this.input.placeholder = "Prime Check";
  
  this.resultLog = new Log(placeHolderID+'-Log');
  
  var thisObject = this;
  this.handleSubmit = function(e){
   if(e.keyCode == 13){
      thisObject.resultLog.appendLog(e.target.value, isPrime(e.target.value));
      thisObject.resultLog.render();
   }
  }
  
  this.input.addEventListener('keydown', this.handleSubmit);
  
  this.render = function(){
  	this.placeHolder.appendChild(this.input);
  }
  
}

var LogItem = function(num, result){
	this.itemRow = document.createElement('li');
  
  this.numSpan = document.createElement('span');
  this.numText = document.createTextNode(num);
	this.numSpan.appendChild(this.numText);
  this.numSpan.className="num";
  
  this.resultSpan = document.createElement('span');
  this.resultText = document.createTextNode(result);
  this.resultSpan.appendChild(this.resultText);
  this.resultSpan.className="result";
  
  this.itemRow.appendChild(this.numSpan);
  this.itemRow.appendChild(this.resultSpan);
  console.log(this.itemRow);
  return this.itemRow;
}

//Log
var Log = function(placeHolderID){
	this.placeHolder = document.getElementById(placeHolderID);
  
  this.data = [];
  
  this.appendLog = function(num, result){
  	this.data.push({num: num, result: result});
  }

  
  this.render = function(){
  	this.placeHolder.innerHTML = '';
  	if(this.data.length > 0){
    	for(var i = 0; i < this.data.length; i++){
      	var thisItem = new LogItem(this.data[i].num, this.data[i].result);
        this.placeHolder.appendChild(thisItem);
      }
    }
  }
  
}

//Execution Code
var myControl = new Control('isPrime');
myControl.render();