Skip to content

Commit

Permalink
Merge pull request #717 from hars-21/faq
Browse files Browse the repository at this point in the history
Faq section fixed
  • Loading branch information
ayush-t02 authored Aug 7, 2024
2 parents 34ff4ce + e0c49b9 commit a0e2ad6
Show file tree
Hide file tree
Showing 8 changed files with 308 additions and 362 deletions.
2 changes: 1 addition & 1 deletion assets/images/icon-plus.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion assets/images/icon-star.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
59 changes: 13 additions & 46 deletions js/FAQs.js
Original file line number Diff line number Diff line change
@@ -1,47 +1,14 @@
function toggle(drop, isExpanded) {
const img = drop.querySelector('img');
if (isExpanded) {
img.src="../assets/images/icon-minus.svg";
}else {
img.src="../assets/images/icon-plus.svg";
}
}

//Drops and their default expansion values
const drop1 = document.querySelector(".drop1") ; let drop1isExpanded = false ;
const drop2 = document.querySelector(".drop2") ; let drop2isExpanded = false ;
const drop3 = document.querySelector(".drop3") ; let drop3isExpanded = false ;
const drop4 = document.querySelector(".drop4") ; let drop4isExpanded = false ;
const drop5 = document.querySelector(".drop5") ; let drop5isExpanded = false ;
const drop6 = document.querySelector(".drop6") ; let drop6isExpanded = false ;


drop1.addEventListener('click', function(){
drop1isExpanded = !drop1isExpanded;
toggle(drop1, drop1isExpanded);
});

drop2.addEventListener('click', function(){
drop2isExpanded = !drop2isExpanded;
toggle(drop2, drop2isExpanded);
});

drop3.addEventListener('click', function(){
drop3isExpanded = !drop3isExpanded;
toggle(drop3, drop3isExpanded);
});

drop4.addEventListener('click', function(){
drop4isExpanded = !drop4isExpanded;
toggle(drop4, drop4isExpanded);
let drops = document.querySelectorAll(".drop");

drops.forEach((drop) => {
drop.addEventListener("click", () => {
const icon = drop.querySelector("img");
if (drop.classList.contains("open")) {
icon.src = "../assets/images/icon-plus.svg";
drop.classList.remove("open");
} else {
icon.src = "../assets/images/icon-minus.svg";
drop.classList.add("open");
}
});
});

drop5.addEventListener('click', function(){
drop5isExpanded = !drop5isExpanded;
toggle(drop5, drop5isExpanded);
});

drop6.addEventListener('click', function(){
drop6isExpanded = !drop6isExpanded;
toggle(drop6, drop6isExpanded);
});
37 changes: 18 additions & 19 deletions pages/FAQs.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<!-- displays site properly based on user's device -->

<link rel="icon" href="../assets/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../styles/mainstyle.css" />
<!-- <link rel="stylesheet" href="../styles/mainstyle.css" /> -->
<link rel="stylesheet" href="../styles/global.css" />
<link rel="stylesheet" href="../styles/mainstyle.css" />
<link rel="stylesheet" href="../styles/index.style.css">
Expand All @@ -18,13 +18,11 @@
<body>
<script src="/js/global.js"></script>

<div class="bottom-background">
<video autoplay muted loop>
<source src="../assets/videos/FAQ.mp4" />
</video>
</div>
<video autoplay muted class="video" loop id="myVideo" style="opacity: 0.95">
<source src="/assets/videos/1.mp4" type="video/mp4" />
</video>

<div class="whole-background">
<div>
<nav class="navbarr" style="color: white">
<div class="logo">
<a href="../index.html">Dots & Boxes ⚄</a>
Expand All @@ -49,10 +47,12 @@

<nav class="mobile-menu">
<div class="mobile-menu__trigger"><span></span></div>
<a class="page-scroll active-link" href="./index.html">Home </a>
<a class="page-scroll" href="../pages/about.html">About Us </a>
<a class="page-scroll" href="../pages/FAQs.html">FAQs</a>
<a class="page-scroll" href="../pages/contributors.html">Contributors</a>
<a class="page-scroll active-link" href="/index.html">Home </a>
<a class="page-scroll" href="/pages/about.html">About Us </a>
<a class="page-scroll" href="/pages/FAQs.html">FAQs</a>
<a class="page-scroll" href="/pages/contributors.html"
>Contributors</a
>
</nav>

<!-- Js and CSS files for hamburger-menu -->
Expand All @@ -61,15 +61,14 @@
</nav>
</div>

<!-- <img class="background" src="assets/images/background-pattern-desktop.svg"> -->
<div class="faqcontainer">
<h1>
<h1 id="faq-head">
<img src="../assets/images/icon-star.svg" />Frequently Asked Questions!
</h1>

<div class="question">
<details>
<summary class="drop1">
<summary class="drop">
<img src="../assets/images/icon-plus.svg" />How do I win the game?
</summary>
<p>
Expand All @@ -83,7 +82,7 @@ <h1>

<div class="question">
<details>
<summary class="drop2">
<summary class="drop">
<img src="../assets/images/icon-plus.svg" />How do I set up the
game?
</summary>
Expand All @@ -97,7 +96,7 @@ <h1>

<div class="question">
<details>
<summary class="drop3">
<summary class="drop">
<img src="../assets/images/icon-plus.svg" />What happens if I
complete a box?
</summary>
Expand All @@ -111,7 +110,7 @@ <h1>

<div class="question">
<details>
<summary class="drop4">
<summary class="drop">
<img src="../assets/images/icon-plus.svg" />When does the game end?
</summary>
<p>
Expand All @@ -124,7 +123,7 @@ <h1>

<div class="question">
<details>
<summary class="drop5">
<summary class="drop">
<img src="../assets/images/icon-plus.svg" />Is there a strategy
involved in playing this game?
</summary>
Expand All @@ -138,7 +137,7 @@ <h1>

<div class="question">
<details>
<summary class="drop6">
<summary class="drop">
<img src="../assets/images/icon-plus.svg" />What if I need help or
have more questions about gameplay?
</summary>
Expand Down
Loading

0 comments on commit a0e2ad6

Please sign in to comment.