UMD-INST377 · jsong073-UMD · Oct 19, 2022 · Nov 11, 2022 · Dec 1, 2022 · Dec 1, 2022
diff --git a/README.md b/README.md
@@ -1,6 +1,10 @@
-# This is your readme
-You are required to fill it in with documentation similar to that found in the Sequelize example for the course as part of your final project.
+# README
 
-### How to use Markdown
-Markdown is a text notation system used in Discord, Whatsapp and similar to structure pages without writing HTML at all. You'll be using it for your documentation.
-* [Markdown guide](https://www.markdownguide.org/cheat-sheet/)
+# Link to our page
+https://gfisk777.github.io/Group1-Project-Base/routes/client/index.html
+
+# Target Browsers
+The main target of our site is people that use the newest versions of MAC and IOS
+
+# Description of Project
+We used the spotify API(https://developer.spotify.com/documentation/web-api/)
diff --git a/client/images/spotify.png b/client/images/spotify.png
diff --git a/client/index.html b/client/index.html
@@ -1,12 +1,76 @@
+<!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Group Project Base</title>
-    <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-    <script src="./script.js"></script>
-</body>
-</html>
+  <head>
+    <title>Group 1 - Garrett Fisk, Jaeha Song</title>
+    <meta charset="UTF-8"/>
+    <meta name="viewport"
+        content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
+      integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
+      crossorigin=""/>
+    <link rel="stylesheet" href="styles.css" />
+    <!-- Make sure you put this AFTER Leaflet's CSS -->
+    <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
+      integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
+      crossorigin=""></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  </head>
+
+      <body>
+        <div class="wrapper">
+          <div class="spotifyimage">
+          <a href="https://open.spotify.com/"><img  src='images/spotify.png' width="225"> </a>
+          </div>
+          <div class="header">
+            <h1>Spotify Song Tracker</h1>
+          </div>
+
+
+          <div class="intro">
+            <h2>On our website you can search and track the top artists that are available on Spotify. You can try typing you favorite songs and artists from spotify and 
+              a list of artists that have have a song by that name name will pop up. You can also type in your favorite artist and a link to that artist and other similar 
+              artists will pop up.You will also be able to see what other people rate the artists that you are interested in. 
+              For example if you were to search "Something in the Orange", artists that have made songs that have that name will pop up and in this case the top artist
+              Zach Bryan. 
+            </h2> 
+          </div>
+      <div class="container">
+        <div class="left_section box">
+          <div class="header">
+            <h3>Aritst Input</h3>
+          </div>
+          <form class="box main_form" action="/api">
+            <div>
+                <label for="resto">Filter Artist List</label>
+                <input type="text" name="resto" id="resto">
+                <small></small>
+            </div>
+            <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
+            <button type="submit" id="get-resto">Change Songs</button>
+        </form>
+
+        <div class="search" id="results"></div>
+
+        </div>
+
+        <div class="right_section box">
+          <div class="header">
+            <h3>Chart of Artists</h2>
+          </div>
+          <!-- <div id="map"></div> -->
+          <div>
+            <canvas id="myChart"></canvas>
+          </div>
+          <div class="box" id="restaurant_list">
+            <p>A list of Artists from api</p>
+          </div>
+        </div>
+      </div>
+
+      <footer class="footer">Group 1 - Garrett Fisk, Jaeha Song</footer>
+    </div>
+
+    <script src="script.js"></script>
+  </body>
+</html>
+
diff --git a/client/script.js b/client/script.js
@@ -0,0 +1,146 @@
+/* eslint-disable max-len */
+/*
+  Hook this script to index.html
+  by adding `<script src="script.js">` just before your closing `</body>` tag
+*/
+
+/*
+  ## Utility Functions
+    Under this comment place any utility functions you need - like an inclusive random number selector
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
+*/
+const apiURL = 'https://api.spotify.com/v1/';
+
+function injectHTML(list, divTarget) {
+  console.log('fired injectHTML');
+  const target = document.querySelector(divTarget);
+  target.innerHTML = '';
+  const listEl = document.createElement('ol');
+  target.appendChild(listEl);
+  list.forEach((item) => {
+    const el = document.createElement('li');
+    const image = document.createElement('img');
+    const anchor = document.createElement('a');
+    image.src = item.images[2].url;
+    anchor.href = item.external_urls.spotify;
+    anchor.innerText = item.name;
+    el.appendChild(image);
+    el.appendChild(anchor);
+    listEl.appendChild(el);
+    // console.log(item.name);
+  });
+}
+
+async function searchArtists(term, token) {
+  const search = encodeURIComponent(term);
+  console.log(search);
+  const url = `${apiURL}search?q=${search}&type=artist&limit=5`;
+  console.log(url);
+  const data = await fetch(url, {
+    headers: {
+      Accept: 'application/json',
+      Authorization: `Bearer ${token}`,
+      'Content-Type': 'application/json'
+    }
+  });
+  const json = await data.json();
+  console.log(json.artists.items);
+  return json.artists; // object containing, among other things, an array of artists
+}
+
+
+// This function retrieves the access token from Spotify
+// Used the "Client Credentials Flow" on Spotify API
+// Problem with Buffer module. Browser doesn't recognize it, but won't let me import it
+// Current workaround for Buffer problem - used an online base64 encoder and manually encoded the client ID and secret key
+async function getAccessToken() {
+  const clientBase64 = 'YzkyNzBhMTIzYjJjNDA4ZmE5ZDc2NmNkMDBlOTY5ZjI6OTc4YmY5YTJmMmVjNDU4NDk2NmFjYzhiN2ZlMDYxNjg=';
+  const url = 'https://accounts.spotify.com/api/token';
+  const myHeaders = new Headers();
+  myHeaders.append('Authorization', `Basic ${clientBase64}`);
+  myHeaders.append('Content-Type', 'application/x-www-form-urlencoded');
+  myHeaders.append('Cookie', '__Host-device_id=AQBrEpG1cy0DhOXDyzabACYbb5SZKeLLWNMCoH4UJHKKW0CVBslV9tFnuaXGti78fRhIEXO512-5ZA35sx_VKqoJRO67Dd80T08; sp_tr=false');
+
+  const urlencoded = new URLSearchParams();
+  urlencoded.append('grant_type', 'client_credentials');
+
+  const requestOptions = {
+    method: 'POST',
+    headers: myHeaders,
+    body: urlencoded,
+    redirect: 'follow'
+  };
+  const reply = await fetch(url, requestOptions);
+  const json = await reply.json();
+  console.log(json.access_token);
+  return json.access_token;
+}
+
+/*
+    This function retrieves a list of artists that are related to the artist ID in the request
+    Need to add a way for users to type in an artist's name and see a list of related artists
+*/
+async function getRelatedArtists(token, id) {
+  const url = `https://api.spotify.com/v1/artists/${id}/related-artists`; // remote URL! you can test it in your browser
+  const data = await fetch(url, {
+    headers: {
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${token}`
+    }
+  }); // We're using a library that mimics a browser 'fetch' for simplicity
+  const json = await data.json(); // the data isn't json until we access it using dot notation
+  console.log(json);
+
+  // getRelatedArtists returns a json containing an array, but only the array is returned
+  return json.artists;
+}
+
+async function mainEvent() {
+  /*
+      ## Main Event
+        Separating your main programming from your side functions will help you organize your thoughts
+        When you're not working in a heavily-commented "learning" file, this also is more legible
+        If you separate your work, when one piece is complete, you can save it and trust it
+    */
+  // the async keyword means we can make API requests
+  const form = document.querySelector('.main_form'); // get your main form so you can do JS with it
+  const submit = document.querySelector('#get-resto'); // get a reference to your submit button
+  const loadAnimation = document.querySelector('.lds-ellipsis'); // get a reference to our loading animation
+  let artists = [];
+  submit.style.display = 'none'; // let your submit button disappear
+
+  const token = await getAccessToken();
+  let chartData;
+
+  submit.style.display = 'block'; // let's turn the submit button back on by setting it to display as a block when we have data available
+
+  // hides loading animation once data has been loaded
+  loadAnimation.classList.remove('lds-ellipsis');
+  loadAnimation.classList.add('lds-ellipsis_hidden');
+
+  form.addEventListener('input', async (event) => { // event bubbling
+    const searchQuery = event.target.value;
+    const searchResults = await searchArtists(searchQuery, token); // json containing an array containing artists
+    artists = searchResults.items;
+
+    injectHTML(artists, '#results');
+  });
+  // And here's an eventListener! It's listening for a "submit" button specifically being clicked
+  // this is a synchronous event event, because we already did our async request above, and waited for it to resolve
+  form.addEventListener('submit', async (submitEvent) => {
+    // This is needed to stop our page from changing to a new URL even though it heard a GET request
+    submitEvent.preventDefault();
+    chartData = await getRelatedArtists(token, artists[0].id);
+    console.log(chartData);
+    console.log(artists[0].id);
+    injectHTML(chartData, '#restaurant_list');
+  });
+}
+
+/*
+    This last line actually runs first!
+    It's calling the 'mainEvent' function at line 57
+    It runs first because the listener is set to when your HTML content has loaded
+  */
+document.addEventListener('DOMContentLoaded', async () => mainEvent()); // the async keyword means we can make API requests