diff --git a/public/index.css b/public/index.css
new file mode 100644
index 0000000..a90f15f
--- /dev/null
+++ b/public/index.css
@@ -0,0 +1,5 @@
+table {
+ border: 1px #E1E3F2 solid;
+ resize: both;
+ overflow: auto;
+}
diff --git a/public/index.html b/public/index.html
index e986e50..b2c3fab 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,59 +2,8 @@
electronic parts database explorer
-
-
+
+
diff --git a/public/partdb.js b/public/partdb.js
new file mode 100644
index 0000000..ff343f9
--- /dev/null
+++ b/public/partdb.js
@@ -0,0 +1,43 @@
+"use strict";
+
+// the last search query
+var last_search = null;
+
+function search()
+{
+ const terms = document.getElementById('terms');
+ if (terms && terms.value && terms.value.length >= 3) {
+ console.log(terms.value);
+ } else {
+ return;
+ }
+
+ last_search = '/search/' + terms.value;
+ let xhr = new XMLHttpRequest();
+ xhr.open('GET', last_search, true);
+ xhr.onload = function() {
+ if (this.responseURL.endsWith(last_search)) {
+ populate(JSON.parse(this.response));
+ }
+ };
+ xhr.onerror = function() {
+ console.log("search call failed");
+ };
+ xhr.send();
+}
+
+function populate(parts)
+{
+ const results = document.getElementById('results');
+ results.innerHTML = null;
+ for (const part of parts) {
+ const tr = document.createElement('tr');
+ for (const key of ["name", "description"]) {
+ const td = document.createElement('td');
+ td.innerHTML = part[key];
+ tr.appendChild(td);
+ }
+ results.appendChild(tr);
+ }
+}
+