Commit d46b7474 authored by Porter Libby's avatar Porter Libby
Browse files

dictionary start

parent df4987b8
var dictionary = {
"first_year_advising": "This is placeholder information for the FIRST YEAR ADVISING block.",
"career_exploration": "This is placeholder information for the CAREER EXPLORATION block.",
"career_community": "This is placeholder information for the CAREER COMMUNITY block.",
"career": [
],
}
\ No newline at end of file
......@@ -7,6 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="public/css/main.css">
<script src="data/careers-data.js"></script>
<script src="data/data.js"></script>
<script src="public/js/searchbar.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"> </script>
</head>
......@@ -16,33 +17,33 @@
Next
</div>
<div class="parent p0" id='p0' style='position: absolute; z-index: 0;'>
<div class="circle div2" onclick='openDetails("First Year Advising",this)'>
<div class="circle div2" onclick='openDetails("first_year_advising",this)'>
<span class='box-header'>First Year Advising</span></br>
<span class='box-prompt'></span>
</div>
<div class="circle div5" onclick='openDetails("Career Exploration", this)'>
<div class="circle div5" onclick='openDetails("career_exploration", this)'>
<span class='box-header'>Career Exploration</span></br>
<span class='box-prompt'></span>
</div>
<div class="circle div8" onclick='openDetails("Career Community", this)'>
<div class="circle div8" onclick='openDetails("career_community", this)'>
<span class='box-header'>Career Community</span></br>
<span class='box-prompt'></span>
</div>
</div>
<div class="parent p1" id='p1' style='position: absolute; z-index: 0;'>
<div class="box div1" onclick='openDetails("Campus Life",this)'>
<div class="box div1" onclick='openDetails("campus_life",this)'>
<span class='box-header'>Campus Life</span></br>
<span class='box-prompt'></span>
</div>
<div class="box div2" onclick='openDetails("Community Engagement", this)'>
<div class="box div2" onclick='openDetails("community_engagement", this)'>
<span class='box-header'>Community Engagement</span></br>
<span class='box-prompt'></span>
</div>
<div class="box div3" onclick='openDetails("Major Selection", this)'>
<div class="box div3" onclick='openDetails("major_selection", this)'>
<span class='box-header'>Major Selection</span></br>
<span class='box-prompt'></span>
</div>
<div class="box div4" onclick='openDetails("Research", this)'>
<div class="box div4" onclick='openDetails("research", this)'>
<span class='box-header'>Research</span></br>
<span class='box-prompt'></span>
</div>
......@@ -50,42 +51,49 @@
<span class='box-header'>Internship</span></br>
<span class='box-prompt'></span>
</div>
<div class="box div6" onclick='openDetails("Off-Campus Study", this)'>
<div class="box div6" onclick='openDetails("off_campus_study", this)'>
<span class='box-header'>Off-Campus Study</span></br>
<span class='box-prompt'></span>
</div>
<div class="box div7" onclick='openDetails("Career", this)'>
<div class="box div7" onclick='openDetails("career", this)'>
<span class='box-header'>Career</span></br>
<span class='box-prompt'></span>
</div>
</div>
<div id='details-container'>
<div id='details-container' style='z-index: 4;'>
<div onclick='closeDetails()' style='width: 100%; height: 100%;'></div>
</div>
</div>
<script>
function openDetails(label, target){
function openDetails(key, target){
console.log(target);
var newDiv = document.createElement("div");
newDiv.className = 'details';
var title = document.createElement("span");
title.className = 'details-title';
title.textContent += label;
title.textContent += key;
newDiv.append(title);
var returnButton = document.createElement('input');
returnButton.className = 'return';
returnButton.setAttribute("type", "button");
returnButton.onclick = function() { closeDetails(); };
newDiv.append(returnButton);
var container = document.getElementById('details-container');
container.style.zIndex = 1;
container.style.zIndex = 4;
container.append(newDiv);
createSearchBar(newDiv);
if (key == "first_year_advising" || key == "career_exploration" || key == "career_community"){
var text = dictionary[key];
newDiv.innerHTML += '</br><span>' + text + '</span>';
}
else if (key == 'career'){
createSearchBar(newDiv);
}
returnButton.onclick = function() { closeDetails(); };
}
function closeDetails() {
console.log('test');
......
......@@ -20,12 +20,16 @@ body {
height: 100%;
position: absolute;
}
.details-container{
position: absolute;
z-index: 3;
}
.details{
height: 85vh;
width: 90vw;
margin: 5vh 5vw;
position: absolute;
z-index: 2;
z-index: 3;
top: 0px;
background-color: var(--detail-color-1);
border-radius: 8px;
......@@ -125,7 +129,7 @@ body {
height: 35px;
padding-top: 15px;
background-color: var(--button-color);
z-index: 3;
z-index: 2;
text-align: center;
cursor: pointer;
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment