Skip to content

Commit

Permalink
feedback
Browse files Browse the repository at this point in the history
  • Loading branch information
shriyadindi committed Nov 5, 2024
1 parent b371164 commit 6364b22
Show file tree
Hide file tree
Showing 3 changed files with 181 additions and 1 deletion.
18 changes: 17 additions & 1 deletion client/src/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import Contributors from "./component/Contributors";
import Discussion from "./component/Discussion";
import ForgotPassword from "./component/ForgotPassword";
import ResetPassword from "./component/ResetPassword";
import Feedback from "./component/Feedback";
// import VerifyEmail from "./component/Verify";
// import ProtectedRoute from '../../client/src/component/ProtectedRoute'
import NotFound from "./component/NotFound";
Expand Down Expand Up @@ -58,6 +59,7 @@ const Layout = ({ children, mode, setProgress, toggleMode, showAlert }) => {
blog="Blogs"
discussion="Discussion"
contributors="Contributors"
Feedback="Feedback"
showAlert={showAlert}
mode={mode}
toggleMode={toggleMode}
Expand Down Expand Up @@ -131,6 +133,9 @@ function App() {
progress={progress}
onLoaderFinished={() => setProgress(0)}
/>
<div className="App">
<Feedback/>
</div>
<div className="alert-container">
<Alert alert={alert} />
</div>
Expand Down Expand Up @@ -199,6 +204,17 @@ function App() {
/>
}
/>
<Route
exact
path="/feedback"
element={
<Feedback
mode={mode}
setProgress={setProgress}
showAlert={showAlert}
/>
}
/>
<Route
exact
path="/blog"
Expand Down Expand Up @@ -253,7 +269,7 @@ function App() {
<Route exact path='/forgot-password' element={<ForgotPassword mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
<Route exact path='/reset-password' element={<ResetPassword mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
<Route exact path='/codeofconduct' element={<CodeOfConduct mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
<Route exact path='/feedback' element={<Feedback mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
<Route exact path='/Feedback' element={<Feedback mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
<Route exact path='/contactus' element={<ContactUs mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
<Route exact path='/privacypolicy' element={<PrivacyPolicy mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
<Route exact path='/termofuse' element={<TermOfUse mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
Expand Down
91 changes: 91 additions & 0 deletions client/src/FeedbackForm.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
.feedback-container {
max-width: 400px;
margin: 2rem auto;
padding: 2rem;
background-color: #1e1e1e;
border-radius: 8px;
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3);
color: #f0f0f0;
text-align: center;
}

.feedback-container h2 {
margin-bottom: 1.5rem;
color: #e0e0e0;
}

.feedback-form {
display: flex;
flex-direction: column;
}

.feedback-form input,
.feedback-form textarea {
margin-bottom: 1rem;
padding: 0.8rem;
border: 1px solid #444;
border-radius: 4px;
background-color: #2e2e2e;
color: #f0f0f0;
}

.feedback-form input::placeholder,
.feedback-form textarea::placeholder {
color: #a0a0a0;
}

.feedback-form textarea {
resize: none;
height: 100px;
}

.rating {
display: flex;
align-items: center;
margin-bottom: 1rem;
}

.rating p {
margin: 0;
margin-right: 0.5rem;
color: #e0e0e0;
}

.star {
font-size: 1.5rem;
color: #ccc;
cursor: pointer;
transition: color 0.3s ease;
}

/* Filled stars - Gold when hovered or selected */
.star.filled {
color: #ffb400;
}

/* Additional hover effect: Make all stars up to the hovered one gold */
.star:hover,
.star:hover ~ .star {
color: #ccc;
}

.star:hover,
.star:hover ~ .star {
color: #ffb400;
}

.feedback-form button {
padding: 0.8rem;
border: none;
border-radius: 4px;
background-color: #ff6347;
color: #fff;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s ease;
}

.feedback-form button:hover {
background-color: #ff4500;
}

73 changes: 73 additions & 0 deletions client/src/component/Feedback.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import React, { useState } from "react";
import "./client/src/FeedbackForm.css";

const FeedbackForm = () => {
const [rating, setRating] = useState(0);
const [hoverRating, setHoverRating] = useState(0);
const [formData, setFormData] = useState({
name: "",
email: "",
feedback: "",
});

const handleInputChange = (e) => {
const { name, value } = e.target;
setFormData((prev) => ({ ...prev, [name]: value }));
};

const handleSubmit = (e) => {
e.preventDefault();
console.log("Feedback Submitted:", formData, "Rating:", rating);
// Add submission logic here
};

return (
<div className="feedback-container">
<h2>Give Us Your Feedback</h2>
<form onSubmit={handleSubmit} className="feedback-form">
<input
type="text"
name="name"
placeholder="Your Name"
value={formData.name}
onChange={handleInputChange}
required
/>
<input
type="email"
name="email"
placeholder="Your Email"
value={formData.email}
onChange={handleInputChange}
required
/>
<textarea
name="feedback"
placeholder="Your Feedback"
value={formData.feedback}
onChange={handleInputChange}
required
/>

<div className="rating">
<p>Rating:</p>
{[1, 2, 3, 4, 5].map((star) => (
<span
key={star}
className={`star ${star <= (hoverRating || rating) ? "filled" : ""}`}
onClick={() => setRating(star)}
onMouseEnter={() => setHoverRating(star)}
onMouseLeave={() => setHoverRating(0)}
>
</span>
))}
</div>

<button type="submit">Submit Feedback</button>
</form>
</div>
);
};

export default FeedbackForm;

0 comments on commit 6364b22

Please sign in to comment.