Added ability to localize based on user's location

docs/index.html

@@ -38,7 +38,7 @@ <h1>
         the planet.
       </h1>
       <p>
-        We have open positions for technical product designers &amp; design leaders in San Francisco, Seattle, and elsewhere.
+        We have open positions for technical product designers &amp; design leaders in San Francisco, Seattle, and <span id='location'>elsewhere</span>.
       </p>
       <p>
         We use PCs, Macs, Figma, Sketch, GitHub, JavaScript, ZEIT, and other modern tools to design, prototype, and build the future
@@ -116,12 +116,14 @@ <h1>
         document.documentElement.dataset.loaded = true
       }, 1000)
     }
-
     addEventListener('load', markDocumentAsLoaded);
 
+
   </script>
   <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js "></script>
   <script src="simon.js "></script>
+  <script src="location.js "></script>
+
 </body>
 
-</html>
+</html>

docs/location.js

@@ -0,0 +1,34 @@
+// Object to store location information based on user's IP
+// elsewhere is the default
+let appData = {
+  city: "",
+  country: "",
+  countryname: "elsewhere"
+};
+
+// Gets user location, sets the appData object, and renders the user's city onto the page
+function getLocation() {
+  const key = YOUR_ACCESS_KEY; // @Microsoft, this line needs to be replaced with your API key for IPStack.
+  const api = `http://api.ipstack.com/24.52.253.12?access_key=${key}`;
+
+  fetch(api)
+    .then(dataWrappedByPromise => dataWrappedByPromise.json())
+    .then(APIdata => {
+      appData.country = APIdata.country_code; // Set the country
+      appData.countryname = APIdata.country_name; // Set the country name
+      appData.city = APIdata.city; // Set the city
+    })
+    .then(detectLocation => {
+      changeLocation();
+    });
+}
+
+// Gets the user's location from the appData object and renders it on-screen
+function changeLocation() {
+  // Check to see that city is not empty, otherwise render user's city on-screen
+  let local = document.getElementById("location");
+  appData.city == "" ? "" : (local.innerHTML = appData.city);
+}
+
+// Run the getLocation function
+getLocation();

example.env

@@ -1,2 +1,3 @@
 # Github access token https://help.github.com/articles/creating-a-personal-access-token-for-the-command-line/
-ACCESS_TOKEN=***************************
+ACCESS_TOKEN=***************************
+LOCATION_KEY=8fa1dab1f671740a6e295f8674fb1ca6