diff --git a/static/js/library.js b/static/js/library.js
new file mode 100644
index 0000000..d241447
--- /dev/null
+++ b/static/js/library.js
@@ -0,0 +1,164 @@
+$(document).ready(function() {
+
+///////URLS/////////////
+
+    // setting up variables that we will use for the url later
+    var existing_path = window.location.href;
+    existing_start = existing_path.indexOf('/?');
+    var address = existing_path.slice(existing_start);
+
+
+    // generating the url with librarian names
+    $(".librarian-names").click(function(event){
+      var theid = $(this).attr('id');
+      var test = "librarian=" + theid;
+      if(address.includes(test)!=true){
+        if(address.slice(address.length - 1)!='/'){
+          address = address + "&librarian=" + theid;
+         } else {
+           address = address + "?librarian=" + theid;
+         }
+         location.href = address;
+      } else {
+          var start = "?librarian=" + theid;
+          var addition = "&librarian=" + theid;
+          if(address.includes(start)==true && address.charAt(start.length+1)=='&'){
+            var begin = address.indexOf(start)+1;
+            address = address.replace(address.substr(begin,start.length),'');
+          } else if(address.includes(start)==true) {
+            address = address.replace(start,'');
+          } else {
+            address = address.replace(addition,'');
+          };
+        location.href = address;
+      };
+    });
+
+    // generating the url with method names
+    $(".nav-button").click(function(event){
+      var theid = $(this).attr('id');
+      var test = "method=" + theid;
+      if(address.includes(test)!=true){
+        if(address.slice(address.length - 1)!='/'){
+          address = address + "&method=" + theid;
+         } else {
+           address = address + "?method=" + theid;
+         }
+         location.href = address;
+      } else {
+          var start = "?method=" + theid;
+          var addition = "&method=" + theid;
+          if(address.includes(start)==true && address.charAt(start.length+1)=='&'){
+            var begin = address.indexOf(start)+1;
+            address = address.replace(address.substr(begin,start.length),'');
+          } else if(address.includes(start)==true) {
+            address = address.replace(start,'');
+          } else {
+            address = address.replace(addition,'');
+          };
+        location.href = address;
+      };
+    });
+/////DISPLAY FILES/////////////
+   $(".file-names").click(function(event){
+
+      // alert(listofselecteddocs);
+      // if classname in listselecteddocs, checkbox is checked;
+
+     var thefile = $(this).text();
+     $.getJSON('{{ url_for('static', filename='js/mergedjson.json') }}', function(test) {
+       $(".name-elements").empty();
+       // iterate in test[i].librarian to find where the name is present
+       //to get the test[i].debris that goes with it
+
+
+       var allpeeps = [];
+       var category = null;
+       for (var i = 0; i < test.length; ++i) {
+         var item = test[i];
+         if(item.debrisname.includes(thefile)){
+           ledocument = item.debrispath;
+           // allpeeps.push(ledocument);
+           var extension = ledocument.replace(/^.*\./, '');
+           // var classname = ledocument.substring(ledocument.lastIndexOf('/')+1);
+           // classname = classname.substr(0, classname.lastIndexOf('.')) || classname;
+           var classname = ledocument;
+           console.log(ledocument);
+
+// check or unchecked checkbox if classname in array
+          var checkboite;
+          if(jQuery.inArray(classname, listofselecteddocs) != -1) {
+              console.log("is in array");
+              checkboite = "<br /><input type='checkbox' class='addtoprint' id='"+classname+"' name='"+classname+"' value='print' checked><label for='"+classname+"'> Add to print</label>";
+            } else {
+              checkboite = "<br /><input type='checkbox' class='addtoprint' id='"+classname+"' name='"+classname+"' value='print'><label for='"+classname+"'> Add to print</label>";
+          }
+
+
+           if ((extension=="jpg") || (extension=="jpeg") || (extension=="png") || (extension=="gif") || (extension=="tiff")) {
+             $(".name-elements").append("<li><img class='listed-images' src='/files/"+ledocument+"'>"+checkboite+"</li>");
+           }
+           else if (extension=="pdf") {
+             $(".name-elements").append("<li><object class='listed-pdf' data='files/"+ledocument+"'/>"+checkboite+"</li>");
+           }
+           else if (extension=="epub") {
+             $(".name-elements").append("<li>"+ledocument+"</li>");
+           }
+           else if ((extension=="mp3") || (extension=="wav") || (extension=="m4a")) {
+             $(".name-elements").append("<li><audio class='listed-audio' controls><source src='files/"+ledocument+"'></audio>"+checkboite+"</li>");
+           }
+           else if ((extension=="mov") || (extension=="mp4")) {
+             $(".name-elements").append("<li><video class='listed-videos' controls><source src='files/"+ledocument+"'></video>"+checkboite+"</li>");
+           }
+           else if ((extension=="odt") || (extension=="docx")) {
+           // something for odt and docx
+             $(".name-elements").append("<li>"+ledocument+"</li>");
+           };
+         };
+         category = item.method;
+       };
+
+     });
+   });
+
+///////////CHECKBOXES////////////////
+
+var listofselecteddocs = [];
+
+$(document.body).on("click", "input[type='checkbox']", function() {
+  var self=$(this);
+  if(self.is(":checked")){
+    theid = self.attr("id");
+    alert("checkbox  id ="+theid +"is checked ");
+    listofselecteddocs.push(theid);
+    alert(listofselecteddocs.length);
+  }else {
+    theid = self.attr("id");
+    alert("id = "+theid +"is Unchecked ");
+    listofselecteddocs = $.grep(listofselecteddocs, function(value) {
+      return value != theid;
+    });
+      alert(listofselecteddocs.length);
+
+    }
+  });
+
+
+//THE SENDING OF THE LIST TO PYTHON ///////////////////
+
+$("#listoffiles").click(function(){
+console.log(listofselecteddocs)
+$.ajax({
+type : 'POST',
+url : "{{url_for('test')}}",
+data : JSON.stringify(listofselecteddocs),
+success: function(response){
+alert("yesss")
+},
+contentType: "application/json",
+    dataType: 'json'
+});
+});
+
+
+ });