Added examples

2 files changed, 28 insertions, 1 deletions

diff --git a/app/css/style.css b/app/css/style.css
index 73abc7b..11c0805 100644
--- a/app/css/style.css
+++ b/app/css/style.css
@@ -41,6 +41,7 @@ body {
     color: #bdbdbd;
     text-transform: uppercase;
     padding-left: 5px;
+    user-select: none;
 }
 
 .results {
@@ -51,7 +52,7 @@ body {
 }
 
 .wordType {
-    color: #e2e2e2;
+    color: #ffffff96;
     font-size: 1.5rem;
     margin-bottom: 0px;
 }
@@ -59,4 +60,16 @@ body {
 .definition {
     margin-top: 5px;
     font-size: 2rem;
+    margin-bottom: 20px;
+}
+
+.exampleArea {
+    color: #ffffff96;
+    margin-top: 0px;
+}
+
+.example {
+    font-size: 0.75rem;
+    color: #ffffff96;
+    font-style: italic;
 }
diff --git a/app/scripts/search.js b/app/scripts/search.js
index f7f949c..0da2c91 100644
--- a/app/scripts/search.js
+++ b/app/scripts/search.js
@@ -41,6 +41,20 @@ searchBox.addEventListener('keypress', (e) => {
                 definition.innerHTML = detail.def;
                 definition.className = 'definition';
                 results.appendChild(definition);
+
+                if (detail.exp.length) {
+                    const exampleArea = document.createElement('p');
+                    exampleArea.innerHTML = 'Examples:';
+                    exampleArea.className = 'exampleArea';
+                    results.appendChild(exampleArea);
+                }
+
+                detail.exp.forEach(example => {
+                    const currentExample = document.createElement('p');
+                    currentExample.innerHTML = `${example}`;
+                    currentExample.className = 'example';
+                    results.appendChild(currentExample);
+                });
             });
         });
     }