My part of Song Recommender Review Ticket

[BobTheFarmer]

Styling

Styling was not a focus of this project, because we did not have much time and wanted to focus on coding and practicing our coding skills. But, we did add some basic styling to our project.

Result Box Styling

        .result {
            display: inline-block;
            background-color: black;
            color: white;
            border-radius: 25px;
            padding: 10px;
            margin: 10px;
            width: 100%;
        }
        .result img {
            vertical-align: middle;
            margin-right: 10px;
        }
        .similar-button {
            border-radius: 10px;
            padding: 10px;
            border: none;
            outline: none;
            cursor: pointer;
            font: oxygen;
        }

This styling code styles the result boxes that are built by jQuery. Here's what that looks like:

Searching styling

        .search {
            border-radius: 10px;
            padding: 10px;
            border: none;
            outline: none;
        }
        .search-button {
            border-radius: 10px;
            padding: 10px;
            border: none;
            outline: none;
            cursor: pointer;
            font: oxygen;
        }

This code styling the search bar and button:

Searching Function

The searching function is made of two parts

1. Searching the API and getting JSON results based on user input
2. Take user input and output JSON data built into jQuery objects

        var searchTerm = $('#search').val();
        $.ajax({
        url: 'https://itunes.apple.com/search?term=' + searchTerm,
        dataType: 'jsonp',
        success: function(data) {

This first part of the code happens when the search button is clicked. It gets the data from the iTunes api based on the search term, then runs the rest of the program on success. The entirety of the program is contained in this success program.

$('#results').empty(); This short piece of code caused a lot of headache. It is very important the results don't stay if you search multiple times.

            // Loop through each result and create an element to display it on the page
            data.results.forEach(function(result) {
            var $result = $('<div class="result"></div>');
            $result.append('<img src="' + result.artworkUrl100 + '">');
            $result.append('<br> <span>' + result.collectionName + '</span><br>');
            $result.append('<span>' + result.artistName + '</span><br>');
            $result.append('<span>' + result.primaryGenreName + '</span><br>');
            // Create a button to find similar results based on the primary genre of this result
            var $findSimilarButton = $('<button class="similar-button">Find Similar Results</button>');

This code uses jQuery, and the data from the api which has been passed on to this function. For every result of the search, the artwork, collection name, artist name, and genre are appended to a new results box. This box has the styling properties from earlier.

A similar button is also added, which will be the button that allows you to find your recommended songs.