Skip to content

Commit

Permalink
Merge pull request #8 from aztec-quantum/roadmap
Browse files Browse the repository at this point in the history 
Roadmap - Expanding Elements
  • Loading branch information
@TannerTorrey3
TannerTorrey3 authored Jan 17, 2024
2 parents 051f81b + 85f712f commit 361e4c8
Show file tree
Hide file tree
Showing 5 changed files with 94 additions and 36 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
"main": "server.js",
"scripts": {
"test": "test",
"start": "nodemon --save-dev server.js"
"start": "nodemon server.js"
},
"repository": {
"type": "git",
Expand Down
31 changes: 16 additions & 15 deletions public/assets/json/roadmap.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
"date": "2/7",
"purpose": "Understand the basics of quantum information theory",
"tagscontainer": {
"tags": []
"tags": ["Python", "Quantum Information", "Quantum Circuits"]
},
"resourcescontainer": {
"resources": []
Expand All @@ -31,7 +31,7 @@
"date": "2/14",
"purpose": "Build a foundation in Quantum Gate Model and Using Quantum Circuits",
"tagscontainer": {
"tags": []
"tags": ["Quantum Information", "Quantum Circuits", "Gate Model"]
},
"resourcescontainer": {
"resources": []
Expand All @@ -43,7 +43,7 @@
"date": "2/21",
"purpose": "Building Quantum Circuits using the Quantum Gate Model",
"tagscontainer": {
"tags": []
"tags": ["Gate Model", "Logic Gates", "Quantum Information"]
},
"resourcescontainer": {
"resources": []
Expand All @@ -55,7 +55,7 @@
"date": "2/28",
"purpose": "Understand the gate model and it’s applications ",
"tagscontainer": {
"tags": []
"tags": ["Gate Model", "Logic Gates", "Boolean Expressions", "Quantum Information", "Dynamic Circuits"]
},
"resourcescontainer": {
"resources": []
Expand All @@ -67,7 +67,7 @@
"date": "3/6",
"purpose": "Introduce entangled qubit pairs and how entanglement is used in quantum algorithms",
"tagscontainer": {
"tags": []
"tags": ["Gate Model", "Quantum Algorithms", "Bell’s States"]
},
"resourcescontainer": {
"resources": []
Expand All @@ -79,7 +79,7 @@
"date": "3/13",
"purpose": "Understand how quantum teleportation is implemented and the broader implications of the algorithm",
"tagscontainer": {
"tags": []
"tags": ["Quantum Teleportation", "Quantum Algorithms"]
},
"resourcescontainer": {
"resources": []
Expand All @@ -91,7 +91,8 @@
"date": "3/20",
"purpose": "Introduce Dynamic Circuits, Introduce a Famous quantum algorithm and understand it’s applications",
"tagscontainer": {
"tags": []
"tags": ["Dynamic Circuits", "Quantum Circuits", "Python",
"Shor’s Algorithm", "Grover’s Algorithm", "Quantum Algorithms"]
},
"resourcescontainer": {
"resources": []
Expand All @@ -103,7 +104,7 @@
"date": "3/27",
"purpose": "Introduce Quantum Errors and explore ways to properly handle errors",
"tagscontainer": {
"tags": []
"tags": ["Quantum Errors", "Error Correction Techniques", "Quantum Hardware"]
},
"resourcescontainer": {
"resources": []
Expand All @@ -115,7 +116,7 @@
"date": "4/3",
"purpose": "A deeper look into Quantum Errors. Understand the difference between error mitigation, error correction, and error suppression",
"tagscontainer": {
"tags": []
"tags": ["Quantum Errors", "Error Mitigation", "Error Correction", "Error Suppression", "Quantum Algorithms", "Quantum Hardware"]
},
"resourcescontainer": {
"resources": []
Expand All @@ -127,7 +128,7 @@
"date": "4/10",
"purpose": "Learn how to design and develop a quantum circuit",
"tagscontainer": {
"tags": []
"tags": ["Quantum Circuits", "Quantum Information", "Python", "Quantum Utility", "Quantum Applications"]
},
"resourcescontainer": {
"resources": []
Expand All @@ -139,7 +140,7 @@
"date": "4/17",
"purpose": "Learn the basics of Quantum Algorithm Creation",
"tagscontainer": {
"tags": []
"tags": ["Quantum Algorithms", "Python", "Dynamic Circuits"]
},
"resourcescontainer": {
"resources": []
Expand All @@ -151,7 +152,7 @@
"date": "4/24",
"purpose": "Look into Quantum Algorithm Design and Development",
"tagscontainer": {
"tags": []
"tags": ["Quantum Algorithms", "Python", "Dynamic Circuits"]
},
"resourcescontainer": {
"resources": []
Expand All @@ -163,7 +164,7 @@
"date": "5/1",
"purpose": "Develop an Open Source Quantum Algorithm",
"tagscontainer": {
"tags": []
"tags": ["Quantum Software Engineering", "Software Engineering"]
},
"resourcescontainer": {
"resources": []
Expand All @@ -175,7 +176,7 @@
"date": "5/8",
"purpose": "Develop an Open Source Quantum Algorithm",
"tagscontainer": {
"tags": []
"tags": ["Quantum Software Engineering", "Software Engineering"]
},
"resourcescontainer": {
"resources": []
Expand All @@ -187,7 +188,7 @@
"date": "5/15",
"purpose": "Develop an Open Source Quantum Algorithm",
"tagscontainer": {
"tags": []
"tags": ["Quantum Software Engineering", "Software Engineering"]
},
"resourcescontainer": {
"resources": []
Expand Down
50 changes: 30 additions & 20 deletions public/scripts/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,62 +85,72 @@ function renderRoadmap(roadmapData) {
const roadmap = document.createElement('ul');
roadmap.classList.add('roadmap');
for (const node of roadmapData.roadmap['roadmap-nodes']) {
roadmap.appendChild(createRoadmapItem(node.date, node.title, node.description));
roadmap.appendChild(createRoadmapItem(node));
}

const roadmapContainer = document.getElementById('roadmap');
roadmapContainer.appendChild(roadmap);
}

function createRoadmapItem(date, title, desc){
item = document.createElement('li');
function createRoadmapItem(node){
let item = document.createElement('li');
item.classList.add('roadmap-node');
item.appendChild(createRoadmapTitle(title));
item.appendChild(createRoadmapDate(date));
item.appendChild(createRoadmapDesc(desc));
item.onclick = function(){
if(item.children.length == 3){
let tags = createTagContainer(node.tagscontainer['tags'])
item.appendChild(tags)
let purp = createRoadmapPurpose(node.purpose);
item.appendChild(purp);
}
else{
while(item.children.length > 3){item.removeChild(item.lastChild);}
}
}
item.appendChild(createRoadmapTitle(node.title));
item.appendChild(createRoadmapDate(node.date));
item.appendChild(createRoadmapDesc(node.description));
return item;
}

function createRoadmapDate(date){
dateElem = document.createElement('h3');
let dateElem = document.createElement('h3');
dateElem.classList.add('node-date');
dateElem.innerText = date;
return dateElem;
}

function createRoadmapTitle(title){
titleElem = document.createElement('h3');
let titleElem = document.createElement('h3');
titleElem.classList.add('node-text');
titleElem.innerText = title;
return titleElem;
}

function createRoadmapDesc(desc){
descElem = document.createElement('p');
let descElem = document.createElement('p');
descElem.classList.add('node-desc');
descElem.innerText = desc;
return descElem;
}

function createRoadmapPurpose(purpose){
purposeElem = document.createElement('p');
let purposeElem = document.createElement('p');
purposeElem.classList.add('node-purp');
purposeElem.innerText = purpose;
return purposeElem;
}

function createTagContainer(){
tagsContainer = document.createElement('ul');
function createTagContainer(tags){
let tagsContainer = document.createElement('ul');
tagsContainer.classList.add('tags-container');
tagsContainer.appendChild(createTags());
for(const tag in tags){
let tagElem = document.createElement('li');
tagElem.innerText = tags[tag];
tagElem.classList.add('tag')
tagsContainer.appendChild(tagElem)
}
return tagsContainer;
}
function createTags(){
tags = document.createElement('li');
tags.classList.add('node-tag');
tags.innerText = "test";
return tags;
}

function createResourcesContainer(){
resourcesContainer = document.createElement('ul');
resourcesContainer.classList.add('resources-container');
Expand Down
Empty file removed public/scripts/roadmap.js
View file
Empty file.
47 changes: 47 additions & 0 deletions public/styles/home.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -465,4 +465,51 @@ span:nth-child(4){
right:0;
left:initial;
animation-duration: 3.5s;
}

.tag {
background: #000000;
border-radius: 3px 0 0 3px;
color: #ffffff;
display: inline-block;
height: 26px;
line-height: 26px;
padding: 0 20px 0 23px;
position: relative;
margin: 0 10px 10px 0;
text-decoration: none;
transition: color 0.2s;
-webkit-transition: color 0.2s;
}

.tag::before {
background: #575050;
border-radius: 10px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
content: '';
height: 6px;
left: 10px;
position: absolute;
width: 6px;
top: 10px;
}

.tag::after {
background: #fff;
border-bottom: 13px solid transparent;
border-left: 10px solid #eee;
border-top: 13px solid transparent;
content: '';
position: absolute;
right: 0;
top: 0;
}

.tag:hover {
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
}

.tag:hover::after {
border-left-color: rgb(6, 6, 6);
}

0 comments on commit 361e4c8

Please sign in to comment.