Skip to content

Commit

Permalink
Merge pull request #75 from vishnuprasad2004/feedback-ui
Browse files Browse the repository at this point in the history 
bug: Improved the feedback form UI issue #61
  • Loading branch information
@RamakrushnaBiswal
RamakrushnaBiswal authored Oct 7, 2024
2 parents 7fac83c + 3873877 commit 7f0a301
Show file tree
Hide file tree
Showing 3 changed files with 80 additions and 63 deletions.
48 changes: 2 additions & 46 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,13 +104,6 @@ Special thanks to our amazing mentors who are guiding this project! 🙌
<sub><b>Samarth Vaidya</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/17arindam">
<img src="https://avatars.githubusercontent.com/u/65901047?v=4" width="100;" alt="17arindam"/>
<br />
<sub><b>Arindam</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/tejasbenibagde">
<img src="https://avatars.githubusercontent.com/u/124677750?v=4" width="100;" alt="tejasbenibagde"/>
Expand All @@ -131,15 +124,6 @@ Special thanks to our amazing mentors who are guiding this project! 🙌
<br />
<sub><b>Sajal Batra</b></sub>
</a>
</td>
</tr>
<tr>
<td align="center">
<a href="https://github.com/AbhijitMotekar99">
<img src="https://avatars.githubusercontent.com/u/109235675?v=4" width="100;" alt="AbhijitMotekar99"/>
<br />
<sub><b>Abhijit Motekar</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/itznayan">
Expand All @@ -148,43 +132,15 @@ Special thanks to our amazing mentors who are guiding this project! 🙌
<sub><b>Mahera Nayan</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/Navneetdadhich">
<img src="https://avatars.githubusercontent.com/u/156535853?v=4" width="100;" alt="Navneetdadhich"/>
<br />
<sub><b>Navneet Dadhich</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/Ayush215mb">
<img src="https://avatars.githubusercontent.com/u/154300084?v=4" width="100;" alt="Ayush215mb"/>
<br />
<sub><b>Ayush Yadav</b></sub>
</a>
</td>
</tr>
<tr>
<td align="center">
<a href="https://github.com/mishradev1">
<img src="https://avatars.githubusercontent.com/u/118660840?v=4" width="100;" alt="mishradev1"/>
<br />
<sub><b>Dev Mishra</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/MutiatBash">
<img src="https://avatars.githubusercontent.com/u/108807732?v=4" width="100;" alt="MutiatBash"/>
<br />
<sub><b>Bashua Mutiat</b></sub>
</a>
</td>
</tr>
<tr>
<td align="center">
<a href="https://github.com/Sapna127">
<img src="https://avatars.githubusercontent.com/u/91309280?v=4" width="100;" alt="Sapna127"/>
<br />
<sub><b>Sapna Kul</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/Syed-Farazuddin">
<img src="https://avatars.githubusercontent.com/u/119295880?v=4" width="100;" alt="Syed-Farazuddin"/>
Expand Down
13 changes: 13 additions & 0 deletions frontend/src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,3 +18,16 @@ body{
background: #F1EADC;
}

.rating-button {
@apply flex-grow bg-neutral-50 text-center p-2 rounded-md cursor-pointer select-none
}

input[type="radio"] {
display: none;
}

.star {
cursor: pointer;
font-size: 2rem;
margin-bottom: 0;
}
82 changes: 65 additions & 17 deletions frontend/src/components/ui/FeedbackForm.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { useState } from "react";
import { motion } from "framer-motion";
import { useInView } from "react-intersection-observer";
import chess from "../../assets/img/chess.gif";
import { FaStar } from "react-icons/fa6";

const FeedbackForm = () => {
const { ref, inView } = useInView({
Expand All @@ -18,11 +19,28 @@ const FeedbackForm = () => {
const [email, setEmail] = useState("");
const [feedback, setFeedback] = useState("");
const [submitted, setSubmitted] = useState(false);

const [rating, setRating] = useState(null);

const [hover, setHover] = useState(null);
const [totalStars, setTotalStars] = useState(5);
const [error, setError] = useState(null);
const [isLoading, setIsLoading] = useState(false);


const handleSubmit = async (e) => {
e.preventDefault();

console.log(`Name: ${name}, Email: ${email}, Feedback: ${feedback}, rating: ${rating}`);
setSubmitted(true);
setTimeout(() => {
setName("");
setEmail("");
setFeedback("");
setRating(null);
setSubmitted(false);
}, 3000);

setIsLoading(true);
try {
const response = await fetch(`${API_URL}/feedback/create`, {
Expand Down Expand Up @@ -55,6 +73,7 @@ const FeedbackForm = () => {
} finally {
setIsLoading(false);
}

};

return (
Expand All @@ -65,13 +84,13 @@ const FeedbackForm = () => {
initial="hidden"
animate={inView ? "visible" : "hidden"}
variants={animationVariants}
className="lg:grid lg:grid-cols-2 lg:gap-8"
className="lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center"
>
<div className="mb-8 lg:mb-0 relative">
<h2 className="text-3xl font-extrabold text-[#004D43] sm:text-4xl">
We Value Your Feedback
<h2 className="text-5xl font-black text-[#004D43]">
We value Your Feedback!
</h2>
<p className="mt-4 text-lg text-gray-700 pb-3">
<p className="mt-1 text-lg text-gray-700 pb-3">
Your thoughts help us improve. Share your experience and
suggestions with us!
</p>
Expand All @@ -84,69 +103,98 @@ const FeedbackForm = () => {
</div>
</div>

<div className="mt-8 lg:mt-0">
<form onSubmit={handleSubmit} className="space-y-6">
<div className="bg-[#004D43] rounded-xl p-3 pt-4 h-fit">
<form onSubmit={handleSubmit} className="space-y-4">
<div>
<label
{/* <label
htmlFor="name"
className="block text-sm font-medium text-[#004D43]"
className="block text-sm font-medium text-white"
>
Name
</label>
</label> */}
<input
type="text"
id="name"
value={name}
placeholder="Name"
onChange={(e) => setName(e.target.value)}
required
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-[#004D43] focus:border-[#004D43]"
/>
</div>
<div>
<label
{/* <label
htmlFor="email"
className="block text-sm font-medium text-[#004D43]"
>
Email
</label>
</label> */}
<input
type="email"
id="email"
placeholder="Email"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-[#004D43] focus:border-[#004D43]"
/>
</div>
<div>
<label
{/* <label
htmlFor="feedback"
className="block text-sm font-medium text-[#004D43]"
>
Feedback
</label>
</label> */}
<textarea
id="feedback"
placeholder="Your valuable feedback here"
rows="4"
value={feedback}
onChange={(e) => setFeedback(e.target.value)}
required
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-[#004D43] focus:border-[#004D43]"
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-[#004D43] focus:border-[#004D43] resize-none"
></textarea>
</div>
<div className="flex flex-row justify-center gap-2">
{[...Array(totalStars)].map((star, index) => {
const currentRating = index + 1;
return (
<label key={index}>
<input
type="radio"
name="rating"
value={currentRating}
onChange={() => setRating(currentRating)}
/>
<span
className="star"
style={{
color:
currentRating <= (hover || rating) ? "#ffc107" : "#e4e5e9"
}}
onMouseEnter={() => setHover(currentRating)}
onMouseLeave={() => setHover(null)}
>
<FaStar />
</span>
</label>
);
})}
</div>
<div>
<button
type="submit"
className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-[#004D43] hover:bg-[#003d35] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#004D43]"
className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-[#09342e] hover:bg-[#072d28] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#004D43]"
>
{isLoading ? "Submitting..." : "Submit Feedback"}
</button>
</div>
</form>
{submitted && (
<motion.div
initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: 0 }}
initial={{ opacity: 0, y: -10, display:"none", height:0 }}
animate={{ opacity: 1, y: 0, display: "block", height: "auto" }}
className="mt-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded"
>
Thank you for your feedback!
Expand Down

0 comments on commit 7f0a301

Please sign in to comment.