Refinement

.vs/ProjectSettings.json

@@ -0,0 +1,3 @@
+{
+  "CurrentProjectSetting": null
+}

.vs/VSWorkspaceState.json

@@ -0,0 +1,6 @@
+{
+  "ExpandedNodes": [
+    ""
+  ],
+  "PreviewInSolutionExplorer": false
+}

.vs/undertune-main/v17/DocumentLayout.json

@@ -0,0 +1,12 @@
+{
+  "Version": 1,
+  "WorkspaceRootPath": "C:\\Users\\216825\\Downloads\\undertune-main (1)\\undertune-main\\",
+  "Documents": [],
+  "DocumentGroupContainers": [
+    {
+      "Orientation": 0,
+      "VerticalTabListWidth": 256,
+      "DocumentGroups": []
+    }
+  ]
+}

home.html

@@ -7,7 +7,11 @@
   <link rel="stylesheet" href="styles.css">
   <img src="undertune.png" alt="UnderTune Logo"> 
   <input type="text" id="artistInput" placeholder="Ready for new art?">
-  <button onclick="searchArtist()">Search</button>
+  <button id="searchButton" onclick="searchArtist()">Search</button>
+  <div id="searchHistory" ><ul id="list"></ul>
+
+
+  </div>
   <div id="result"></div>
 
   <script src="home.js"></script> 

home.js

@@ -1,11 +1,27 @@
-const clientId = '';
-const clientSecret = '';
+const clientId = '24f00698dcae49cd995ddef49ece84fa';
+const clientSecret = '225654b38fe940009eb38e5ddf4bc106';
 let accessToken = '';
 
-const searchArtist = () => {
+var input = document.getElementById("artistInput");
+input.addEventListener("keypress", function(event) {
+    if (event.key==="Enter") {
+        event.preventDefault();
+        document.getElementById("searchButton").click();
+    }
+})
+
+
+
+function searchArtist() {
+
     const artistInput = document.getElementById('artistInput');
     const artistName = artistInput.value;
 
+                  const ul = document.getElementById('list');
+                 ul.append(Object.assign(document.createElement('li'), 
+                  {textContent: artistName}));
+
+
     fetch('https://accounts.spotify.com/api/token', {
         method: 'POST',
         headers: {
@@ -14,59 +30,57 @@ const searchArtist = () => {
         },
         body: 'grant_type=client_credentials'
     })
-    .then(response => response.json())
-    .then(data => {
-        accessToken = data.access_token;
-        const query = encodeURIComponent(artistName);
-        const url = `https://api.spotify.com/v1/search?q=${query}&type=artist`;
-
-        fetch (url, {
-            method: 'GET',
-            headers: {
-                'Authorization': 'Bearer ' + accessToken
-            }
-        })
-
         .then(response => response.json())
-        .then(data => { 
-
-            const bestMatch = data.artists.items[0];
-            const bestMatchId = bestMatch.id;
+        .then(data => {
+            accessToken = data.access_token;
+            const query = encodeURIComponent(artistName);
+            const url = `https://api.spotify.com/v1/search?q=${query}&type=artist`;
 
-            const relatedArtistsUrl = `https://api.spotify.com/v1/artists/${bestMatchId}/related-artists`;
-            fetch(relatedArtistsUrl, {
+            fetch(url, {
                 method: 'GET',
                 headers: {
                     'Authorization': 'Bearer ' + accessToken
                 }
-
-
             })
-            //console.log(bestMatchId)
-            .then(response => response.json())
-            .then (data => {
-                const resultDiv = document.getElementById('result');
-                resultDiv.innerHTML = `<h1>Similar Artists:</h1>`;
 
-                const relatedArtists = data.artists;
-                relatedArtists.sort((a, b) => a.popularity - b.popularity);
-                for (let i = 0; i < relatedArtists.length; i++) {
-                    const artist = relatedArtists[i];
-                    resultDiv.innerHTML += `<h2>${artist.name}</h2>
+                .then(response => response.json())
+                .then(data => {
+
+                    const bestMatch = data.artists.items[0];
+                    const bestMatchId = bestMatch.id;
+
+                    const relatedArtistsUrl = `https://api.spotify.com/v1/artists/${bestMatchId}/related-artists`;
+                    fetch(relatedArtistsUrl, {
+                        method: 'GET',
+                        headers: {
+                            'Authorization': 'Bearer ' + accessToken
+                        }
+                    })
+                        .then(response => response.json())
+                        .then(data => {
+                            const resultDiv = document.getElementById('result');
+                            resultDiv.innerHTML = `<h1>Similar Artists:</h1>`;
+
+                            const relatedArtists = data.artists;
+                            relatedArtists.sort((a, b) => a.popularity - b.popularity);
+                            for (let i = 0; i < relatedArtists.length; i++) {
+                                const artist = relatedArtists[i];
+                                resultDiv.innerHTML += `<h2>${artist.name}</h2>
                                             <p>Popularity: ${artist.popularity}</p>
-                                            <p>Genres: ${artist.genres.join(', ')}</p>`;
-                }
-            })
-            .catch(error => {
-                0
-                console.error('Error:', error);
-            });
+                                            <p>Genres: ${artist.genres.join(', ')}</p>
+                                            <p><a href="${"https://open.spotify.com/intl-de/artist/" + artist.id}">Spotify Link</a></p>`;
+                            }
+                        })
+                        .catch(error => {
+                            0;
+                            console.error('Error:', error);
+                        });
+                })
+                .catch(error => {
+                    console.error('Error:', error);
+                });
         })
         .catch(error => {
             console.error('Error:', error);
         });
-    })
-    .catch(error => {
-        console.error('Error:', error);
-    });
-};
+}