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,19 +1,21 @@
 /////// Make the website //////
 
 
-function voices(voices) {
+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) {
+  function links(links) {
     return `
       ${links.map((links) => `<p><a href="${links}">⤴︎</a></p>`).join("")}
     `
-}
+  }
   
-function wordTemplate(word) {
+  function wordTemplate(word) {
     return `
     <div class="${word.properties.join(' ')}">
     <h1 id="${word.title}"class="title">${word.title}</h1>
@@ -21,9 +23,16 @@ function wordTemplate(word) {
     ${links(word.links)}
     </div>
     `
-}
+  }
+  
+  document.getElementById("words").innerHTML = `${glossary.map(wordTemplate).join("")}`
+
+  console.log(glossary)
+
+}); ///// END OF FETCH!!!!!!
+
+
 
-document.getElementById("words").innerHTML = `${glossary.map(wordTemplate).join("")}`