library.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Library System</title>
    <link rel="icon" type="image/x-icon" href="books.png">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A Library System">
    <script src="jquery.min.js"></script>
    <script src="papaparse.min.js"></script>
    <style>
      body {
        text-align: center;
        font-family: sans-serif;
      }
      table {
        margin: auto;
        border: collapse;
      }
      th, td {
        width: 100px;
        padding: 0px;
        border: 1px solid black;
        border-bottom: 2px solid black;
      }
      img {
        width: 100px;
      }
    </style>
  </head>
  <body>
    <h1>Library System</h1>
    <p><label for="query">Search: </label><input type="text" id="query"></p>
    <p>Search By: <input type="radio" name="setting" id="title" checked="true"><label for="title">Title</label><input type="radio" name="setting" id="author"><label for="author">Author</label><br><input type="checkbox" id="sort" checked="true"><label for="sort">Sort Alphabeticaly</label></p>
    <button id="search">Search!</button><p></p>
    <table id=results><tbody><tr><td>Search For A Book</td></tr></tbody></table>
    <script>
      $("#search").on("click",function(){$("#results").html("<tbody><tr><td>Loading...</td></tr></tbody>");if(window.navigator.onLine){Papa.parse("https://docs.google.com/spreadsheets/d/e/2PACX-1vRo8TwPNwdVNRBJHfohvdK3DJdxPt9qCwv4oIyq64r617EpIZrKbRoe7WkpcGvfa76ipSU_3Jvst3j-/pub?output=csv",{delimiter: ",",newline: "\r\n",header: true,dynamicTyping: false,skipEmptyLines: true,preview: 0,step: undefined,encoding: "",worker: false,comments: false,complete: function(file){
        var data;
        if ($("#sort").is(":checked")&&$("#title").is(":checked")){data = file.data.sort(function(a,b){if(a.title.toUpperCase()<b.title.toUpperCase().toUpperCase()){return -1;}if(a.title.toUpperCase().toUpperCase().toUpperCase()>b.title.toUpperCase().toUpperCase().toUpperCase().toUpperCase()){return 1;}return 0;});}
        else if ($("#sort").is(":checked")&&$("#author").is(":checked")){data = file.data.sort(function(a,b){if(a.author.toUpperCase()<b.author.toUpperCase()){return -1;}if(a.author.toUpperCase().toUpperCase().toUpperCase().toUpperCase().toUpperCase()>b.author.toUpperCase().toUpperCase().toUpperCase().toUpperCase().toUpperCase().toUpperCase()){return 1;}return 0;});}
        else {data = file.data;}
        var query = $("#query").val().toUpperCase();
        var results = "";
        if($("#title").is(":checked")){
          //Search By Title
          for (var i=0; i<data.length; i++) {
            if (data[i].title.toUpperCase().indexOf(query)>-1){if(data[i].image !== "none"){results+="<tr><td>"+data[i].title+"</td><td>"+file.data[i].author+"</td><td>"+data[i].location+"</td><td><img src=\"https://drive.google.com/uc?export=view&id="+data[i].image+"\"></td></tr>";}else{results+="<tr><td>"+data[i].title+"</td><td>"+file.data[i].author+"</td><td>"+data[i].location+"</td><td>No Image</td></tr>";}}
          }
        }
        else if($("#author").is(":checked")){
          //Search By Author
          for (var i=0; i<data.length; i++) {
            if (file.data[i].author.toUpperCase().indexOf(query)>-1){if(data[i].image !== "none"){results+="<tr><td>"+data[i].title+"</td><td>"+file.data[i].author+"</td><td>"+data[i].location+"</td><td><img src=\"https://drive.google.com/uc?export=view&id="+data[i].image+"\"></td></tr>";}else{results+="<tr><td>"+data[i].title+"</td><td>"+file.data[i].author+"</td><td>"+data[i].location+"</td><td>No Image</td></tr>";}}
          }}
        if (results === "") {
          $("#results").html("<tbody><tr><td>No Results</td></tr></tbody>");
        }
        else {
          $("#results").html("<thead><tr><th>Title</th><th>Author</th><th>Location</th><th>Image</th></tr></thead><tbody>"+results+"</tbody>");
        }
      },error: console.error,download: true});}else{$("#results").html("<tbody><tr><td>No Internet!</td></tr></tbody>");}});
      $("#query").on("keypress",function(e){
        if(e.key === "Enter"){e.preventDefault();$("#search").trigger("click")}
      });
    </script>
  </body>
</html>