text: var inputHandle = document.getElementById("githubHandle");
  var btn = document.getElementById("check");
  
  if (
    document.getElementById("githubHandle").value === "" &&
    chrome.storage !== undefined
  ) {
    chrome.storage.sync.get("lastSearched", function(data) {
      var storedHandle = data["lastSearched"];
      if (storedHandle != "" && storedHandle != null) {
        setData(storedHandle);
      }
    });
  }
  
  inputHandle.onkeydown = function(event) {
    if (event.keyCode == 13) {
      btn.click();
    }
  };
  
  document.getElementById("show").onclick = function() {
    document.getElementById("dialog").showModal();
    document.getElementById("overlay").style.visibility = "visible";
  };
  
  document.getElementById("closeBtn").onclick = function() {
    document.getElementById("dialog").close();
    document.getElementById("overlay").style.visibility = "collapse";
  };
  
  btn.onclick = function() {
    var handle = document.getElementById("githubHandle").value;
    var result = document.getElementById("result");
    if (handle != "" && handle != null) {
      result.innerHTML = "Loading...";
      initData(handle);
    } else {
      result.innerHTML = "Please enter a valid Github Username";
    }
  };
  
  function getMessage(total_count) {
    var message = "";
    switch (total_count) {
      case 0:
        return "It's never too late to start! Go and get hacking!";
      case 1:
        return "One down, four to go! Keep going!";
      case 2:
        return "Awesome work! You're almost halfway there!";
      case 3:
        return "Don't stop now, you're closer to the finish line!";
      case 4:
        return "Just one more, give it your best shot!";
      default:
        return "You did it! Congratulations for completing Hacktoberfest 2018!";
    }
  }
  
  function updateMostRecentUsers(user) {
  
    chrome.storage.sync.get("mostRecentUsers", function(data) {
      var mostRecentUsers = data["mostRecentUsers"] || [];
      var hasUser = false;
      if (mostRecentUsers.length > 0) {
        for (var i = 0; i < mostRecentUsers.length; i++) {
          if (mostRecentUsers[i].name === user.name) {
            hasUser = true;
          }
        }
      }
  
      if (!hasUser) {
        mostRecentUsers.push(user);
      }
  
      if (mostRecentUsers.length > 5) {
        mostRecentUsers.shift();
      }
  
      chrome.storage.sync.set({ mostRecentUsers: mostRecentUsers }, function() {
        var html = "";
        for (var i = 0; i < mostRecentUsers.length; i++) {
          html += `<img id='${mostRecentUsers[i].name}' class='rounded' src='${
            mostRecentUsers[i].thumbnail
          }' alt='${mostRecentUsers[i].name}'/>`;
        }
        var parent = document.getElementById("mostRecentUsers");
        parent.addEventListener("click", function(e) {
          setData(e.target.id);
        });
        parent.innerHTML = html;
      });
    });
  }
  
  function setData(handle) {
    document.getElementById("githubHandle").value = handle;
    initData(handle);
  }
  
  function getXHR(url) {
    return new Promise(function(resolve, reject) {
      var req = new XMLHttpRequest();
      req.open("GET", url, true);
      req.onreadystatechange = function() {
        if (this.status === 200 && this.readyState === 4) {
          resolve(JSON.parse(req.responseText));
        }
        if (this.status === 403) {
          document.getElementById("result").innerHTML = "<div id='message' style='margin-top:10px;'>You've hit your limit, try again later.</div>";
          document.getElementById("check").style.visibility = "collapse";
          document.getElementById("show").style.visibility = "collapse";
        }
      };
      req.onerror = function() {
        reject(Error("Network Error"));
      };
      req.send();
    });
  }
  
  function initData(handle) {
    var avatarUrl = "";
  
    getXHR(`https://api.github.com/users/${handle}`)
      .then(function(data) {
        avatarUrl = data.avatar_url;
        return getXHR(
          `https://api.github.com/search/issues?q=author:${handle}+type:pr+created:2018-09-30T00:00:00-12:00..2018-10-31T23:59:59-12:00+is:public`
        );
      })
      .then(function(data) {
        var prCount = data.items.length || 0;
  
        updateMostRecentUsers({ name: handle, thumbnail: avatarUrl });
        chrome.storage.sync.set(
          { lastSearched: handle, thumbnail: avatarUrl },
          function() {
            var res = "";
            res += `<div id='resultHandle'>${handle}s progress:</div>`;
            var count = (prCount > 5 ? "5" : prCount) + " / 5";
            var progress = prCount * 20;
            // res += ``;
            res += `<div class='progress-bar'><div id='prCompleteCount'>${count}</div><div class='progress-bar--color' style='width:${progress}%'></div></div>`
            var message = getMessage(prCount);
            res += `<div id='message'>${message}</div>`;
            document.getElementById("result").innerHTML = res;
  
            var newestPRs = prCount > 4 ? data.items.slice(0, 5) : data.items;
            if (newestPRs.length > 0) {
              var content = "";
              var prs = newestPRs.map((v, i) => {
                return `<li><a target="_blank" href="${v["html_url"]}">#${
                  v["number"]
                } - ${v["title"]}</a></li>`;
              });
              content += `<div id="prList"><h2>Pull requests</h2><ul>${prs.join("")}</ul></div>`;
  
              document.getElementById("dialogContent").innerHTML = content;
              document.getElementById("show").style.visibility = "visible";
            } else {
              document.getElementById("show").style.visibility = "collapse";
            }
          }
        );
      })
      .catch(function(error) {
        console.error(error);
      });
  }
  