You can Ignore this...But I need to ask this ...Am I Dumb? Am I really not cut out for this?

OH. It's been very reassuring to go through the contents you provided, Steven Parker. Now I get it.

So, I'm in the cliff of confusion phase. What amazed me most was that the desert of despair is still ahead of me. (As if the Cliff of Confusion isn't enough)!!!

Thank you very much, Emily Easton. Maybe I was too much disappointed with myself. Now, I think I'm gonna make it.

Think of it like this, most people can say bonjour but if someone came up to you and started a conversation in French, you would have no idea whats being said right? Year 2 (grade 3) students couldn't pass a full exam written for year 10s (grade 11s) because they haven't learnt it yet.

What I'm trying to say here is that its a matter of learning, thats not just from watching videos but also from practice. As shown by other answers above, you'll learn something then you'll learn something else and it will completely baffle you. Have faith and determination! And be sure to give yourself breaks and take notes so you can relax your mind and maybe even go over your notes in your free time.

Also, when unsure about something in JS even though you've written it and it works, you can always ask for advice on here (community). Hope this helps! Head up :)

Yeah, Steven Parker, you're right. I'll be waiting for that "upswing of awesome"!

Coding is hard, it's not supposed to be easy. Keep looking up different resources and maybe one of them will make the concept click. As a software dev I always watched the same concepts from different people to solidify the topics. Sometimes one resource won't make sense but another might, and as you keep looking at things differently you'll begin to understand.

I simplified the code and made important comments without which nothing is clear. I understood how it works but it's easier for me to look at the pyramid of DOOM 😅

function ajaxPromise (url) {
  return new Promise (function (resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onreadystatechange = main;
    xhr.send();

    function main () {
      if(xhr.readyState ===4) {
        if(xhr.status === 200) {
          var employees = JSON.parse(xhr.responseText);
          resolve(employees);
        } else {
          reject(xhr.statusText);
        };
      };
    };
  });
};

var newReq = ajaxPromise('../data/employees.json');
newReq
  .then(function generatListItems (employees) { // employees is resolve value from promise!!!
    var statusHTML = '';
      for (var i=0; i<employees.length; i += 1) {
          if (employees[i].inoffice === true) {
              statusHTML += '<li class="in">';
          } else {
              statusHTML += '<li class="out">';
          }
          statusHTML += employees[i].name;
          statusHTML += '</li>';
      }
      return statusHTML;
}).then(function generateUnorderedList (listItems) { // listItems is a new value from return statusHTML in previous then
    return '<ul class="bulleted">' + listItems +  '</ul>'
}).then(function addEmployeesToPage(unorderedList) { // unorderedList is a new value '<ul class="bulleted">' + listItems +  '</ul>' in previous then
    document.getElementById('employeeList').innerHTML = unorderedList}
   ).catch(function (e) { // e is reject value from promise!!!
      alert(e);
}); 

If you don't understand Promises right away, don't get discouraged! Asynchronous programming is hard...in any language. I also think this example makes it much harder because of the outdated XMLHttpRequest usage. It's much easier to understand the newer Fetch API. Here's how I re-wrote getJSON() to be easier to understand, using the Fetch API:

function getJSON(url) {
  const resultPromise = fetch(url)
  .then(function(response) {  
    if (response.ok) {
      return response.json();
    }
    else {
      throw new Error('Unable to load data right now.');      
    }
  })
  .catch(function(error) {
      throw new Error('Unable to load data right now.');    
  });
  return resultPromise;
}

You can see how much simpler the Fetch API is. Notice the code is returning a Promise object so that the promise execution chain can continue in the main code (where getJSON() is called). Then you can catch any errors from getJSON() like this:

function displayError(error) {
  document.getElementById('employeeList').innerHTML = '<p>' + error + '</p>';
}

getJSON('../../data/employees.json').then(generateListItems)
  .then(generateUnorderedList)
  .then(addEmployeesToPage)
  .catch(function(e){
    displayError('Unable to load data right now.');
});

Hope this helps. If you have any comments or suggestions on my rewrite, please post.