Skip to content

Commit 08b304e

Browse files
saiprasadm45saiprasadm45
committed
building reallife scenerios.
1 parent 4baea49 commit 08b304e

File tree

3 files changed

+170
-2
lines changed

3 files changed

+170
-2
lines changed

‎07_Projects/07_ResponsiveNavbar&FaQ/blank.js‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,30 @@ let navlist = document.getElementById('ul')
44
btn.addEventListener('click',()=>{
55
console.log("e")
66
navlist.classList.toggle('show')
7-
})
7+
})
8+
9+
// --- FAQ Accordion Logic ---
10+
11+
// 1. Select all the clickable question elements.
12+
// document.querySelectorAll returns a list of all elements that match the selector.
13+
const faqQuestions = document.querySelectorAll('.faq-question');
14+
15+
// 2. Loop through each question element.
16+
// .forEach() is a method that executes a function once for each item in a list.
17+
faqQuestions.forEach(question => {
18+
19+
// 3. Add a 'click' event listener to each question.
20+
// This will run the code inside the curly braces every time a question is clicked.
21+
question.addEventListener('click', () => {
22+
23+
// 4. Get the parent '.faq-item' of the question that was clicked.
24+
// 'this' refers to the element that was clicked (the .faq-question).
25+
// .parentElement gets the direct parent of that element.
26+
const parentItem = question.parentElement;
27+
28+
// 5. Toggle the 'active' class on the parent item.
29+
// .classList.toggle() adds the class if it's not there, and removes it if it is.
30+
// This is what triggers our CSS animations to show/hide the answer and rotate the icon.
31+
parentItem.classList.toggle('active');
32+
});
33+
});

‎07_Projects/07_ResponsiveNavbar&FaQ/index.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,56 @@
2727
<i id="hambtn" class="hamburger fa-solid fa-bars"></i>
2828
</nav>
2929

30+
31+
<i id="hambtn" class="hamburger fa-solid fa-bars"></i>
32+
</nav>
33+
34+
<!-- ================================= -->
35+
<!-- ===== FAQ SECTION STARTS HERE ===== -->
36+
<!-- ================================= -->
37+
<section class="faq-section">
38+
<h2>Frequently Asked Questions</h2>
39+
<div class="faq-container">
40+
<!-- FAQ Item 1 -->
41+
<div class="faq-item">
42+
<div class="faq-question">
43+
<p>What is included in the Product package?</p>
44+
<i class="fa-solid fa-chevron-down"></i>
45+
</div>
46+
<div class="faq-answer">
47+
<p>Our Product package includes access to all core features, 24/7 customer support, and monthly updates. You also get exclusive access to our community forums.</p>
48+
</div>
49+
</div>
50+
51+
<!-- FAQ Item 2 -->
52+
<div class="faq-item">
53+
<div class="faq-question">
54+
<p>How does the pricing work?</p>
55+
<i class="fa-solid fa-chevron-down"></i>
56+
</div>
57+
<div class="faq-answer">
58+
<p>We offer flexible pricing plans, including monthly and annual subscriptions. You can upgrade, downgrade, or cancel your plan at any time from your account dashboard.</p>
59+
</div>
60+
</div>
61+
62+
<!-- FAQ Item 3 -->
63+
<div class="faq-item">
64+
<div class="faq-question">
65+
<p>Can I get a refund if I'm not satisfied?</p>
66+
<i class="fa-solid fa-chevron-down"></i>
67+
</div>
68+
<div class="faq-answer">
69+
<p>Yes, we have a 30-day money-back guarantee. If you are not completely satisfied with our service within the first 30 days, we will issue a full refund, no questions asked.</p>
70+
</div>
71+
</div>
72+
</div>
73+
</section>
74+
75+
</div>
76+
<script src="blank.js"></script>
77+
</body>
78+
</html>
79+
3080
</div>
3181
<script src="blank.js"></script>
3282
</body>

‎07_Projects/07_ResponsiveNavbar&FaQ/style.css‎

Lines changed: 93 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,98 @@ i.hamburger{
9696
}
9797
@media (max-width: 565px){
9898
nav{
99-
padding-inline: 1rem;
99+
padding: 0.5rem 1rem;
100100
}
101+
}
102+
103+
/* ================================= */
104+
/* ===== FAQ STYLES START HERE ===== */
105+
/* ================================= */
106+
107+
/* This is the main container for the entire FAQ section. */
108+
.faq-section {
109+
padding: 4rem 2rem; /* Adds space around the FAQ section. */
110+
display: flex; /* Enables flexbox for alignment. */
111+
flex-direction: column; /* Stacks children (title and container) vertically. */
112+
align-items: center; /* Centers the children horizontally. */
113+
width: 100%; /* Ensures it takes the full width of its parent. */
114+
}
115+
116+
/* This is the main title of the FAQ section. */
117+
.faq-section h2 {
118+
font-size: 2.5rem; /* Sets the font size for the title. */
119+
color: #333; /* A dark grey color for the text. */
120+
margin-bottom: 2rem; /* Adds space below the title. */
121+
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
122+
}
123+
124+
/* This is the white card that holds all the FAQ items. */
125+
.faq-container {
126+
width: 100%; /* Takes the full width of its parent. */
127+
max-width: 700px; /* Prevents it from getting too wide on large screens. */
128+
background-color: white; /* A clean white background. */
129+
border-radius: 10px; /* Rounds the corners of the card. */
130+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow for a floating effect. */
131+
}
132+
133+
/* This is the container for a single question-answer pair. */
134+
.faq-item {
135+
border-bottom: 1px solid #e0e0e0; /* A light grey line to separate items. */
136+
}
137+
.faq-item:last-child {
138+
border-bottom: none; /* Removes the line from the very last item. */
139+
}
140+
141+
/* This is the clickable area that contains the question text and the icon. */
142+
.faq-question {
143+
display: flex; /* Enables flexbox. */
144+
justify-content: space-between; /* Pushes the text and icon to opposite ends. */
145+
align-items: center; /* Aligns them vertically in the middle. */
146+
padding: 1.2rem 1.5rem; /* Adds comfortable spacing inside the question bar. */
147+
cursor: pointer; /* Changes the mouse to a pointer to show it's clickable. */
148+
}
149+
150+
/* This styles the question text itself. */
151+
.faq-question p {
152+
font-size: 1.1rem; /* Sets the font size. */
153+
font-weight: 600; /* Makes the font slightly bolder. */
154+
color: #444; /* A slightly lighter dark grey. */
155+
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
156+
}
157+
158+
/* This styles the dropdown icon. */
159+
.faq-question i {
160+
font-size: 1.2rem; /* Sets the size of the icon. */
161+
color: seagreen; /* Matches the icon color to your navbar theme. */
162+
transition: transform 0.3s ease-in-out; /* This is key! It animates the icon's rotation. */
163+
}
164+
165+
/* This is the container for the answer text. */
166+
.faq-answer {
167+
max-height: 0; /* This is the magic! It hides the answer by default. */
168+
overflow: hidden; /* This ensures the content inside doesn't spill out when hidden. */
169+
transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out; /* Animates the height and padding smoothly. */
170+
}
171+
172+
/* This styles the answer text itself. */
173+
.faq-answer p {
174+
font-size: 1rem; /* Sets the font size for the answer. */
175+
line-height: 1.6; /* Increases the space between lines for readability. */
176+
color: #555; /* A medium grey for the answer text. */
177+
padding: 0 1.5rem; /* Initially no vertical padding. */
178+
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
179+
}
180+
181+
/* --- The 'active' state --- */
182+
/* This class will be added with JavaScript when an item is clicked. */
183+
184+
/* When a .faq-item is active, we target the .faq-answer inside it. */
185+
.faq-item.active .faq-answer {
186+
max-height: 200px; /* We animate the height to a value large enough to show the content. */
187+
padding: 0.5rem 1.5rem 1.5rem 1.5rem; /* We add padding back to give it space. */
188+
}
189+
190+
/* When a .faq-item is active, we target the icon inside it. */
191+
.faq-item.active .faq-question i {
192+
transform: rotate(180deg); /* This rotates the chevron icon to point upwards. */
101193
}

0 commit comments

Comments
 (0)