RoshanPaudel/coursefinder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

course finder and course detail page create

Browse Source
This commit is contained in:
RoshanPaudel
2026-02-03 13:36:39 +05:45
parent d9f5894252
commit 22bc7ec6c2
3 changed files with 661 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
coursefinder.html
View File

@@ -26,6 +26,23 @@
</div>
<div class="col-lg-9">
<div class="card">
<h1>Find The Right Design Course For You</h1>
<p class="subtitle">Answer a few questions to get personalized recommendations</p>
<div class="stepper" id="stepper"></div>
<div class="question" id="question"></div>
<select id="select">
<option value="">– Select –</option>
</select>
<input id="textInput" type="text" placeholder=""
style="display:none; width:100%; padding:14px; border-radius:12px; border:1px solid #d1d5db; font-size:16px;" />
<div class="actions">
<button id="next">NEXT</button>
</div>
</div>
<div class="bg-white p-4 rounded-xl shadow-sm mb-4">
<div class="row g-3">
@@ -71,7 +88,7 @@
<div class="container my-4">
<div class="card border-0 shadow rounded-4 overflow-hidden">
<div class="card card1 border-0 shadow rounded-4 overflow-hidden">
<div class="bg-dark text-white p-3">
@@ -92,9 +109,25 @@
<span class="text-danger">(USA)</span>
</div>
<div class="small text-muted mt-1">
Code: BArch • Bachelor • N/A
<div class="small text-muted mt-1 course-info">
<ul class="list bg-light">
<li>
<span class="course-label"><strong>Code:</strong> BArch</span>
</li>
<li>
<span class="course-label"><strong>Level:</strong> Bachelor</span>
</li>
<li>
<span class="course-label"><strong>Duration:</strong> N/A</span>
</li>
</ul>
</div>
</div>
<div class="col-md-4">
@@ -136,13 +169,13 @@
</div>
<div class="bg-light px-4 py-3 d-flex flex-wrap align-items-center justify-content-between">
<div>
<div class="intake">
<span class="fw-semibold me-2">Intake:</span>
<span class="badge bg-primary me-1 p-2">January</span>
<span class="badge bg-primary p-2">January</span>
</div>
<button class="btn btn-dark btn-sm px-4 rounded-pill">
<button class="btn btn-dark btn-sm px-4">
View Details
</button>
</div>
@@ -210,6 +243,120 @@
</div>
</section>
<script>
const steps = [
{ q: 'How proficient are you with visual design?', type: 'select', options: ['Beginner', 'Intermediate', 'Advanced'] },
{ q: 'Do you have UX research experience?', type: 'select', options: ['None', 'Some', 'A lot'] },
{ q: 'What is your career goal?', type: 'select', options: ['Student', 'Career switcher', 'Professional upskilling'] },
{ q: 'Preferred learning format?', type: 'select', options: ['Online', 'Hybrid', 'In-person'] },
{ q: 'Preferred learning course?', type: 'select', options: ['Online', 'Hybrid', 'In-person'] },
{ q: 'What is your budget range?', type: 'input', placeholder: 'Enter your budget' },
{ q: 'Preferred learning format?', type: 'select', options: ['Online', 'Hybrid', 'In-person'] }
];
const stepper = document.getElementById('stepper');
const question = document.getElementById('question');
const select = document.getElementById('select');
const input = document.getElementById('textInput');
const button = document.getElementById('next');
let current = 0;
const answers = [];
function renderStepper() {
stepper.innerHTML = '';
steps.forEach((_, i) => {
const step = document.createElement('div');
step.className = 'step';
const circle = document.createElement('div');
circle.className = 'circle';
circle.textContent = i + 1;
if (i === current) circle.classList.add('active');
if (i < current) circle.classList.add('completed');
step.appendChild(circle);
if (i < steps.length - 1) {
const line = document.createElement('div');
line.className = 'line';
if (i < current) line.innerHTML = '<div class="line-fill"></div>';
step.appendChild(line);
}
stepper.appendChild(step);
});
}
function renderStep() {
renderStepper();
question.textContent = steps[current].q;
select.style.display = 'none';
input.style.display = 'none';
select.value = '';
input.value = '';
button.disabled = true;
button.classList.remove('enabled');
const step = steps[current];
if (step.type === 'select') {
select.style.display = 'block';
select.innerHTML = '<option value="">– Select –</option>';
step.options.forEach(opt => {
const o = document.createElement('option');
o.value = opt;
o.textContent = opt;
select.appendChild(o);
});
}
if (step.type === 'input') {
input.style.display = 'block';
input.placeholder = step.placeholder;
}
button.textContent = current === steps.length - 1 ? 'SEARCH' : 'NEXT';
}
select.addEventListener('change', () => {
if (select.value) {
button.disabled = false;
button.classList.add('enabled');
}
});
input.addEventListener('input', () => {
if (input.value.trim()) {
button.disabled = false;
button.classList.add('enabled');
}
});
button.addEventListener('click', () => {
const step = steps[current];
const value = step.type === 'input' ? input.value : select.value;
if (!value) return;
answers[current] = value;
if (current === steps.length - 1) {
alert(JSON.stringify(answers, null, 2));
return;
}
current++;
renderStep();
});
renderStep();
</script>
<script>
function showTab(tabId, element) {
// Hide all tab content