Skip to content

Commit aea4029

Browse files
LethinkjLethinkj
authored
Add files via upload
1 parent 74c24e4 commit aea4029

File tree

4 files changed

+1145
-0
lines changed

4 files changed

+1145
-0
lines changed

‎index.html

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Course Selection and Roadmap</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<h1>Select Your Course and Domain</h1>
12+
<div>
13+
<label for="courseSelect">Choose a Course:</label>
14+
<select id="courseSelect" onchange="populateDomains()">
15+
<option value="" disabled selected>Select a Course</option>
16+
</select>
17+
</div>
18+
19+
<div>
20+
<label for="domainSelect">Choose a Domain:</label>
21+
<select id="domainSelect" onchange="showRoadmap()">
22+
<option value="" disabled selected>Select a Domain</option>
23+
</select>
24+
</div>
25+
26+
<div id="roadmapContainer">
27+
<h2>Roadmap</h2>
28+
<ul id="roadmap"></ul>
29+
<a id="referenceLink" href="" target="_blank">View Reference</a>
30+
</div>
31+
</div>
32+
33+
<script src="script.js"></script>
34+
</body>
35+
</html>

‎script.js

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
document.addEventListener('DOMContentLoaded', () => {
2+
fetch('test.json') // Adjust this if the JSON file is in a different location
3+
.then(response => response.json())
4+
.then(data => initializePage(data));
5+
});
6+
7+
let courseData = {};
8+
9+
function initializePage(data) {
10+
courseData = data; // Save the JSON data
11+
const courseSelect = document.getElementById('courseSelect');
12+
13+
// Populate the courses dropdown
14+
Object.keys(courseData).forEach(courseKey => {
15+
const option = document.createElement('option');
16+
option.value = courseKey;
17+
option.textContent = courseKey.toUpperCase();
18+
courseSelect.appendChild(option);
19+
});
20+
}
21+
22+
function populateDomains() {
23+
const courseSelect = document.getElementById('courseSelect');
24+
const selectedCourse = courseSelect.value;
25+
const domainSelect = document.getElementById('domainSelect');
26+
domainSelect.innerHTML = '<option value="" disabled selected>Select a Domain</option>'; // Reset domain options
27+
28+
if (selectedCourse && courseData[selectedCourse]) {
29+
const domains = courseData[selectedCourse].domains;
30+
31+
Object.keys(domains).forEach(domainKey => {
32+
const option = document.createElement('option');
33+
option.value = domainKey;
34+
option.textContent = domainKey;
35+
domainSelect.appendChild(option);
36+
});
37+
}
38+
}
39+
40+
function showRoadmap() {
41+
const courseSelect = document.getElementById('courseSelect');
42+
const domainSelect = document.getElementById('domainSelect');
43+
const selectedCourse = courseSelect.value;
44+
const selectedDomain = domainSelect.value;
45+
const roadmapContainer = document.getElementById('roadmap');
46+
const referenceLink = document.getElementById('referenceLink');
47+
48+
roadmapContainer.innerHTML = ''; // Clear previous roadmap
49+
50+
if (selectedCourse && selectedDomain && courseData[selectedCourse].domains[selectedDomain]) {
51+
const roadmap = courseData[selectedCourse].domains[selectedDomain].roadmap;
52+
const reference = courseData[selectedCourse].domains[selectedDomain].reference;
53+
54+
roadmap.forEach(step => {
55+
const listItem = document.createElement('li');
56+
listItem.textContent = step;
57+
roadmapContainer.appendChild(listItem);
58+
});
59+
60+
referenceLink.href = reference;
61+
referenceLink.style.display = 'block';
62+
}
63+
}

‎styles.css

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
margin: 0;
4+
padding: 20px;
5+
background-color: #f4f4f9;
6+
}
7+
8+
.container {
9+
max-width: 600px;
10+
margin: 0 auto;
11+
background: white;
12+
padding: 20px;
13+
border-radius: 10px;
14+
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
15+
}
16+
17+
h1, h2 {
18+
color: #333;
19+
}
20+
21+
label {
22+
display: block;
23+
margin: 10px 0 5px;
24+
}
25+
26+
select {
27+
width: 100%;
28+
padding: 10px;
29+
margin-bottom: 20px;
30+
font-size: 16px;
31+
}
32+
33+
#roadmapContainer {
34+
margin-top: 20px;
35+
}
36+
37+
ul {
38+
list-style-type: none;
39+
padding: 0;
40+
}
41+
42+
li {
43+
background: #e0f7fa;
44+
margin: 5px 0;
45+
padding: 10px;
46+
border-radius: 5px;
47+
}
48+
49+
a {
50+
display: none;
51+
color: #007BFF;
52+
text-decoration: none;
53+
margin-top: 10px;
54+
}
55+
56+
a:hover {
57+
text-decoration: underline;
58+
}

0 commit comments

Comments
 (0)