Mini Project – Interactive FAQ
আজকের পর্বে আমরা তৈরি করবো একটি ইন্টার্যাকটিভ FAQ (Frequently Asked Questions) সেকশন। ওয়েবসাইটে ইউজারদের প্রশ্ন ও উত্তর সহজে উপস্থাপন করার জন্য FAQ সেকশন খুবই দরকারি। এই প্রজেক্টের মাধ্যমে আমরা শিখবো কিভাবে ইউজার ক্লিক করলে উত্তর দেখানো বা লুকানো যায়।
এটি JavaScript এর DOM manipulation ও ইভেন্ট হ্যান্ডলিং প্র্যাকটিস করার জন্য চমৎকার একটি ছোট প্রজেক্ট।HTML দিয়ে স্ট্রাকচার, CSS দিয়ে ডিজাইন, আর JavaScript দিয়ে ইন্টার্যাকটিভিটি তৈরির প্রক্রিয়া দেখবো।
💻 কোড উদাহরণ (HTML + CSS + JavaScript)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Interactive FAQ</title>
<style>
body {
font-family: sans-serif;
max-width: 600px;
margin: 50px auto;
padding: 20px;
}
.faq-item {
border-bottom: 1px solid #ddd;
margin-bottom: 10px;
padding: 10px 0;
}
.faq-question {
cursor: pointer;
font-weight: bold;
position: relative;
}
.faq-answer {
display: none;
padding: 10px 0;
color: #555;
}
.faq-item.active .faq-answer {
display: block;
}
</style>
</head>
<body>
<h1>Frequently Asked Questions</h1>
<div class="faq-item">
<div class="faq-question">1. HTML কি?</div>
<div class="faq-answer">HTML হলো ওয়েবপেজ তৈরির একটি মার্কআপ ভাষা যা ব্রাউজারকে কনটেন্ট কিভাবে দেখাবে তা বলে দেয়।</div>
</div>
<div class="faq-item">
<div class="faq-question">2. CSS এর কাজ কী?</div>
<div class="faq-answer">CSS ওয়েবপেজের ডিজাইন, কালার, লেআউট কন্ট্রোল করে।</div>
</div>
<div class="faq-item">
<div class="faq-question">3. JavaScript কী করে?</div>
<div class="faq-answer">JavaScript ওয়েবসাইটে ইন্টার্যাকটিভ ফিচার যেমন ক্লিক, অ্যানিমেশন, ফর্ম যাচাই ইত্যাদি যোগ করে।</div>
</div>
<script>
const questions = document.querySelectorAll(".faq-question");
questions.forEach((question) => {
question.addEventListener("click", () => {
const parent = question.parentElement;
parent.classList.toggle("active");
});
});
</script>
</body>
</html>
🧠 প্রতিটি লাইনের ব্যাখ্যা
🔸 HTML অংশ:
-
.faq-item→ প্রতিটি প্রশ্ন ও উত্তরের আলাদা ব্লক। -
.faq-question→ ক্লিকযোগ্য প্রশ্ন। -
.faq-answer→ ডিফল্টভাবে লুকানো উত্তর।
🔸 CSS অংশ:
-
.faq-answer→display: noneদিয়ে লুকানো। -
.faq-item.active .faq-answer→ যখন active ক্লাস যোগ হয় তখন উত্তর দেখায়। -
ডিজাইনকে সিম্পল, পরিষ্কার ও ইউজার-ফ্রেন্ডলি রাখা হয়েছে।
🔸 JavaScript অংশ:
-
querySelectorAll(".faq-question")→ সব প্রশ্ন নির্বাচন করা হয়েছে। -
addEventListener("click", ...)→ প্রতিটি প্রশ্নে ক্লিক ইভেন্ট যোগ করা হয়েছে। -
parent.classList.toggle("active")→ ক্লিক করলে.faq-itemএactiveক্লাস যোগ বা মুছে ফেলা হয়, যাতে উত্তর শো বা হাইড হয়।
✅ আপনি যা শিখলেন এই প্রজেক্টে:
-
DOM element সিলেক্ট করা ও ইভেন্ট যোগ করা
-
ক্লিক ইভেন্টের মাধ্যমে class toggle করা
-
display control করার মাধ্যমে কনটেন্ট হাইড/শো করা
-
JavaScript দিয়ে HTML কন্টেন্ট ইন্টার্যাকটিভ করা
🔔 চ্যালেঞ্জ টাস্ক (চেষ্টা করতে পারো)
-
একসাথে একটির বেশি FAQ ওপেন না রাখা (Accordion Style)
-
আইকন (+/−) যোগ করা
🧩 এই পর্বের শেষে তুমি বুঝতে পারবে কিভাবে ছোট ছোট ইন্টার্যাকশন ব্যবহার করে একটি ওয়েবসাইটকে আরও ইউজার-ফ্রেন্ডলি করা যায়।
