adding hints

target/classes/static/css/styles.css

@@ -191,4 +191,23 @@ table { border-collapse: collapse; }
 tr { border: none; }
 td {
 border: none;
-}
+}
+
+button{
+    padding: 5px 14px;
+    border-width: 1px;
+    border-style: solid;
+    background: #32a6cc;
+    color: #fff;
+    transition: all 0.3s ease;
+    font-family: Arial, sans-serif;
+    font-size: 1em;
+    border-radius: 2px;
+}
+
+label { display: block;}
+.hint { display: none; color: gray; font-style: italic; float:right;}
+input:focus + .hint { display: inline; float:right;}
+textarea:focus  + .hint { display: inline; float:right; }
+textarea:focus  + .hint { display: inline; float:right; }
+select:focus  + .hint { display: inline; float:right; }

target/classes/static/js/paggination.js

@@ -14,10 +14,28 @@ var state = {
 }
 
 var myList, data, previousSort;
-  console.log("raz dwa trzy")
 state.querySet = listForPagination;
 buildTable();
 
+
+document.querySelector('#btn-list-1').addEventListener('click', function() {
+  var x = document.getElementById("list-wrapper");
+  if (x.style.display === "none") {
+    x.style.display = "block";
+  } else {
+    x.style.display = "none";
+  }
+  })
+
+document.querySelector('#btn-list-2').addEventListener('click', function() {
+  var x = document.getElementById("advanced-wrapper");
+  if (x.style.display === "none") {
+    x.style.display = "block";
+  } else {
+    x.style.display = "none";
+  }
+  })
+
 for (let i = 3; i >= 0; i--) {
   document.querySelector('#btn-sort-' + i).addEventListener('click', function() {
     addButtonListeners(i)