diff --git a/assets/faq/faq.css b/assets/faq/faq.css index a46d40bca..525b0611a 100644 --- a/assets/faq/faq.css +++ b/assets/faq/faq.css @@ -14,7 +14,8 @@ .faqs_container { height: 100%; - width: 100%; + width: 80%; + padding-left: 20%; display: grid; grid-template-columns: 1fr; gap: 2rem; diff --git a/assets/faq/faq.html b/assets/faq/faq.html index a8f0c77e1..96401e628 100644 --- a/assets/faq/faq.html +++ b/assets/faq/faq.html @@ -98,7 +98,6 @@
Frequently Asked Questions
-
diff --git a/assets/faq/faq.js b/assets/faq/faq.js index f2ff598ed..c5f493e0e 100644 --- a/assets/faq/faq.js +++ b/assets/faq/faq.js @@ -4,13 +4,11 @@ document.addEventListener("DOMContentLoaded", function () { }, 500); }); - // The FAQ Data const faq = [ { question: "What is CalcDiverse?", - answer: - "CalcDiverse is a collection of customized calculators for various mathematical aspects. It allows individuals with basic web development knowledge to create unique calculators and contribute through pull requests.", + answer: "CalcDiverse is a collection of customized calculators for various mathematical aspects. It allows individuals with basic web development knowledge to create unique calculators and contribute through pull requests.", }, { question: "What technologies are used in CalcDiverse?", @@ -18,38 +16,31 @@ const faq = [ }, { question: "How can I access the live project?", - answer: - 'The live project is accessible at CalcDiverse', + answer: 'The live project is accessible at CalcDiverse', }, { question: "How can I get started with contributing to CalcDiverse?", - answer: - 'To contribute, you can fork the repository, clone it to your local system, and open the `index.html` file in your browser. Detailed contribution steps are provided in the "Getting Started" section.', + answer: 'To contribute, you can fork the repository, clone it to your local system, and open the `index.html` file in your browser. Detailed contribution steps are provided in the "Getting Started" section.', }, { question: "What should I do if I find a bug or want to add a feature?", - answer: - 'You can raise an issue, and after it\'s assigned to you, you can proceed to make the changes. Follow the steps outlined in the "Getting Started" section for contributing.', + answer: 'You can raise an issue, and after it\'s assigned to you, you can proceed to make the changes. Follow the steps outlined in the "Getting Started" section for contributing.', }, { question: "How can I add a new calculator to CalcDiverse?", - answer: - "To add a new calculator, create a folder in the Calculators directory, put your calculator's code files in it, and add a README.md file with a description, tech stacks, and screenshots. Update the main `index.html` file to include your calculator's link in the box section.", + answer: "To add a new calculator, create a folder in the Calculators directory, put your calculator's code files in it, and add a README.md file with a description, tech stacks, and screenshots. Update the main `index.html` file to include your calculator's link in the box section.", }, { question: "What are the contributing guidelines for CalcDiverse?", - answer: - 'You can find the contributing guidelines in the "Contributing Guidelines" section. It covers the development process, bug fixes, improvements, and how to build for Click-The-Edible-Game.', + answer: 'You can find the contributing guidelines in the "Contributing Guidelines" section. It covers the development process, bug fixes, improvements, and how to build for Click-The-Edible-Game.', }, { question: "Is there a Code of Conduct for contributors?", - answer: - 'Yes, this project follows a Code of Conduct. All contributors are expected to uphold this code, and it can be found in the "Code Of Conduct" section.', + answer: 'Yes, this project follows a Code of Conduct. All contributors are expected to uphold this code, and it can be found in the "Code Of Conduct" section.', }, { question: "Has CalcDiverse been part of any Open Source Programs?", - answer: - "Yes, CalcDiverse has been part of Open Source Programs, including IWOC2024, JWOC2024, SWOC2024 and GSSOC2024.", + answer: "Yes, CalcDiverse has been part of Open Source Programs, including IWOC2024, JWOC2024, SWOC2024 and GSSOC2024.", }, { question: "Who is the Project Admin for CalcDiverse?", @@ -57,59 +48,57 @@ const faq = [ }, { question: "Can anyone contribute to CalcDiverse?", - answer: - 'Yes, contributions of any kind from anyone are always welcome, as mentioned in the "Contributing is fun" section.', + answer: 'Yes, contributions of any kind from anyone are always welcome, as mentioned in the "Contributing is fun" section.', }, { question: "How can I celebrate my successful pull request?", - answer: - 'After your pull request is merged successfully, you are encouraged to celebrate your success, as mentioned in the "Celebrate your success" section.', + answer: 'After your pull request is merged successfully, you are encouraged to celebrate your success, as mentioned in the "Celebrate your success" section.', }, ]; -/** - * - * @param {MouseEvent} e - */ - -// The Function to toggle the FAQ Content -function toggleContent(e) { - const content = e.currentTarget.faqContent; - content.show = !content.show; - - content.style.height = content.show - ? content.scrollHeight + 20 + `px` - : `0px`; - content.style.padding = content.show ? `10px 0` : `0`; +// Create the accordion +const faqContainer = document.querySelector(".faqs_container"); - const plus = e.currentTarget.plus; - plus.style.transform = content.show ? `rotate(45deg)` : `none`; -} +faq.forEach((item) => { + // Create the FAQ item + const faqItem = document.createElement("div"); + faqItem.classList.add("faq"); -// The Template Function for the FAQ -faq.forEach(function (item, index) { - const faqItem = document.createElement(`div`); - faqItem.classList.add(`faq`); + // Create the title and toggle button faqItem.innerHTML = ` -
- ${item.question} -
- - - -
+
+ ${item.question} +
+ + +
- `; +
+ `; - faqItem.plus = faqItem.querySelector(`.plus`); - - const faqContent = document.createElement(`div`); - faqContent.classList.add(`faq_content`); + // Create the content section + const faqContent = document.createElement("div"); + faqContent.classList.add("faq_content"); faqContent.innerHTML = item.answer; + faqContent.style.height = "0px"; // Start collapsed faqItem.appendChild(faqContent); - faqItem.faqContent = faqContent; + // Append to the container + faqContainer.appendChild(faqItem); + + // Toggle content + faqItem.querySelector(".faq_title").addEventListener("click", () => { + const allFaqs = document.querySelectorAll(".faq_content"); + allFaqs.forEach((content) => { + if (content !== faqContent) { + content.style.height = "0px"; // Collapse others + content.parentNode.querySelector(".plus").style.transform = "none"; // Reset plus icon + } + }); - faqItem.addEventListener(`click`, toggleContent); - document.querySelectorAll(`.faqs_container`)[index % 2].appendChild(faqItem); + // Toggle current FAQ + const isOpen = faqContent.style.height !== "0px"; + faqContent.style.height = isOpen ? "0px" : `${faqContent.scrollHeight}px`; + faqItem.querySelector(".plus").style.transform = isOpen ? "none" : "rotate(45deg)"; + }); }); \ No newline at end of file