From 7b9bf1c7494ac0c6cc2a795ec474c0aa64bc9b10 Mon Sep 17 00:00:00 2001 From: nisha Date: Sun, 15 Dec 2024 18:54:44 +0530 Subject: [PATCH 1/4] enhanced accordian --- assets/faq/faq.css | 3 +- assets/faq/faq.html | 1 - assets/faq/faq.js | 88 +++++++++++++++++++++++++++------------------ 3 files changed, 55 insertions(+), 37 deletions(-) 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..fcd1045e7 100644 --- a/assets/faq/faq.js +++ b/assets/faq/faq.js @@ -4,7 +4,6 @@ document.addEventListener("DOMContentLoaded", function () { }, 500); }); - // The FAQ Data const faq = [ { @@ -67,49 +66,68 @@ const faq = [ }, ]; -/** - * - * @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 + } + }); + + // 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)"; + }); +}); faqItem.addEventListener(`click`, toggleContent); document.querySelectorAll(`.faqs_container`)[index % 2].appendChild(faqItem); -}); \ No newline at end of file From 6b90b29e8af475d06fec1c798727397206888554 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Tue, 17 Dec 2024 01:14:00 +0530 Subject: [PATCH 2/4] Added changes --- assets/faq/faq.js | 57 +++++++++++++++-------------------------------- 1 file changed, 18 insertions(+), 39 deletions(-) diff --git a/assets/faq/faq.js b/assets/faq/faq.js index fcd1045e7..c07f4e95c 100644 --- a/assets/faq/faq.js +++ b/assets/faq/faq.js @@ -8,8 +8,7 @@ document.addEventListener("DOMContentLoaded", function () { 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?", @@ -17,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?", @@ -56,13 +48,11 @@ 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.', }, ]; @@ -80,20 +70,8 @@ faq.forEach((item) => {
${item.question}
- - + +
@@ -124,10 +102,11 @@ faq.forEach((item) => { // 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)"; + faqItem.querySelector(".plus").style.transform = isOpen ? + "none" : + "rotate(45deg)"; }); }); - faqItem.addEventListener(`click`, toggleContent); - document.querySelectorAll(`.faqs_container`)[index % 2].appendChild(faqItem); + +faqItem.addEventListener(`click`, toggleContent); +document.querySelectorAll(`.faqs_container`)[index % 2].appendChild(faqItem); \ No newline at end of file From c4062cf788a52a41dea8d0e1e3eb81b3e5d7cebb Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Tue, 17 Dec 2024 01:16:08 +0530 Subject: [PATCH 3/4] Removed extra line break --- assets/faq/faq.js | 1 - 1 file changed, 1 deletion(-) diff --git a/assets/faq/faq.js b/assets/faq/faq.js index c07f4e95c..d570c5fec 100644 --- a/assets/faq/faq.js +++ b/assets/faq/faq.js @@ -56,7 +56,6 @@ const faq = [ }, ]; - // Create the accordion const faqContainer = document.querySelector(".faqs_container"); From f64380a2cfdb0352a3599f351320db470aa88c8b Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Tue, 17 Dec 2024 01:25:47 +0530 Subject: [PATCH 4/4] Removed unused lines of code --- assets/faq/faq.js | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) diff --git a/assets/faq/faq.js b/assets/faq/faq.js index d570c5fec..c5f493e0e 100644 --- a/assets/faq/faq.js +++ b/assets/faq/faq.js @@ -92,20 +92,13 @@ faq.forEach((item) => { allFaqs.forEach((content) => { if (content !== faqContent) { content.style.height = "0px"; // Collapse others - content.parentNode - .querySelector(".plus") - .style.transform = "none"; // Reset plus icon + content.parentNode.querySelector(".plus").style.transform = "none"; // Reset plus icon } }); // 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)"; + faqContent.style.height = isOpen ? "0px" : `${faqContent.scrollHeight}px`; + faqItem.querySelector(".plus").style.transform = isOpen ? "none" : "rotate(45deg)"; }); -}); - -faqItem.addEventListener(`click`, toggleContent); -document.querySelectorAll(`.faqs_container`)[index % 2].appendChild(faqItem); \ No newline at end of file +}); \ No newline at end of file