add jwt function

public/css/style.css

@@ -1,11 +1,15 @@
 body {
   font-family: Arial, Helvetica, sans-serif;
+
+
 }
 
 * {
-  box-sizing: border-box
+  box-sizing: border-box;
 }
 
+
+
 input[type=text],
 input[type=email],
 input[type=password] {
@@ -31,7 +35,7 @@ hr {
 
 
 button {
-  background-color:#0000FF;
+  background-color:#ff0054;
   color: white;
   padding: 12px 20px;
   margin: 2px;
@@ -40,14 +44,14 @@ button {
   width: 50%;
   text-align: center;
   margin: 0 auto;
-  display: flex; 
-  justify-content: center; 
+  display: flex;
+  justify-content: center;
   font-weight: bold
 }
 
 button:hover {
   opacity: 0.8;
-  
+
 }
 
 
@@ -73,10 +77,11 @@ form {
 
 .title {
   text-align: center
+  color:#ff0054;
 }
 
 
-  
+
    .isa_success {
     font-size: 30px;
     text-align: center;
@@ -85,33 +90,32 @@ form {
       color: #4F8A10;
       background-color: #DFF2BF;
   }
-  
+
   .isa_success i {
       margin:10px 22px;
       font-size:2em;
       vertical-align:middle;
-  } 
+  }
 
  .isa_success, .isa_error {
     margin: 10px 0px;
     padding:12px;
-     
+
     }
-  
+
 
     .isa_error {
         color: #D8000C;
         background-color: #FFD2D2;
         text-align: center
     }
-    
+
     .isa_success i,  .isa_error i {
         margin:10px 22px;
         font-size:2em;
         vertical-align:middle;
     }
-
     h1{
-      color:#0000FF;
-      text-align:center
-    }
+      text-align: center;
+      color: #ff0054;
+    }

public/css/style2.css

@@ -1,8 +1,22 @@
 
 body {
     text-align: center;
+      background-image: url("raz.jpeg");
+
+  }
+
+  button {
+    color: black;
+    padding: 12px 20px;
+    margin: 2px;
+    border: none;
+    cursor: pointer;
+    width: 20%;
+    text-align: center;
+    margin: 0 auto;
+    float:right;
+    font-weight: bold
   }
-
   label{
     margin-right: 10px;
   }
@@ -14,62 +28,62 @@ body {
   .add-book{
     text-align: center;
   }
-  
+
   h1 {
     padding-bottom: 20px;
     padding-top: 30px;
     text-align: center;
     font-size: 60px;
-    color:  #5b380b;
+    color:  #ff0054;
     font-family: 'Lobster', cursive;
   }
-  
+
   input[type=submit] {
     font-size: 20px;
     margin-top: 30px;
     width: 130px;
     height: 40px;
     border: none;
-    background-color:  #9f6314;
+    background-color:  #ff0054;
     font-weight:bold;
   }
-  
+
   ul, li {
     padding: 0;
     margin: 0;
   }
   ul{
   list-style-type:none;
   }
-  
+
   ul li {
     padding-bottom: 20px;
   }
-  
+
   span {
     display: inline-block;
   width: 25%;
   margin-right: 50px;
   margin-top: 40px;
   }
-  
+
   #reserveBook{
     padding-top: 20px;
   margin-top: 20px;
     padding-bottom: 30px;
-  
+
   }
   ul li:first-child{
     color: #5b380b;
-  
+
     font-weight: bold;
     font-size: 23px;
   background-color: #f1c68e;
   }
   li:nth-child(odd) {
     background-color: #fcf4e8
-  
+
   }
   li:nth-child(even) {
     background-color: #f9e8d2
-  }
+  }

public/js/app.js

@@ -43,12 +43,16 @@ request('GET', '/booksList', null, (err, books) => {
       const bookNameLi = document.createElement('span');
       const authorLi = document.createElement('span');
       const yearLi = document.createElement('span');
+      const button = document.createElement('button');
+
       bookNameLi.textContent = book_name;
       authorLi.textContent = author;
       yearLi.textContent = year;
       li.appendChild(bookNameLi);
       li.appendChild(authorLi);
       li.appendChild(yearLi);
+      li.appendChild(button);
+
       ul.appendChild(li);
     })
     container.replaceChild(ul, container.firstElementChild)