Add synonyms and remove example text

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