Merge pull request #23 from facn6/css/list

search field updated
facn6 · Jul 31, 2019 · 402e593 · 402e593
2 parents 4bbf5ff + 6828601
commit 402e593
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 18 deletions.
diff --git a/public/app.js b/public/app.js
@@ -1,3 +1,4 @@
+let searchBar = document.getElementById('myInput');
 
 fetch(`${window.location.href}api/assets`)
   .then(data => data.json()).then(({ files }) => {
@@ -6,40 +7,39 @@ fetch(`${window.location.href}api/assets`)
       const textnode = document.createTextNode(file);
       node.className = 'file_li';
       node.appendChild(textnode);
+      node.addEventListener('click', (e) => {
+        searchBar.value = file;
+          })
       document.getElementById('list').appendChild(node);
     });
   });
 
 const transcribe = (filename) => {
   fetch(`${window.location.href}api/transcribe?file=${filename}`)
     .then(data => data.json()).then(({ files }) => {
-      console.log('front end transcription result = ', files);
+
     });
 };
 // transcribe('ameer-test.wav');
 
 function search_audio() {
-  console.log('here1');
-  let input = document.getElementById('myInput').value;
-  input = input.toLowerCase();
+  let input = searchBar.value.toLowerCase();
   const x = document.getElementsByClassName('file_li');
   for (i = 0; i < x.length; i++) {
     if (!x[i].innerHTML.toLowerCase().includes(input)) {
       x[i].style.display = 'none';
-      console.log('here2');
     } else {
       x[i].style.display = 'list-item';
-      console.log('here3');
     }
   }
 }
-document.getElementById('submit').addEventListener('click', (e) => {
-  if (document.getElementById('myInput').value === '') {
-    inputError = 'Please select some value!';
-    document.getElementById('input_error').style.color = 'red';
-    document.getElementById('input_error').innerHTML = inputError;
-  } else {
-    document.getElementById('input_error').innerHTML = '';
-    console.log(document.getElementById('myInput').value);
-  }
-});
+// document.getElementById('submit').addEventListener('click', (e) => {
+//   if (document.getElementById('myInput').value === '') {
+//     inputError = 'Please select some value!';
+//     document.getElementById('input_error').style.color = 'red';
+//     document.getElementById('input_error').innerHTML = inputError;
+//   } else {
+//     document.getElementById('input_error').innerHTML = '';
+//     console.log(document.getElementById('myInput').value);
+//   }
+// });
diff --git a/public/index.html b/public/index.html
@@ -9,11 +9,10 @@
     </head>
  <body>
 
-      <div class="ui-result">
+      <div class="autocomplete">
         <h1 class="title-design">Make Note</h1>
         <h2 class="mini-title">* convert from voice to note* </h2>
         <input id="myInput" onkeyup="search_audio()" type="text" placeholder="audio name" required>
-      <input type="button" id="submit" value="submit"></button>
     </div>
 
       <span class="error"><p id="input_error"></p></span>

diff --git a/public/style.css b/public/style.css
@@ -1,4 +1,23 @@
 
+* { box-sizing: border-box; }
+body {
+  background: rgb(179, 245, 196);
+
+  font: 16px Arial; 
+  justify-content: center;
+}
+.title-design{
+  text-align: center;
+  font-family: Impact;
+  color: rgb(33, 65, 41)
+}
+.mini-title
+{
+
+  text-align: center;
+  font-family: Impact;
+  color: rgb(11, 66, 18)
+}
 #list{ 
   font-size:  1.5em; 
   margin-left: 90px;