From 64a871f40f5c917670a462b31e260312be16aa99 Mon Sep 17 00:00:00 2001
From: Camilo G <camilogarcia@145-137-1-180.wlan.hro.nl>
Date: Tue, 7 Jun 2022 19:37:57 +0200
Subject: [PATCH] Upgrade

---
 index.html |  3 ++-
 main.js    | 49 +++++++++++++++++++++++++++++--------------------
 2 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/index.html b/index.html
index 0539d63..5ff1da8 100644
--- a/index.html
+++ b/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>
\ No newline at end of file
diff --git a/main.js b/main.js
index 2f6f939..42b2ab7 100644
--- a/main.js
+++ b/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("")}`