beenull/mwmbl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add background colour and hover highlighting

Browse source
This commit is contained in:
Daoud Clarke 2021-12-20 20:55:46 +00:00
parent c22f522c07
commit 2d7bb0efd7
3 changed files with 36 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
static/index.css
View file

@ -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;
}

4
static/index.html
View file

@ -10,9 +10,9 @@
</head>
<body>
<div id="container">
<!-- <form action="/search">-->
<form autocomplete="off">
<input type="search" id="search" name="s" value="" autofocus/>
<!-- </form>-->
</form>
<div id="results"></div>
</div>

30
static/index.js
View file

@ -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);