-
Notifications
You must be signed in to change notification settings - Fork 92
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #386 from shriyadindi/feedback
Adding a separate page for feedback and rating. (Issue #354)
- Loading branch information
Showing
3 changed files
with
181 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | ||
| } | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; |