schaudruc/assignment7.html at master · mumt301/schaudruc · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<html>
    <head>
        <title>Last.fm API Call</title>
        <link rel="stylesheet" href="https://minicss.org/flavorFiles/mini-default.css">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <h1>Type the name of an artist you love</h1>

        <form method="GET">
            <label for="artist">Artist name:</label>
            <input type="text" name="artistName" id="artist">
            <br>
            <input type="submit">
        </form>

        <div id="bioContainer"></div>

        <script type='text/JavaScript'>

            const apiKey = "2a251e83d22408e76b6faeee0cb94d04";

            function queryArtist () {
                let params = (new URL(document.location)).searchParams;
                if (params.has('artistName')) {
                    let artistName = params.get('artistName');
                    console.log(artistName);

                    let queryURL = "http://ws.audioscrobbler.com/2.0" + "?method=" + "artist.getinfo" + "&artist=" + artistName + "&api_key=" + apiKey;
                    console.log(queryURL);

                    httpGet(queryURL, getBioAndImage)
                }
            }

            function httpGet (theURL, cbFunction) {
                let xmlHttp = new XMLHttpRequest();
                xmlHttp.open('GET', theURL);
                xmlHttp.send();
                xmlHttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        cbFunction(this);
                    }
                }
            }

            function getBioAndImage(xhttp) {
                let retrievedData = xhttp.responseXML;
                console.log(retrievedData);
                let artistMBID = retrievedData.getElementsByTagName('mbid')[0].innerHTML;
                console.log(artistMBID);
                let bioContent = retrievedData.getElementsByTagName('content')[0].innerHTML;
                console.log(bioContent);
                let infobox = document.getElementById('bioContainer');
                let bio = document.createElement('p');
                bio.innerHTML = bioContent;
                infobox.appendChild(bio);

                let queryURL2 = "http://ws.audioscrobbler.com/2.0" + "?method=" + "artist.gettopalbums" + "&mbid=" + artistMBID + "&api_key=" + apiKey;
                console.log(queryURL2);

                httpGet(queryURL2, getImage)
            }

            function getImage(xhttp) {
                let retrievedData2 = xhttp.responseXML;
                console.log(retrievedData2);
                let imageURL = retrievedData2.getElementsByTagName('image')[3].innerHTML;
                console.log(imageURL);

                let infobox = document.getElementById('bioContainer');
                let image = document.createElement('img');
                image.src = imageURL;
                infobox.appendChild(image);
            }

            window.onload = queryArtist;
        </script>
    </body>
</html>