Skip to content

Commit a7d14bc

Browse files
KAJASEKAJASE
committed
general questions
1 parent 30bde7b commit a7d14bc

File tree

3 files changed

+90
-3
lines changed

3 files changed

+90
-3
lines changed

‎7-questions/setup/app.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,31 @@
11
//using selectors inside the element
2+
const questions = document.querySelectorAll('.question');
3+
4+
questions.forEach(function(question){
5+
const btn = question.querySelector('.question-btn');
6+
btn.addEventListener('click', function(){
7+
console.log(questions);
8+
questions.forEach(function(item){
9+
if(item !== question){
10+
item.classList.remove('show-text');
11+
}
12+
});
13+
question.classList.toggle('show-text');
14+
});
15+
16+
});
17+
18+
19+
20+
21+
222
// traversing the dom
23+
24+
//const btns = document.querySelectorAll('.question-btn');
25+
//
26+
//btns.forEach(function(btn){
27+
// btn.addEventListener('click', function(e){
28+
// const question = e.currentTarget.parentElement.parentElement;
29+
// question.classList.toggle('show-text');
30+
// });
31+
//});

‎7-questions/setup/index.html‎

Lines changed: 59 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,65 @@
1818
<link rel="stylesheet" href="styles.css" />
1919
</head>
2020
<body>
21-
<h1>questions project</h1>
21+
<section class="questions">
22+
<div class="title">
23+
<h2>general questions</h2>
24+
</div>
25+
<div class="section-center">
26+
<article class="question">
27+
<div class="question-title">
28+
<p>do you accept all major credit cards?</p>
29+
<button type="button" class="question-btn">
30+
<span class="plus-icon">
31+
<i class="far fa-plus-square"></i>
32+
</span>
33+
<span class="minus-icon">
34+
<i class="far fa-minus-square"></i>
35+
</span>
36+
</button>
37+
</div>
38+
<div class="question-text">
39+
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae natus quibusdam excepturi perferendis perspiciatis animi quas! Culpa tempore earum quo!</p>
40+
</div>
41+
</article>
42+
43+
<article class="question">
44+
<div class="question-title">
45+
<p>do you support local farmers?</p>
46+
<button type="button" class="question-btn">
47+
<span class="plus-icon">
48+
<i class="far fa-plus-square"></i>
49+
</span>
50+
<span class="minus-icon">
51+
<i class="far fa-minus-square"></i>
52+
</span>
53+
</button>
54+
</div>
55+
<div class="question-text">
56+
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae natus quibusdam excepturi perferendis
57+
perspiciatis animi quas! Culpa tempore earum quo!</p>
58+
</div>
59+
</article>
60+
61+
<article class="question">
62+
<div class="question-title">
63+
<p>do you use organic ingredients?</p>
64+
<button type="button" class="question-btn">
65+
<span class="plus-icon">
66+
<i class="far fa-plus-square"></i>
67+
</span>
68+
<span class="minus-icon">
69+
<i class="far fa-minus-square"></i>
70+
</span>
71+
</button>
72+
</div>
73+
<div class="question-text">
74+
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae natus quibusdam excepturi perferendis
75+
perspiciatis animi quas! Culpa tempore earum quo!</p>
76+
</div>
77+
</article>
78+
</div>
79+
</section>
2280
<!-- javascript -->
2381
<script src="app.js"></script>
2482
</body>

‎7-questions/setup/styles.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -231,7 +231,7 @@ Questions
231231
margin-bottom: 0;
232232
}
233233
/* hide text */
234-
/* .question-text {
234+
.question-text {
235235
display: none;
236236
}
237237
.show-text .question-text {
@@ -245,4 +245,4 @@ Questions
245245
}
246246
.show-text .plus-icon {
247247
display: none;
248-
} */
248+
}

0 commit comments

Comments
 (0)