Почему выходное значение отображается как NaN

Вы пропускаете ценностные вызовы на getElementByIds! Так:

  let a = Number(document.getElementById("first").value);
  let b = Number(document.getElementById("third").value);
  let c = Number(document.getElementById("second").value);
  let d = Number(document.getElementById("fourth").value);

Быстрая рекомендация: добавьте type = "number" к входным данным, чтобы убедиться, что входные данные являются числами.

<h1>Time Calculator</h1>
<h2>This calculator can be used to “add” two time values.</h2>
Enter hours: <input id = "first" type = "number"> 
Enter Minutes: <input id = "second" type = "number"> 
Enter hours: <input id = "third" type = "number">  
Enter Minutes: <input id = "fourth" type = "number">
<button onclick = "add()">ADD</button>

Полный код:

function add() {
  var min, hrs;
  let a = Number(document.getElementById("first").value);
  let b = Number(document.getElementById("third").value);
  let c = Number(document.getElementById("second").value);
  let d = Number(document.getElementById("fourth").value);
  min = c + d;
  hrs = min / 60;
  min = min % 60;
  hrs = hrs + a + b;
  document.write(hrs);
  document.write(min);
}

Помните, что вы можете легко отлаживать свой код построчно, используя только браузер.

и ты это поймешь, позвонив

document.getElementById("fourth")

вернет узел, но вы завершаете его Number()

а затем вы звоните .value с выхода Number()

то, что вы могли бы сделать вместо этого, было бы, например,

        function getNumber(str) {
            return Number(document.getElementById(str).value);
        }
        function add() {
            var min, hrs;
            let a = getNumber("first");
            let b = getNumber("third");
            let c = getNumber("second");
            let d = getNumber("fourth");
            min = c + d;
            hrs = min / 60;
            min = min % 60;
            hrs = hrs + a + b;
            document.write(hrs);
            document.write(min);
        }

живой пример

function getNumber(str) {
    return Number(document.getElementById(str).value);
}
function add() {
  var min, hrs;
  let a = getNumber("first");
  let b = getNumber("third");
  let c = getNumber("second");
  let d = getNumber("fourth");
  min = c + d;
  hrs = min / 60;
  min = min % 60;
  hrs = hrs + a + b;
  document.write(hrs);
  document.write(min);
}

<h1>Time Calculator</h1>
<h2>This calculator can be used to “add” two time values.</h2>
Enter hours: <input id = "first"> 
Enter Minutes: <input id = "second"> 
Enter hours: <input id = "third"> 
Enter Minutes: <input id = "fourth">
<button onclick = "add()">ADD</button>