ivapie/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="number" id="minutes"/>
    <input type="number" id="seconds" />
    <button id="action">Start</button>

    <script src="./index.js"></script>
</body>
</html>

## index.js
class Counter{
    constructor(){
        // DOM Elements
        this.fieldMinutes = document.getElementById('minutes');
        this.fieldSeconds = document.getElementById('seconds');
        this.action = document.getElementById('action')
        // Init Default Settings
        this.minutes = "0";
        this.seconds = "0";
        this.fieldMinutes.value = this.minutes.padStart(2,0);
        this.fieldSeconds.value =  this.seconds.padStart(2,0);
        this.currentMinutes;
        this.currentSeconds;
        // Flags
        var time;
        this.on = false;
        // Functions
        this.startTime = this.startTime.bind(this);
        this.startStop = this.startStop.bind(this);
        this.counter = this.counter.bind(this);
        this.validateMinutes = this.validateMinutes.bind(this);
        this.validateSeconds = this.validateSeconds.bind(this);
        this.validateProcess = this.validateProcess.bind(this);
        this.stop = this.stop.bind(this);
        // Events
        this.events();
    }

    events(){
        var self = this;
        this.action.addEventListener('click', function(){
            self.startStop();
        });
        this.fieldMinutes.addEventListener('keyup', function(e){
            self.validateMinutes(e)
        })
        this.fieldMinutes.addEventListener('blur', function(e){
            self.validateMinutes(e)
        })
        this.fieldMinutes.addEventListener('focus', function(e){
            self.stop();
        })
        this.fieldSeconds.addEventListener('keyup', function(e){
            self.validateSeconds(e)
        })
        this.fieldSeconds.addEventListener('blur', function(e){
            self.validateSeconds(e)
        })
        this.fieldSeconds.addEventListener('focus', function(e){
            self.stop();
        })
    }

    validateMinutes(e){
        e.preventDefault();
        var self = this;
        var field = self.fieldMinutes;

        if(field.value >= 0){
            this.validateProcess(field, 3)
        }else{
            self.minutes = "0";
        }
        self.fieldMinutes.value = self.minutes.padStart(2,0)
    }

    validateSeconds(e){
        e.preventDefault();
        var self = this;
        var field = self.fieldSeconds;

        if(field.value >= 0){
           this.validateProcess(field, 2)
        }else{
            self.seconds = "0";
        }
        self.fieldSeconds.value = self.seconds.padStart(2,0)
    }

    validateProcess(field, digits){
        var field = field;
        var digits = digits;
        var self = this;
        var literal;

        if(field.value.length <= digits){
            self.currentSeconds = Array.from(field.value);
            literal = self.currentSeconds.toString();
        }else{
            var arr = Array.from(field.value)
            var item = arr.slice(1);
            literal = item.toString();
        }
        self.seconds = literal.replace(/,/g,'')
    }

    counter(){
        var self = this;
        self.seconds++;
        if(self.seconds > 59)  {
            self.seconds = 0;
            self.minutes++;
        }
        self.fieldSeconds.value = self.seconds.toString().padStart(2,0);
        self.fieldMinutes.value = self.minutes.toString().padStart(2,0);
    }

    startTime(){
        this.time = setInterval( this.counter, 1000);
    }

    stop(){
        this.on = false;
        action.innerText = "Start";
        clearInterval(this.time);
    }

    startStop(){
        action.innerText =  !this.on ? "Stop" : "Start";
        if(!this.on){
            this.on = true;
            this.startTime();
        }else{
            this.stop()
        }
    }
}

var counter = new Counter();
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	</head>
	<body>
	<input type="number" id="minutes"/>
	<input type="number" id="seconds" />
	<button id="action">Start</button>

	<script src="./index.js"></script>
	</body>
	</html>
	class Counter{
	constructor(){
	// DOM Elements
	this.fieldMinutes = document.getElementById('minutes');
	this.fieldSeconds = document.getElementById('seconds');
	this.action = document.getElementById('action')
	// Init Default Settings
	this.minutes = "0";
	this.seconds = "0";
	this.fieldMinutes.value = this.minutes.padStart(2,0);
	this.fieldSeconds.value = this.seconds.padStart(2,0);
	this.currentMinutes;
	this.currentSeconds;
	// Flags
	var time;
	this.on = false;
	// Functions
	this.startTime = this.startTime.bind(this);
	this.startStop = this.startStop.bind(this);
	this.counter = this.counter.bind(this);
	this.validateMinutes = this.validateMinutes.bind(this);
	this.validateSeconds = this.validateSeconds.bind(this);
	this.validateProcess = this.validateProcess.bind(this);
	this.stop = this.stop.bind(this);
	// Events
	this.events();
	}

	events(){
	var self = this;
	this.action.addEventListener('click', function(){
	self.startStop();
	});
	this.fieldMinutes.addEventListener('keyup', function(e){
	self.validateMinutes(e)
	})
	this.fieldMinutes.addEventListener('blur', function(e){
	self.validateMinutes(e)
	})
	this.fieldMinutes.addEventListener('focus', function(e){
	self.stop();
	})
	this.fieldSeconds.addEventListener('keyup', function(e){
	self.validateSeconds(e)
	})
	this.fieldSeconds.addEventListener('blur', function(e){
	self.validateSeconds(e)
	})
	this.fieldSeconds.addEventListener('focus', function(e){
	self.stop();
	})
	}

	validateMinutes(e){
	e.preventDefault();
	var self = this;
	var field = self.fieldMinutes;

	if(field.value >= 0){
	this.validateProcess(field, 3)
	}else{
	self.minutes = "0";
	}
	self.fieldMinutes.value = self.minutes.padStart(2,0)
	}

	validateSeconds(e){
	e.preventDefault();
	var self = this;
	var field = self.fieldSeconds;

	if(field.value >= 0){
	this.validateProcess(field, 2)
	}else{
	self.seconds = "0";
	}
	self.fieldSeconds.value = self.seconds.padStart(2,0)
	}

	validateProcess(field, digits){
	var field = field;
	var digits = digits;
	var self = this;
	var literal;

	if(field.value.length <= digits){
	self.currentSeconds = Array.from(field.value);
	literal = self.currentSeconds.toString();
	}else{
	var arr = Array.from(field.value)
	var item = arr.slice(1);
	literal = item.toString();
	}
	self.seconds = literal.replace(/,/g,'')
	}

	counter(){
	var self = this;
	self.seconds++;
	if(self.seconds > 59) {
	self.seconds = 0;
	self.minutes++;
	}
	self.fieldSeconds.value = self.seconds.toString().padStart(2,0);
	self.fieldMinutes.value = self.minutes.toString().padStart(2,0);
	}

	startTime(){
	this.time = setInterval( this.counter, 1000);
	}

	stop(){
	this.on = false;
	action.innerText = "Start";
	clearInterval(this.time);
	}

	startStop(){
	action.innerText = !this.on ? "Stop" : "Start";
	if(!this.on){
	this.on = true;
	this.startTime();
	}else{
	this.stop()
	}
	}
	}

	var counter = new Counter();