hours to decimal converter

by Pranab Dey

HTML

<div class="cont">
  Hours <span><input type="number" min="0" max="24" name="hour" id="hour"></span>: Minutes <span><input type="number" min="0" name="minute" id="minute"></span>
</div>
<div class="totalTime">
  Your Billable time is : <p></p>
</div>

CSS

input {
  color: #000;
  position: absolute;
  border: 0;
  text-align: center;
  width: 65px;
}

input:focus {
  outline: 0;
}

span {
  border-bottom: 1px solid;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
  margin-right: 5px;
  height: 17px;
  width: 50px;
  position: relative;
}
.totalTime p{
  display: inline-block;
}

JavaScript

var hour = document.getElementById("hour"),
  minute = document.getElementById("minute"),
  input = document.querySelectorAll("input"),
  total = document.querySelector(".totalTime p"),
  result, minuteValue, hourValue;

for (var i = 0; i < input.length; i++) {
  input[i].addEventListener("input", loopFunction);
}

function loopFunction(){
	if(hour.value == ""){hour.value = "0";}
  if(minute.value == ""){minute.value = "00"}
	var minuteInDecimal = (minute.value / 60).toFixed(2);
  minuteValue = parseFloat(minuteInDecimal);
  hourValue = parseInt(hour.value);
  total.innerHTML = `${hourValue+minuteValue} hours`;
}