course finder and course detail page create
This commit is contained in:
@@ -1,10 +1,151 @@
|
||||
:root {
|
||||
--primary-color: #16a34a;
|
||||
--primary-hover: #15803d;
|
||||
--primary: #6f5bf3;
|
||||
--gray: #e5e7eb;
|
||||
--text: #111827;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
body {
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
background: #f9fafb;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 40px;
|
||||
background-color: #f3f4f6;
|
||||
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
/* max-width: 900px; */
|
||||
border-radius: 24px;
|
||||
padding: 40px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.card.card1{
|
||||
padding: 0px;
|
||||
}
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
text-align: center;
|
||||
color: #555;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.stepper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.step {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.circle {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 5px;
|
||||
border: 2px solid var(--gray);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
background: #fff;
|
||||
color: #999;
|
||||
font-size: 13px;
|
||||
transition: all .3s ease;
|
||||
}
|
||||
|
||||
.circle.active,
|
||||
.circle.completed {
|
||||
border-color: var(--primary);
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.line {
|
||||
height: 4px;
|
||||
flex: 1;
|
||||
background: var(--gray);
|
||||
/* margin: 0 8px; */
|
||||
/* border-radius: 2px; */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.line-fill {
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
background: var(--primary);
|
||||
transition: width .4s ease;
|
||||
}
|
||||
|
||||
.question {
|
||||
font-size: 18px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
select {
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #d1d5db;
|
||||
font-size: 16px;
|
||||
background-position: right 16px center;
|
||||
}
|
||||
|
||||
select {
|
||||
width: 100%;
|
||||
padding: 14px 48px 14px 14px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #d1d5db;
|
||||
font-size: 16px;
|
||||
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 16px center;
|
||||
background-size: 14px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 14px 28px;
|
||||
border-radius: 999px;
|
||||
border: none;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
letter-spacing: .2em;
|
||||
cursor: not-allowed;
|
||||
background: #c7c3fa;
|
||||
color: #fff;
|
||||
transition: background .3s ease;
|
||||
}
|
||||
|
||||
button.enabled {
|
||||
background: var(--primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Primary buttons */
|
||||
@@ -13,22 +154,23 @@
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
}
|
||||
.tab-link {
|
||||
text-decoration: none;
|
||||
color: #6c757d;
|
||||
border-radius: 0.375rem 0.375rem 0 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tab-link:hover {
|
||||
color: inherit;
|
||||
/* background: transparent; */
|
||||
}
|
||||
.tab-link {
|
||||
text-decoration: none;
|
||||
color: #6c757d;
|
||||
border-radius: 0.375rem 0.375rem 0 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tab-active {
|
||||
background-color: var(--primary-color);
|
||||
color: #fff !important;
|
||||
}
|
||||
.tab-link:hover {
|
||||
color: inherit;
|
||||
/* background: transparent; */
|
||||
}
|
||||
|
||||
.tab-active {
|
||||
background-color: var(--primary-color);
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.btn-primary-custom:hover {
|
||||
background-color: var(--primary-hover);
|
||||
@@ -64,4 +206,27 @@
|
||||
|
||||
.rounded-xl {
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
|
||||
select:focus,
|
||||
.form-select:focus,
|
||||
input:focus,
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
/* removes default blue border */
|
||||
box-shadow: none;
|
||||
/* removes focus shadow */
|
||||
border-color: #ced4da;
|
||||
/* optional: reset to normal border color */
|
||||
}
|
||||
|
||||
.list {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
@media(max-width:576px) {
|
||||
.intake {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
330
course-detail.html
Normal file
330
course-detail.html
Normal file
@@ -0,0 +1,330 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Course Finder</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="./asstes/css/style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<section class="container py-4 py-lg-5">
|
||||
<div class="row g-4">
|
||||
<!-- COURSE FINDER TITLE -->
|
||||
<div class="mb-4 text-center">
|
||||
<h3 class="fw-bold mb-2">
|
||||
Find the Right Course for Your Future
|
||||
</h3>
|
||||
<p class="text-muted mb-0">
|
||||
Find and compare international courses that match your academic goals.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-lg-9">
|
||||
|
||||
<!-- BIT COURSE DETAIL CARD -->
|
||||
<div class="card border-0 shadow rounded-4 overflow-hidden mb-4">
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="bg-dark text-white p-4">
|
||||
<h4 class="mb-1 fw-bold">
|
||||
Bachelor of Information Technology (BIT)
|
||||
</h4>
|
||||
<p class="mb-0 small text-light">
|
||||
Full-time · Undergraduate · STEM Program
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- BODY -->
|
||||
<div class="p-4">
|
||||
<div class="row g-4 align-items-center">
|
||||
|
||||
<!-- UNIVERSITY INFO -->
|
||||
<div class="col-md-4 text-center">
|
||||
<img src="./asstes/image/image.png" class="img-fluid mb-3" style="max-height:70px"
|
||||
alt="University Logo">
|
||||
|
||||
<h6 class="fw-semibold mb-1">
|
||||
XYZ University
|
||||
<span class="text-danger">(Australia)</span>
|
||||
</h6>
|
||||
|
||||
<ul class="list-unstyled small bg-light rounded-3 p-3 mt-3">
|
||||
<li><strong>Course Code:</strong> BIT</li>
|
||||
<li><strong>Level:</strong> Bachelor</li>
|
||||
<li><strong>Duration:</strong> 3 Years</li>
|
||||
<li><strong>Intake:</strong> Feb / July</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- ENGLISH REQUIREMENTS -->
|
||||
<div class="col-md-4">
|
||||
<h6 class="fw-semibold mb-3">English Requirements</h6>
|
||||
|
||||
<div class="d-grid gap-2">
|
||||
<div class="d-flex justify-content-between bg-light rounded-pill px-3 py-2">
|
||||
<span>IELTS</span>
|
||||
<span class="badge bg-dark">6.0 (5.5)</span>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-between bg-light rounded-pill px-3 py-2">
|
||||
<span>PTE</span>
|
||||
<span class="badge bg-dark">50 Overall</span>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-between bg-light rounded-pill px-3 py-2">
|
||||
<span>Duolingo</span>
|
||||
<span class="badge bg-dark">95 Overall</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FEES -->
|
||||
<div class="col-md-4">
|
||||
<div class="border rounded-3 p-3 bg-light">
|
||||
<div class="small text-muted">Annual Tuition Fee</div>
|
||||
<div class="fw-bold fs-5">$32,000</div>
|
||||
|
||||
<hr class="my-2">
|
||||
|
||||
<div class="small text-muted">Scholarship Available</div>
|
||||
<div class="fw-semibold text-success">
|
||||
Up to $10,000
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<div class="bg-light px-4 py-3 d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<span class="fw-semibold me-2">Career Outcomes:</span>
|
||||
<span class="badge bg-primary p-2 me-1">Software Developer</span>
|
||||
<span class="badge bg-primary p-2 me-1">IT Analyst</span>
|
||||
<span class="badge bg-primary p-2">System Engineer</span>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-dark px-4">
|
||||
Apply Now
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- COURSE DESCRIPTION -->
|
||||
<div class="card border-0 shadow rounded-4 p-4">
|
||||
<h5 class="fw-bold mb-3">Course Description</h5>
|
||||
|
||||
<p class="text-muted">
|
||||
The <strong>Bachelor of Information Technology (BIT)</strong> is designed to equip
|
||||
students with strong theoretical knowledge and practical skills in modern
|
||||
information technology systems. The program focuses on software development,
|
||||
database systems, networking, cybersecurity, and cloud computing.
|
||||
</p>
|
||||
|
||||
<p class="text-muted">
|
||||
Throughout the course, students gain hands-on experience using industry-standard
|
||||
tools and technologies while working on real-world projects. The curriculum is
|
||||
aligned with current industry demands, ensuring graduates are job-ready and capable
|
||||
of adapting to rapidly evolving IT environments.
|
||||
</p>
|
||||
|
||||
<p class="text-muted mb-0">
|
||||
Graduates of the BIT program can pursue careers as software developers, systems
|
||||
analysts, network engineers, cybersecurity specialists, and IT consultants, or
|
||||
continue their studies at the postgraduate level.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<aside class="col-lg-3">
|
||||
<div class="sticky-box d-flex flex-column gap-4">
|
||||
|
||||
<div class="bg-white rounded-xl shadow-sm p-3">
|
||||
<div class="d-flex border-bottom tab-nav">
|
||||
<a href="javascript:void(0)"
|
||||
class="tab-link flex-fill text-center py-2 fw-semibold tab-active"
|
||||
onclick="showTab('exclusive', this)">Exclusive Courses</a>
|
||||
<a href="javascript:void(0)"
|
||||
class="tab-link flex-fill text-center py-2 fw-semibold text-secondary"
|
||||
onclick="showTab('top', this)">Top Colleges</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="exclusive" class="mt-3">
|
||||
<ul class="list-group list-group-flush small">
|
||||
<li class="list-group-item">MBA in Defence</li>
|
||||
<li class="list-group-item">PG Diploma in Branch Banking</li>
|
||||
<li class="list-group-item">Global Finance and Accounting</li>
|
||||
<li class="list-group-item">Career courses in 2D & 3D Animation</li>
|
||||
<li class="list-group-item">IFBI PGDBO</li>
|
||||
<li class="list-group-item">Courses Programs - IFBI</li>
|
||||
<li class="list-group-item">Alpha Courses</li>
|
||||
<li class="list-group-item">Nutrition Courses</li>
|
||||
<li class="list-group-item">IFBI Media</li>
|
||||
<li class="list-group-item text-center bg-light fw-medium">See All</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="top" class="mt-3 d-none">
|
||||
<ul class="list-group list-group-flush small">
|
||||
<li class="list-group-item">Top College 1</li>
|
||||
<li class="list-group-item">Top College 2</li>
|
||||
<li class="list-group-item">Top College 3</li>
|
||||
<li class="list-group-item">Top College 4</li>
|
||||
<li class="list-group-item">Top College 5</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bg-primary bg-opacity-10 rounded-xl shadow-sm p-3">
|
||||
<h6 class="text-center fw-semibold mb-3">Get Your Free Counselling!</h6>
|
||||
<form class="d-grid gap-2">
|
||||
<input type="text" class="form-control" placeholder="Full Name" required>
|
||||
<input type="tel" class="form-control" placeholder="Phone" required>
|
||||
<input type="email" class="form-control" placeholder="Email" required>
|
||||
<textarea class="form-control" rows="3" placeholder="Message"></textarea>
|
||||
<button class="btn btn-primary-custom fw-semibold">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
const steps = [
|
||||
{ q: 'How proficient are you with visual design?', options: ['Beginner', 'Intermediate', 'Advanced'] },
|
||||
{ q: 'Do you have UX research experience?', options: ['None', 'Some', 'A lot'] },
|
||||
{ q: 'What is your career goal?', options: ['Student', 'Career switcher', 'Professional upskilling'] },
|
||||
{ q: 'Preferred learning format?', options: ['Online', 'Hybrid', 'In-person'] },
|
||||
{ q: 'How soon do you want to start?', options: ['Immediately', '1–3 months', 'Later'] },
|
||||
{ q: 'What is your budget range?', options: ['Free', '$$', '$$$'] }
|
||||
];
|
||||
|
||||
const stepper = document.getElementById('stepper');
|
||||
const question = document.getElementById('question');
|
||||
const select = document.getElementById('select');
|
||||
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';
|
||||
|
||||
const fill = document.createElement('div');
|
||||
fill.className = 'line-fill';
|
||||
|
||||
// ✅ Animate fill correctly
|
||||
fill.style.width = i < current ? '100%' : '0%';
|
||||
|
||||
line.appendChild(fill);
|
||||
step.appendChild(line);
|
||||
}
|
||||
|
||||
stepper.appendChild(step);
|
||||
});
|
||||
}
|
||||
|
||||
function renderStep() {
|
||||
renderStepper();
|
||||
question.textContent = steps[current].q;
|
||||
|
||||
select.innerHTML = '<option value="">– Select –</option>';
|
||||
steps[current].options.forEach(opt => {
|
||||
const o = document.createElement('option');
|
||||
o.value = opt;
|
||||
o.textContent = opt;
|
||||
select.appendChild(o);
|
||||
});
|
||||
|
||||
// ✅ SEARCH on last (6th) question
|
||||
button.textContent =
|
||||
current === steps.length - 1 ? 'SEARCH' : 'NEXT';
|
||||
|
||||
button.disabled = true;
|
||||
button.classList.remove('enabled');
|
||||
}
|
||||
|
||||
select.addEventListener('change', () => {
|
||||
if (select.value) {
|
||||
button.disabled = false;
|
||||
button.classList.add('enabled');
|
||||
}
|
||||
});
|
||||
|
||||
button.addEventListener('click', () => {
|
||||
if (!select.value) return;
|
||||
|
||||
answers[current] = select.value;
|
||||
|
||||
// 🔍 Final search action
|
||||
if (current === steps.length - 1) {
|
||||
alert('Searching courses with:\n' + JSON.stringify(answers, null, 2));
|
||||
return;
|
||||
}
|
||||
|
||||
current++;
|
||||
renderStep();
|
||||
});
|
||||
|
||||
renderStep();
|
||||
</script>
|
||||
<script>
|
||||
function showTab(tabId, element) {
|
||||
// Hide all tab content
|
||||
document.getElementById('exclusive').classList.add('d-none');
|
||||
document.getElementById('top').classList.add('d-none');
|
||||
|
||||
// Show selected tab content
|
||||
document.getElementById(tabId).classList.remove('d-none');
|
||||
|
||||
// Remove active class from all tabs
|
||||
const tabs = document.querySelectorAll('.tab-link');
|
||||
tabs.forEach(tab => {
|
||||
tab.classList.remove('tab-active');
|
||||
tab.classList.add('text-secondary');
|
||||
});
|
||||
|
||||
// Add active class to clicked tab
|
||||
element.classList.add('tab-active');
|
||||
element.classList.remove('text-secondary');
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user