put js and css in seperate file
This commit is contained in:
parent
69233fed43
commit
94580ac67b
|
@ -0,0 +1,5 @@
|
||||||
|
table {
|
||||||
|
border: 1px #E1E3F2 solid;
|
||||||
|
resize: both;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
|
@ -2,59 +2,8 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>electronic parts database explorer</title>
|
<title>electronic parts database explorer</title>
|
||||||
<script type='application/javascript'>
|
<script type='application/javascript' src='partdb.js'></script>
|
||||||
"use strict";
|
<link rel='stylesheet' href='index.css'>
|
||||||
|
|
||||||
// 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) {
|
|
||||||
console.log(part);
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
table {
|
|
||||||
border: 1px #E1E3F2 solid;
|
|
||||||
width: 500px;
|
|
||||||
resize: both;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>
|
<div>
|
||||||
|
|
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue