Add render funciton fo populate parts of speech

index.html

@@ -23,13 +23,13 @@
           <input id="wordPronunciation">
         </label>
         <label>Part of Speech<br>
-          <select id="wordPartOfSpeech"></select>
+          <select id="wordPartOfSpeech" class="part-of-speech-select"></select>
         </label>
         <label>Definition<br>
-          <input id="wordDefinition">
+          <input id="wordDefinition" placeholder="Equivalent words">
         </label>
         <label>Details<a class="label-button">Maximize</a><br>
-          <textarea id="wordDetails"></textarea>
+          <textarea id="wordDetails" placeholder="Markdown formatting allowed"></textarea>
         </label>
       </form>
     </aside>

src/js/render.js

@@ -5,6 +5,7 @@ import { showSection } from './displayToggles';
 
 export function renderAll() {
   renderDictionaryDetails();
+  renderPartsOfSpeechSelect();
   renderWords();
 }
 
@@ -81,6 +82,15 @@ export function renderStats() {
   detailsPanel.innerHTML = numberOfWordsHTML + wordLengthHTML + letterDistributionHTML + totalLettersHTML;
 }
 
+export function renderPartsOfSpeechSelect() {
+  let optionsHTML = '<option value=""></option>';
+  window.currentDictionary.partsOfSpeech.forEach(partOfSpeech => {
+    partOfSpeech = removeTags(partOfSpeech);
+    optionsHTML += `<option value="${partOfSpeech}">${partOfSpeech}</option>`;
+  });
+  Array.from(document.getElementsByClassName('part-of-speech-select')).forEach(select => select.innerHTML = optionsHTML);
+}
+
 export function renderWords() {
   const { words } = window.currentDictionary;
   let wordsHTML = '';