<label for="input-time">Time in UTC: </label>
<input value="14:30" type="time" id="input-time">

<p id="local"></p>
body {
  padding: 20px;
}

// References to DOM elements
var inputTime = document.querySelector("#input-time");
var output = document.querySelector("#local");

// When the input changes, update the local time
inputTime.addEventListener("change", function() {
  updateTime(this.value);
});

function updateTime(theTime) {
  var date = new Date()
  var timeParts = theTime.split(':')
  date.setUTCHours(~~timeParts[0])
  date.setUTCMinutes(~~timeParts[1])
  date.setUTCSeconds(~~timeParts[2])
  
  var formattedTime = date.getHours() + ':' + ('0' + date.getMinutes()).slice(-2)
  
  output.textContent = 'Time in your local time: ' + formattedTime
}

updateTime(inputTime.value);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.