created a featured repository search

assets/js/homepage.js

@@ -2,6 +2,7 @@ var userFormEl = document.querySelector("#user-form");
 var nameInputEl = document.querySelector("#username");
 var repoContainerEl = document.querySelector("#repos-container");
 var repoSearchTerm = document.querySelector("#repo-search-term");
+var languageButtonsEl = document.querySelector("#language-buttons");
 
 var getUserRepos = function (user) {
   // format the github api url.
@@ -76,6 +77,20 @@ var displayRepos = function (repos, searchTerm) {
   }
 };
 
+var getFeaturedRepos = function (language){
+  var apiUrl = "https://api.github.com/search/repositories?q=" + language +"is:featured&sort=help-wanted-issues";
+
+  fetch(apiUrl).then (function (response){
+    if (response.ok){
+      response.json().then (function (data){
+        displayRepos(data.items, language);
+      });
+    } else {
+      alert("Error: Github User Not Found");
+    }
+  });
+};
+
 var formSubmitHandler = function (event) {
   event.preventDefault();
   // get value from input element.
@@ -89,4 +104,15 @@ var formSubmitHandler = function (event) {
   }
 };
 
+var buttonClickHandler = function (event){
+  var language = event.target.getAttribute("data-language");
+  if (language){
+    getFeaturedRepos(language);
+
+    // clear old content
+    repoContainerEl.textContent = "";
+  }
+};
+
 userFormEl.addEventListener("submit", formSubmitHandler);
+languageButtonsEl.addEventListener("click", buttonClickHandler);

assets/js/single.js

@@ -20,7 +20,7 @@ var getRepoName = function () {
 
 var getRepoIssues = function (repo) {
   var apiUrl = "https://api.github.com/repos/" + repo + "/issues?direction=asc";
-  
+
   // make a get request to url.
   fetch(apiUrl).then(function (response) {
     // request was sucessful.

index.html

@@ -41,6 +41,14 @@ <h3 class="card-header text-uppercase">Search By User</h3>
             <button type="submit" class="btn">Get User</button>
           </form>
         </div>
+        <div class="card">
+          <h3 class="card-header text-uppercase">Search By Topic</h3>
+          <div class="card-body" id="language-buttons">
+            <button class="btn" data-language="javascript">JavaScript</button>
+            <button class="btn" data-language="html">HTML</button>
+            <button class="btn" data-language="css" >CSS</button>
+          </div>
+        </div>
       </div>
 
       <div class="col-12 col-md-8">