diff --git a/index.js b/index.js
index d48c602..0507735 100644
--- a/index.js
+++ b/index.js
@@ -1,7 +1,98 @@
+var targetjsonFile;
function showDiv(divId) {
// Hide the menu container
+ const jsonFiles = {
+ 'div1': 'rational',
+ 'div2': 'scientific',
+ 'div3':'inspirational',
+ 'div4':'reactions'
+ // Add other mappings for 'div3' and 'div4' if needed
+ };
document.querySelector('.menu-container').style.display = 'none';
+ targetjsonFile = jsonFiles[divId];
+ // Fetch the JSON data
+ // console.log("target: "+targetjsonFile);
+ fetch('./Content/' + targetjsonFile + '.json')
+ .then(response => response.json())
+ .then(data => {
+ // Call function to render the table
+ renderTable(data);
+ })
+ .catch(error => console.error('Error fetching JSON:', error));
+
+
+ // Function to render the table
+ function renderTable(data) {
+ const tableBody = document.querySelector(`.${targetjsonFile} tbody`);
+
+ // Clear any existing content
+ tableBody.innerHTML = '';
+
+ // Loop through the JSON data and create rows
+ data.forEach((item, index) => {
+ const row = document.createElement('tr');
+ const dynamic=item.dynamic;
+row.innerHTML = dynamic==='true' ? `
+ | ${item.id} |
+
+ ${item.title}
+
+ 
+ |
+ ${item.description} |
+ Visit |
+
+
+ 
+ ${item.channelName}
+
+ |
+`: `
+ ${item.id} |
+
+ ${item.title}
+
+
+ |
+ ${item.description} |
+ Visit |
+
+
+
+ ${item.channelName}
+
+ |
+ `;
+
+// Append the row to the table body
+tableBody.appendChild(row);
+
+// Add event listeners for hover effect
+const imgElement = row.querySelector('img');
+
+// On hover, switch to the dynamic thumbnail
+if(dynamic === 'true') {
+imgElement.addEventListener('mouseover', () => {
+ imgElement.src = imgElement.getAttribute('data-dynamic');
+});
+// On mouse out, revert to the static thumbnail
+imgElement.addEventListener('mouseout', () => {
+ imgElement.src = imgElement.getAttribute('data-static');
+})
+}
+ });
+ }
+
+
// Hide all content divs
const divs = document.getElementsByClassName('content-div');
for (let div of divs) {
@@ -90,14 +181,6 @@ window.onload = function() {
showDiv('div1');
};
-
-
-
-// Show the first section by default on page load
-window.onload = function() {
- showDiv('div1');
-
-};
document.addEventListener('DOMContentLoaded', (event) => {
// Wait for 1.3 seconds (1300 milliseconds)
setTimeout(() => {