diff --git a/static/index.css b/static/index.css index bae1fd3..65a7196 100644 --- a/static/index.css +++ b/static/index.css @@ -1,5 +1,6 @@ html { font-family: Verdana, Geneva, sans-serif; + background: #dcdced; } p { @@ -12,8 +13,8 @@ p { } div { - margin-top: 30px; - margin-bottom: 30px; + margin-top: 15px; + margin-bottom: 15px; } .url { @@ -39,7 +40,8 @@ div { border-width: 4px; border-radius: 50px; - padding-left: 25px; + padding: 10px; + padding-left: 35px; margin-top: 50px; } @@ -49,6 +51,16 @@ a { color: #555555; } +div .result:hover { + background: #f0f0ff; +} + +div .result { + padding: 10px; +} + + + span .term { font-weight: bold; } diff --git a/static/index.html b/static/index.html index e771634..8f1dd41 100644 --- a/static/index.html +++ b/static/index.html @@ -10,9 +10,9 @@
- +
- +
diff --git a/static/index.js b/static/index.js index 99c162f..1ceedaf 100644 --- a/static/index.js +++ b/static/index.js @@ -7,19 +7,26 @@ window.onload = (event) => { searchInput.setSelectionRange(length, length); searchInput.addEventListener('keyup', (e) => { - console.log(searchInput.value); + console.log("Key", e.key); + if (e.key.length == 1 || e.key === 'Backspace') { + console.log(searchInput.value); - const encodedValue = encodeURIComponent(searchInput.value); - fetch('/search?s=' + encodedValue).then(response => { - clearResults(); - console.log(response); - response.json().then(content => { - console.log(content); - content.forEach(element => { - addResult(element.title, element.extract, element.url); - }) + const encodedValue = encodeURIComponent(searchInput.value); + fetch('/search?s=' + encodedValue).then(response => { + clearResults(); + console.log(response); + response.json().then(content => { + console.log(content); + content.forEach(element => { + addResult(element.title, element.extract, element.url); + }) + }); }); - }); + } else if (e.key == 'ArrowDown') { + + } else if (e.key == 'ArrowUp') { + + } }); }; @@ -45,6 +52,7 @@ function addResult(title, extract, url) { par.appendChild(extractText); const div = document.createElement("div"); + div.classList.add('result'); const urlPar = document.createElement("p"); const urlText = document.createTextNode(url);