cleanup

browserAction/index.html

@@ -27,7 +27,7 @@
     </div>
     <div class="more-info">
       <a href="#" id="optionsPage" target="_blank">Settings >></a>
-      <a href="https://www.merriam-webster.com/">More >></a>
+      <a href="#" id="merriam-link">More >></a>
     </div>
     <script src="util.js"></script>
     <script src="script.js"></script>

browserAction/style.css

@@ -3,6 +3,8 @@ body {
   padding: 0px;
   width: 420px;
   font-family: 'Fira Sans', sans-serif;
+  color: #000;
+  background: #fff;
 }
 
 ol {
@@ -22,8 +24,8 @@ a {
   padding: 14px;
   text-align: center;
   font-size: 22px;
-  color: #ffffff;
-  background-color: #305f7a;
+  color: #fff;
+  background: #305f7a;
 }
 
 .key-container {

browserAction/util.js

@@ -39,16 +39,6 @@ const validateKeyword = (keyword) => {
   return hasWhiteSpace(keyword) ? false : true;
 };
 
-function getSubDirectory(audioFile) {
-  const bix = /^bix/;
-  const gg = /^gg/;
-  const number = /^[0-9\W]/;
-  if (bix.test(audioFile)) return 'bix';
-  else if (gg.test(audioFile)) return 'gg';
-  else if (number.test(audioFile)) return 'number';
-  else return audioFile.charAt(0);
-}
-
 async function checkCache(keyword) {
   // fetching recentWords from LocalStorage
   let store = {};
@@ -85,6 +75,16 @@ async function setCache(keyword, response, hasHomograph) {
   LocalStorage.set(store);
 }
 
+function getSubDirectory(audioFile) {
+  const bix = /^bix/;
+  const gg = /^gg/;
+  const number = /^[0-9\W]/;
+  if (bix.test(audioFile)) return 'bix';
+  else if (gg.test(audioFile)) return 'gg';
+  else if (number.test(audioFile)) return 'number';
+  else return audioFile.charAt(0);
+}
+
 function setAudio(response) {
   let soundButton = document.getElementById('sound-btn');
   // make btn visible
@@ -109,6 +109,9 @@ function setDefinition(response, hasHomograph) {
   let pos = document.getElementById('pos');
   let resultText = document.getElementById('text-result');
   resultText.classList.remove('spacer');
+  let moreInfo = document.getElementById('merriam-link');
+  const merriamLink = 'https://www.merriam-webster.com/dictionary/';
+  moreInfo.setAttribute('href', merriamLink+keyword.innerHTML);
 
   let actualWord = response[0].meta.id;
   let partOfSpeech = response[0].fl;

options/options.html

@@ -34,12 +34,12 @@
         Choose Theme:
         <label class="radio-container"
           >Light
-          <input type="radio" name="theme" value="light" checked="checked" />
+          <input type="radio" id="light-theme" name="theme" value="light" checked="checked" />
           <span class="checkmark"></span>
         </label>
         <label class="radio-container"
           >Dark
-          <input type="radio" name="theme" value="dark" />
+          <input type="radio" id="dark-theme" name="theme" value="dark" />
           <span class="checkmark"></span>
         </label>
       </div>

options/options.js

@@ -1,9 +1,6 @@
 
 const commandName = '_execute_browser_action';
 
-/**
- * Update the UI: set the value of the shortcut textbox.
- */
 async function updateUI() {
   let commands = await browser.commands.getAll();
   for (command of commands) {
@@ -13,31 +10,19 @@ async function updateUI() {
   }
 }
 
-/**
- * Update the shortcut based on the value in the textbox.
- */
 async function updateShortcut() {
   await browser.commands.update({
     name: commandName,
     shortcut: document.querySelector('#shortcut').value
   });
 }
 
-/**
- * Reset the shortcut and update the textbox.
- */
 async function resetShortcut() {
   await browser.commands.reset(commandName);
   updateUI();
 }
 
-/**
- * Update the UI when the page loads.
- */
 document.addEventListener('DOMContentLoaded', updateUI);
 
-/**
- * Handle update and reset button clicks
- */
 document.querySelector('#update').addEventListener('click', updateShortcut)
 document.querySelector('#reset').addEventListener('click', resetShortcut)