update main

public/assets/json/research.json

@@ -2,6 +2,32 @@
     "research": {
         "research-nodes": [
             {
+<<<<<<< HEAD
+                "title": "Wireless Network Relay Selection: Utilizing a Quantum Algorithm",
+                "publication": "In Progress",
+                "authors": "Tanner Kocher, Sam Braude, Dr. Krishna Ramamoorthy",
+                "description": "",
+                "links-container": {
+                    "links": []
+                }
+            },
+            {
+                "title": "",
+                "publication": "In Progress",
+                "authors": "Tanner Kocher",
+                "description": "",
+                "links-container": {
+                    "links": []
+                }
+            },
+            {
+                "title": "Wireless Network Relay Selection: Utilizing a Quantum Algorithm",
+                "publication": "In Progress",
+                "authors": "Sam Braude, Riley Thompson",
+                "description": "",
+                "links-container": {
+                    "links": []
+=======
                 "title": "Quantum Research Test",
                 "description": "This is an example",
                 "date": "1/20",
@@ -23,6 +49,7 @@
                 },
                 "resourcescontainer": {
                     "resources": []
+>>>>>>> 5fde6ae (Added a research page with the format from roadmap)
                 }
             }
         ]

public/assets/json/roadmap.json

@@ -10,7 +10,19 @@
                     "tags": ["Quantum Information","Python"]
                 },
                 "resourcescontainer": {
-                    "resources": []
+                    "resources": ["https://qiskit.org/textbook/preface.html","https://www.youtube.com/embed/pQsdygaYcE4?si=JMQGiqlvfiCAjueg"]
+                }
+            },
+            {
+                "title": "Hello Quantum",
+                "description": "This lab will lay the foundation for using Qiskit and learning about the Gate Model in quantum computing. Participants will start with basic concepts in Quantum Information and Python programming.",
+                "date": "1/31",
+                "purpose": "Lay a foundation for using Qiskit and learning Gate Model of Quantum Computation",
+                "tagscontainer": {
+                    "tags": ["Quantum Information","Python"]
+                },
+                "resourcescontainer": {
+                    "resources": ["https://qiskit.org/textbook/preface.html","https://www.youtube.com/embed/pQsdygaYcE4?si=JMQGiqlvfiCAjueg"]
                 }
             },
             {

public/scripts/index.js

@@ -14,6 +14,11 @@ function switchPage(id){
     }
     if(id == 'research'){
         if(document.getElementById('research').children.length == 2)fetchResearchJSON();
+
+        if(document.getElementById('research').children.length == 0)fetchResearchJSON();
+
+        if(document.getElementById('research').children.length == 2)fetchResearchJSON();
+
     }
     else{
         document.getElementById('main').classList.remove('home')
@@ -35,14 +40,15 @@ window.onload = function(){
 
 // Handle about change slide carousel
 document.addEventListener("DOMContentLoaded", function () {
-    const carouselContainer = document.querySelector(".about-carousel");
     const slides = document.querySelectorAll(".about-carousel-slide");
-
+    
     let currentIndex = 0;
 
     function showSlide(index) {
         slides.forEach((slide, i) => {
+
             slide.style.transform = `translateX(-${index * 100}%)`;
+            slide.style.transitionDuration = "0.5s";
         });
     }
 
@@ -103,16 +109,31 @@ function createResearchItem(node){
     item.classList.add('research-node');
     item.onclick = function(){
         if(item.children.length == 3){
+
+            //let desc = createResearchPurpose(node.description);
+            //item.appendChild(desc);
+            //let links = createLinksContainer(node.linkscontainer['links'])
+            //if(links.children.length > 0)item.appendChild(links); 
+            //Uncomment when research data is ready
+
             let tags = createTagContainer(node.tagscontainer['tags'])
             item.appendChild(tags)
             let purp = createResearchPurpose(node.purpose);
             item.appendChild(purp);
+
         }
         else{
             while(item.children.length > 3){item.removeChild(item.lastChild);}
         }
     }
     item.appendChild(createResearchTitle(node.title));
+
+    item.appendChild(createResearchAuthors(node.authors));
+    item.appendChild(createResearchDesc(node.publication));
+    return item;
+}
+function createResearchAuthors(date){
+    let dateElem = document.createElement('h4');
     item.appendChild(createResearchDate(node.date));
     item.appendChild(createResearchDesc(node.description));
     return item;
@@ -144,7 +165,6 @@ function createResearchPurpose(purpose){
     purposeElem.innerText = purpose;
     return purposeElem;
 }
-// TODO: there should be a way to reuse the same functions for roadmap and research, and other pages. To promote portability, rename them renderNodes instead of roadmap and research.....
 
 
 
@@ -180,18 +200,19 @@ function createRoadmapItem(node){
     let item = document.createElement('li');
     item.classList.add('roadmap-node');
     item.onclick = function(){
-        if(item.children.length == 3){
+        if(item.children.length == 2){
             let tags = createTagContainer(node.tagscontainer['tags'])
             item.appendChild(tags)
             let purp = createRoadmapPurpose(node.purpose);
             item.appendChild(purp);
+            let resources = createResourcesContainer(node.resourcescontainer['resources']);
+            item.appendChild(resources);
         }
         else{
-            while(item.children.length > 3){item.removeChild(item.lastChild);}
+            while(item.children.length > 2){item.removeChild(item.lastChild);}
         }
     }
-    item.appendChild(createRoadmapTitle(node.title));
-    item.appendChild(createRoadmapDate(node.date));
+    item.appendChild(createRoadmapTitle(node.title, node.date));
     item.appendChild(createRoadmapDesc(node.description));
     return item;
 }
@@ -202,10 +223,10 @@ function createRoadmapDate(date){
     return dateElem;
 }
 
-function createRoadmapTitle(title){
+function createRoadmapTitle(title, date){
     let titleElem = document.createElement('h3');
     titleElem.classList.add('node-text');
-    titleElem.innerText = title;
+    titleElem.innerText = title + " - " + date;
     return titleElem;
 }
 
@@ -235,14 +256,36 @@ function createTagContainer(tags){
     return tagsContainer;
 }
 
-function createResourcesContainer(){
-    resourcesContainer = document.createElement('ul');
+function createResourcesContainer(resources){
+    let resourcesContainer = document.createElement('ul');
     resourcesContainer.classList.add('resources-container');
-    resourcesContainer.appendChild(createResources());
+    let resourcesHeader = document.createElement('h3');
+    resourcesHeader.innerText = 'Resources';
+    resourcesContainer.appendChild(resourcesHeader);
+    for(const resource in resources){
+        let resourceElem = document.createElement('li');
+        resourceElem.classList.add('resource-node')
+        if(resources[resource].includes("https://www.youtube.com")){
+            let resourceNode = document.createElement('iframe');
+            resourceNode.src = resources[resource];
+            resourceNode.allow = "fullscreen"
+            resourceNode.classList.add('resource-node')
+            resourceElem.appendChild(resourceNode)
+        }
+        else{
+            let resourceNode = document.createElement('a');
+            resourceNode.href = resources[resource];
+            resourceNode.target = "_blank"
+            resourceNode.rel = "noopener noreferrer"
+            resourceNode.innerText = resources[resource];
+            resourceElem.appendChild(resourceNode)
+        }
+
+
+
+        resourcesContainer.appendChild(resourceElem)
+    }
     return resourcesContainer;
-}
-function createResources(){
-
 }
 /**<ul class="roadmap">
                 <li class="roadmap-node">