sounds.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Creative Project</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="style.css" rel="stylesheet">
        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        <script>


            $(document).ready(function(){
                //Hide the tracks div
                $(function(){
                    $("#tracks").hide();
                })
                $("#submitButton").click(function(e){
                    //Show the tracks div
                    $("#tracks").show();
                    var value = $("#searchField").val();
                    e.preventDefault();
                    var url = "http://ws.audioscrobbler.com/2.0/?method=track.search&track="+value+"&api_key=fcfabdc7660f5e5a2ea8778917804f24&format=json"
                    $.getJSON(url, function(data){
                        var trackList = document.createElement("ul");
                        for(var i=0; i<data.results.trackmatches.track.length; i++){
                            var item = document.createElement("li");
                            var div = document.getElementById("tracks");
                            var trackName = data.results.trackmatches.track[i].name;
                            if(trackName.length > 45){
                                trackName = trackName.substring(0, 24)+"...";
                            }
                            var trackUrl = data.results.trackmatches.track[i].url;
                            var artist = data.results.trackmatches.track[i].artist;
                            if(artist.length>35){
                                artist = artist.substring(0,24)+"...";
                            }
                            item.innerHTML = `<a href="${trackUrl}">${trackName} - ${artist}</a> <br>`
                            trackList.appendChild(item);
                        }
                        if(data.results.trackmatches.track.length === 0){
                            var noItems = document.createElement("li");
                            noItems.innerHTML = "No Results";
                            trackList.appendChild(noItems);
                        }
                        $("#tracks").html(trackList);
                    });

                    $('html, body').animate({
                        scrollTop: $("#tracks").offset().top
                     }, 2000);
                    
                })
            })

            var divver = document.getElementById("topContainer");
            var headphones = divver.style.backgroundImage;
            headphones = $("#pulser");
        </script>

    </head>
    <body>
    
    <div id="topContainer">
        <img id="headphones" src="http://www.pngall.com/wp-content/uploads/2016/04/Headphones.png" alt="headphones">
        <h1 id="welcome">Track Finder</h1>
        <h3 id="slogan">Find your favorite songs from <img id="lastfmLogo" src="https://home-assistant.io/images/supported_brands/lastfm.png" alt="last fm logo"> </h3>

        <form>
            <input type="text" placeholder="Enter track name or keyword" id="searchField">
            <input type="submit" value="Search Track" id="submitButton">
        </form> 
    </div>
    <br>
        <div id="tracks"></div>
    </p>
    </body>
</html>

<!--Application name: Get sounds
API key:	fcfabdc7660f5e5a2ea8778917804f24
Shared secret:	8f89927ccc58a20629370cd518022454
Registered to:	maxrbassett->