Upgrade

index.html

@@ -45,6 +45,7 @@
         <button id="form" class="btn form-s" onclick="filterSelection('form')">form→  <span class='symbol form-s'>Y</span> </button>
     </div>
     <div id="words" class="words">
+        
     </div>
     </div>
     </body>
@@ -101,6 +102,6 @@ form[i].innerHTML += "<span class='symbol form-s'>Y</span>";
 
 
         </script>
-        <script type="text/javascript" src="glossary.js"></script>
+        <!-- <script type="text/javascript" src="glossary.js"></script> -->
         <script src="main.js"></script>
     </html>

main.js

@@ -1,29 +1,38 @@
 /////// Make the website //////
 
 
-function voices(voices) {
-  return `
-    ${voices.map((voice) => `<p>${voice}</p>`).join("")}
-  `
-}
+fetch("glossary.json").then(response => response.json()).then(data => glossary = data).then(()=>{
+
+  function voices(voices) {
+    return `
+      ${voices.map((voice) => `<p>${voice}</p>`).join("")}
+    `
+  }
+  
+  function links(links) {
+    return `
+      ${links.map((links) => `<p><a href="${links}">⤴︎</a></p>`).join("")}
+    `
+  }
+  
+  function wordTemplate(word) {
+    return `
+    <div class="${word.properties.join(' ')}">
+    <h1 id="${word.title}"class="title">${word.title}</h1>
+    ${voices(word.voices)}
+    ${links(word.links)}
+    </div>
+    `
+  }
+  
+  document.getElementById("words").innerHTML = `${glossary.map(wordTemplate).join("")}`
+
+  console.log(glossary)
+
+}); ///// END OF FETCH!!!!!!
 
-function links(links) {
-  return `
-    ${links.map((links) => `<p><a href="${links}">⤴︎</a></p>`).join("")}
-  `
-}
 
-function wordTemplate(word) {
-  return `
-  <div class="${word.properties.join(' ')}">
-  <h1 id="${word.title}"class="title">${word.title}</h1>
-  ${voices(word.voices)}
-  ${links(word.links)}
-  </div>
-  `
-}
 
-document.getElementById("words").innerHTML = `${glossary.map(wordTemplate).join("")}`