JSFiddle - React, Tailwind, and code Playground

by Graham Fairweather

HTML

<h2>Search for an Artist</h2>
<input type="text" id="formInput" value="Search for an Artist"> </input> <br>
<button id="search" >Submit</button>
<p><textarea id="response" rows="0" cols="45" wrap></textarea></p>
<p id="valueDisplay"> </p>
<h2>Or... Look At All the Music</h2>

<button id="b1" type="button">Get All Albums</button>
<button id="b2" type="button">Get All Albums By Artist</button>
<button id="b3" type="button">Get All By Category</button>
<table border="1">
    <thead>
        <tr>
            <th>Album Title</th>
            <th>Category</th>
            <th>Artist</th>
            <th>Tracks</th>
        </tr>
    </thead>
    <tbody id="albums"></tbody>
</table>

JavaScript

/*jslint sub: true, maxerr: 50, indent: 4, browser: true */
/*global */

(function() {
    "use strict";

    //create variables for my buttons, variable for output, and declare albums array
    var search = document.getElementById("search");
    var b1 = document.getElementById("b1");
    var b2 = document.getElementById("b2");
    var b3 = document.getElementById("b3");
    var b4 = document.getElementById("search");
    var results = document.getElementById("albums");
    var searchResults = document.getElementById("response");

    var albums = [];

    //make a constructor to refrence my albums
    function addAlbum(title, artist, category, tracks) {
        var album = {
            "title": title,
            "artist": artist,
            "category": category,
            "tracks": tracks
        };
        //push album into array
        albums.push(album);
    }
    //add albums
    addAlbum("Electric LadyLand", "Jimi Hendrix", "Classic Rock", [1, 2, 3]);
    addAlbum("The Wall", "Pink Floyd", "Classic Rock", [1, 2, 3]);
    addAlbum("Bootsy", "Bootsy Collins", "Funk", [1, 2, 3]);
    addAlbum("Paul's Boutique", "Beastie Boys", "Rap", [1, 2, 3]);

    //build a function that compares all the album titles
    function compareTitle(a, b) {
        if (a.title < b.title) {
            return -1;
        }

        if (a.title > b.title) {
            return 1;
        }

        return 0;
    }

    //compare all the artists
    function compareArtist(a, b) {
        if (a.artist < b.artist) {
            return -1;
        }

        if (a.artist > b.artist) {
            return 1;
        }

        return 0;
    }

    //compare all the category
    function compareCategory(a, b) {
        if (a.category < b.category) {
            return -1;
        }

        if (a.category > b.category) {
            return 1;
        }

        return 0;
    }

    //function to display albums inner HTML
    function displayAll() {
        results.innerHTML = "";
   ...