JSFiddle - React, Tailwind, and code Playground
HTML
<button id="js-in-id">
+10 min
</button>
<input type="text" readonly value="1:00" data-minutes="60" id="js-input-id" />
<button id="js-de-id">
-10 min
</button>
JavaScript
var formatTime = function(minutes){
var date = new Date(minutes * 60000),
hh = date.getUTCHours(),
mm = date.getUTCMinutes();
if(hh < 10){
hh = "0" + hh;
}
if(mm < 10){
mm = "0" + mm;
}
return hh + ":" + mm;
};
var inBtn = document.getElementById('js-in-id'),
deBtn = document.getElementById('js-de-id'),
input = document.getElementById('js-input-id');
inBtn.addEventListener('click', function(){
var minutes = parseInt(input.dataset.minutes);
minutes += 10;
input.value = formatTime(minutes);
input.dataset.minutes = minutes;
});
deBtn.addEventListener('click', function(){
var minutes = parseInt(input.dataset.minutes);
if(minutes > 10){
minutes -= 10;
input.value = formatTime(minutes);
input.dataset.minutes = minutes;
}
});