Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#68 FAQsection #107

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

#68 FAQsection #107

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
60dd172
faq section added
daky2024 Oct 18, 2024
8d986b6
faq section edited
daky2024 Oct 18, 2024
c69fd58
editied faq section
daky2024 Oct 18, 2024
123cba5
faq edited
daky2024 Oct 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 98 additions & 0 deletions app/components/faqaccordian.jsx/Faq.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accordion</title>
<link rel="stylesheet" href="style.css"> <!-- Corrected 'herf' to 'href' -->
<script src="https://kit.fontawesome.com/12684f336a.js" crossorigin="anonymous"></script>
</head>
<body>

<h2>FAQ's</h2>

<div class="accordion">
<div class="question">
<h4>What is TTURL?</h4>
<i class="icon active fa-solid fa-chevron-down"></i>
</div>
<div class="answer">
<p>It is a shortening web service, which provides short aliases for redirection of long URLs.</p>
</div>
</div>

<div class="accordion">
<div class="question">
<h4>What are the benefits of TTURL?</h4>
<i class="icon active fa-solid fa-chevron-down"></i>
</div>
<div class="answer">
<p>It performs much better in search engines, looks more trustworthy, and makes sharing easier.</p>
</div>
</div>

<div class="accordion">
<div class="question">
<h4>Is TTURL safe to use?</h4>
<i class="icon active fa-solid fa-chevron-down"></i>
</div>
<div class="answer">
<p>Yes, TTURL is safe to use. It employs algorithms to detect and block links that lead to known spam or malicious sites.</p>
</div>
</div>

<div class="accordion">
<div class="question">
<h4>Can TTURL expire after some time?</h4>
<i class="icon active fa-solid fa-chevron-down"></i>
</div>
<div class="answer">
<p>No, most links created with TTURL do not expire unless manually deleted or removed by the service.</p>
</div>
</div>

<div class="accordion">
<div class="question">
<h4>Is TTURL free to use?</h4>
<i class="icon active fa-solid fa-chevron-down"></i>
</div>
<div class="answer">
<p>Yes, TTURL is a free service for creating shortened URLs.</p>
</div>
</div>

<div class="accordion">
<div class="question">
<h4>How can I customize my TTURL links?</h4>
<i class="icon active fa-solid fa-chevron-down"></i>
</div>
<div class="answer">
<p>Once you've created a shortened link, you can customize its alias by choosing your own custom keyword for easy identification.</p>
</div>
</div>

<div class="accordion">
<div class="question">
<h4>How long does it take for my TTURL link to be active?</h4>
<i class="icon active fa-solid fa-chevron-down"></i>
</div>
<div class="answer">
<p>Once you create a TTURL link, it becomes active immediately. You can share it and track clicks right away.</p>
</div>
</div>

<div class="accordion">
<div class="question">
<h4> Are there any limitations on the number of URLs I can shorten?</h4>
<i class="icon active fa-solid fa-chevron-down"></i>
</div>
<div class="answer">
<p>No, there is no limitations , you can shorten as many link as you want.</p>
</div>
</div>


<script src="script.js"></script>
</body>
</html>
43 changes: 43 additions & 0 deletions app/components/faqaccordian.jsx/faq.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
body{
background-color: black;
padding: 40px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
line-height: 1.5rem;
}

.accordion {
background-color:rgb(11, 11, 11);
padding: 4px 16px;
margin-bottom: 14px;
cursor: pointer;
border-radius: 3px;
box-shadow: 1px 1px 5px rgb(79, 52, 218);
cursor: pointer;

}

.question {
display: flex;
align-items: center;
justify-content: space-between;

}

.icon{
margin-right: 15px;
transition: transform 0.4s;

}

.icon.active{
transform: rotate(180deg); /*rotate value*/
}

.answer{
color: rgb(240, 255, 255);
max-height: 0;
overflow: hidden;
transition: max-height 0.4s;
}


32 changes: 32 additions & 0 deletions app/components/faqaccordian.jsx/faqpg.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import React, { useState } from 'react';
import './FAQAccordion.css';

const FAQAccordion = ({ faqs }) => {

const [activeIndex, setActiveIndex] = useState(null);

const handleToggle = (index) => {
// If the clicked index is already active, collapse it, otherwise open it
setActiveIndex(activeIndex === index ? null : index);
};

return (
<div className="accordion-container">
{faqs.map((faq, index) => (
<div className="accordion" key={index}>
<div className="icon" onClick={() => handleToggle(index)}>
{activeIndex === index ? '-' : '+'} {/* Toggle icon */}
</div>
<div className="question" onClick={() => handleToggle(index)}>
{faq.question}
</div>
<div className="answer" style={{ maxHeight: activeIndex === index ? `${faq.answer.length * 2}rem` : '0' }}>
{faq.answer}
</div>
</div>
))}
</div>
);
};

export default FAQAccordion;