diff options
| -rw-r--r-- | app/css/style.css | 14 | ||||
| -rw-r--r-- | app/scripts/search.js | 23 |
2 files changed, 31 insertions, 6 deletions
diff --git a/app/css/style.css b/app/css/style.css index 11c0805..1b86840 100644 --- a/app/css/style.css +++ b/app/css/style.css @@ -73,3 +73,17 @@ body { color: #ffffff96; font-style: italic; } + +.synonym { + color: #ffffff96; + font-size: 1.2rem; +} + +.synonymLink { + color: #ffffff; + cursor: pointer; +} + +.synonymLink:hover { + text-decoration: underline; +} diff --git a/app/scripts/search.js b/app/scripts/search.js index 0da2c91..23479c6 100644 --- a/app/scripts/search.js +++ b/app/scripts/search.js @@ -42,16 +42,27 @@ searchBox.addEventListener('keypress', (e) => { definition.className = 'definition'; results.appendChild(definition); - if (detail.exp.length) { - const exampleArea = document.createElement('p'); - exampleArea.innerHTML = 'Examples:'; - exampleArea.className = 'exampleArea'; - results.appendChild(exampleArea); + if (detail.synonyms.length) { + const synonymText = document.createTextNode('Synonyms: '); + const synonymParagraph = document.createElement('p'); + synonymParagraph.appendChild(synonymText); + + detail.synonyms.forEach(synonym => { + const currentSynonym = document.createElement('a'); + currentSynonym.innerHTML = synonym; + currentSynonym.className = 'synonymLink'; + synonymParagraph.appendChild(currentSynonym); + const spacer = document.createTextNode(' '); + synonymParagraph.appendChild(spacer); + }); + + synonymParagraph.className = 'synonym' + results.appendChild(synonymParagraph); } detail.exp.forEach(example => { const currentExample = document.createElement('p'); - currentExample.innerHTML = `${example}`; + currentExample.innerHTML = example; currentExample.className = 'example'; results.appendChild(currentExample); }); |