Add search starter files

8f03b121 · Trevor Austin · c553ddb5 · 8f03b121 · 8f03b121 · 8f03b121
Commit 8f03b121 authored Feb 06, 2021 by Trevor Austin
Showing with 85 additions and 0 deletions
week_4/exercise_4/mood.js
week_4/exercise_4/moodboard.html
week_4/exercise_4/style.css
--- a/week_4/exercise_4/mood.js
+++ b/week_4/exercise_4/mood.js
+BING_ENDPOINT = "https://api.bing.microsoft.com/v7.0/images/search";
+BING_API_KEY = "";
+
+function runSearch() {
+  var request = new XMLHttpRequest();
+  let query = document.querySelector(".search .form input").value
+  console.log(query);
+  var queryurl = BING_ENDPOINT + "?q=" + encodeURIComponent(query);
+
+
+   // open the request
+   try {
+       request.open("GET", queryurl);
+   }
+   catch (e) {
+       renderErrorMessage("Bad request (invalid URL)\n" + queryurl);
+       return false;
+   }
+
+   // add request headers
+   request.setRequestHeader("Ocp-Apim-Subscription-Key", BING_API_KEY);
+   request.setRequestHeader("Accept", "application/json");
+   // var clientid = retrieveValue(CLIENT_ID_COOKIE);
+   // if (clientid) request.setRequestHeader("X-MSEdge-ClientID", clientid);
+
+   // event handler for successful response
+   request.addEventListener("load", handleBingResponse);
+
+   // event handler for erorrs
+   request.addEventListener("error", function() {
+       renderErrorMessage("Error completing request");
+   });
+
+   // event handler for aborted request
+   request.addEventListener("abort", function() {
+       renderErrorMessage("Request aborted");
+   });
+
+   // send the request
+   request.send();
+   return false;
+
+}
+
+function handleBingResponse() {
+  window.location.hash = "results";
+}
+
+function closeSeachPane() {
+  window.location.hash = "";
+}
--- a/week_4/exercise_4/moodboard.html
+++ b/week_4/exercise_4/moodboard.html
+<html>
+<head>
+  <title>Mood Board</title>
+  <link rel="stylesheet" href="style.css"/>
+</head>
+<body>
+  <div class="grid">
+    <h1>Mood Board</h1>
+    <div class="search">
+      <div class="form">
+        <input/>
+        <button onclick="runSearch();">Search</button>
+      </div>
+      <div class="suggestions">
+        <ul>
+          <li>Stuff</li>
+          <li>More stuff</li>
+        </ul>
+      </div>
+    </div>
+    <div id="results" class="results">
+      <a href="#" title="Close the search results pane">X</a>
+      Thing 1
+      Thing 2
+      Thing 3
+    </div>
+  </div>
+  <script src="mood.js">
+  </script>
+</body>
+</html>
--- a/week_4/exercise_4/style.css
+++ b/week_4/exercise_4/style.css
+/* body {
+  margin: auto;
+} */