JSFiddle - React, Tailwind, and code Playground

by henser

HTML

<body>
            <div class="input-container">
                <input id="inputVal" maxlength="7" />
                <p id="res">Please insert an integer or decimal number.</p>
            </div>

            <script src="js/script.js"></script>
            <script>
            var changeObj = new gotChange('inputVal','res');
            changeObj.init();
            </script>
        </body>

CSS

html,
body{
	width: 100%;
	height: 100%;
	background-color: #e3e3e3;
	margin: 0;
	padding: 0;
}

body{
	display: table;
	vertical-align: middle;
	text-align: center;
}

.input-container{
	display: table-cell;
	width: 100%;
	height: 100%;
	vertical-align: middle;
	text-align: center;
}

.input-container > input{
	width: 180px;
	height: 20px;
	padding:0 10px;

}

.input-container > p{
	color: #555;
	font-family: 'Roboto', Helvetica, sans-serif;
}

JavaScript

var gotChange = function(inputVal, res){
	// declare global variables inside main function to keep global namespace unpoluted.
	this.inputEl = document.getElementById(inputVal),
	this.resEl = document.getElementById(res),
	this.coins = {0:[200, 0],1:[100, 0],2:[50, 0],3:[20, 0],4:[10, 0],5:[5, 0],6:[2, 0],7:[1, 0]},
	this.curr = 0,
	this.dotPos_val,
	this.ifValid = true,
	this.decimal = false;
}

// init function - calling this method adds listener and automatically triggers program.
gotChange.prototype.init = function(){
	var self = this;

	self.inputEl.focus();
	self.inputEl.addEventListener('keypress', function(){
        if(event.keyCode === 13){
            self.validate();
        }
    });
}

// method that runs user input validation
gotChange.prototype.validate = function(){
    var val = this.inputEl.value,
    	inputArr = this.inputEl.value == '' ? [0] : val.split(''), // if input is empty return array with 0 value, else split characters
        dotPos = val.indexOf('.'), // set variable with dot position
        dotLeft = val.substring(0,dotPos), // set variable with string containg the numbers left to the dot
		dotRight = val.substring(dotPos+1, dotPos.length), // set variable with string containg the numbers right to the dot
        rounded = Number('.'+ (dotRight)).toFixed(2), //round numbers to the right of the dot to the decimal value
        dotFound = false; // boolean to check id dots were already found

    for(var j=0; inputArr.length > j; j++){ // loop through input value single characters

        if((isNaN(inputArr[j]) && inputArr[j].indexOf('.') === -1) || (inputArr.length == 1 && inputArr[j] == 0)){ //preform some validation
           console.log('error: invalid input field value - input value may be empty, less-than 0 and/or have forbidden characters such as letters');
           this.ifValid = false; // set input value as invalid
           break;
        }

        if(inputArr[j].indexOf('.') != -1){  // if dot is found
    		
   ...