From 5de3159a0547dfb0247deab26785c3cf0c2195d4 Mon Sep 17 00:00:00 2001
From: Rakshita <rakshitav75@gmail.com>
Date: Thu, 7 Nov 2024 19:51:51 +0530
Subject: [PATCH] improved the feedback form

---
 src/css/Feedback.css   | 230 +++++++++++++++++++++++++++---
 src/pages/Feedback.jsx | 313 ++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 518 insertions(+), 25 deletions(-)

diff --git a/src/css/Feedback.css b/src/css/Feedback.css
index 3a9c901..ce0306d 100644
--- a/src/css/Feedback.css
+++ b/src/css/Feedback.css
@@ -1,46 +1,46 @@
-/* Container for feedback form */
+/* Container for feedback form 
 .feedback-form-container {
   background-color: #f5e6f6;
   border: 5px solid rgb(178, 163, 123);
   border-radius: 10px;
-  padding: 50px;
-  width: 600px; /* Slightly increased width for a spacious feel */
+  padding: 50px
+  width: 600px; /* Slightly increased width for a spacious feel 
   margin: 50px auto;
   color: rgb(10, 10, 10);
   text-align: center;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.7);
 }
 
-/* Form headings */
+/* Form headings 
 h2 {
-  margin-bottom: 30px; /* Increased spacing below heading */
-  font-size: 48px; /* Increased font size for the heading */
+  margin-bottom: 30px; /* Increased spacing below heading 
+  font-size: 48px; /* Increased font size for the heading 
   color: #f5f4ef;
 }
 
-/* Input fields styling */
+/* Input fields styling 
 .name,
 .email,
-.message {
-  margin-top: 30px; /* Increased top margin for space between inputs */
+.message 
+  margin-top: 30px; /* Increased top margin for space between inputs 
   width: 100%;
-  padding: 15px; /* Increased padding for larger inputs */
+  padding: 15px; /* Increased padding for larger inputs 
   background-color: #faf5f5;
   border: 3px solid rgb(178, 163, 123);
   border-radius: 5px;
   color: rgb(21, 20, 20);
-  font-size: 22px; /* Slightly increased font size for input text */
+  font-size: 22px; /* Slightly increased font size for input text 
   box-sizing: border-box;
 }
 
 textarea {
-  height: 100px; /* Increased height of the textarea */
+  height: 100px; /* Increased height of the textarea 
   resize: none;
 }
 
-/* Star rating styling */
+/* Star rating styling 
 .stars {
-  margin-top: 30px; /* Ensure consistent spacing */
+  margin-top: 30px; /* Ensure consistent spacing 
   display: flex;
   justify-content: center;
   margin: 10px 0;
@@ -49,7 +49,7 @@ textarea {
 
 .star,
 .star-filled {
-  font-size: 35px; /* Slightly larger stars for better visibility */
+  font-size: 35px; /* Slightly larger stars for better visibility 
   cursor: pointer;
   transition: color 0.3s;
 }
@@ -62,13 +62,13 @@ textarea {
   color: gold;
 }
 
-/* Submit button */
+/* Submit button 
 .post-button {
-  margin-top: 40px; /* More space between the last input and button */
+  margin-top: 40px; /* More space between the last input and button 
   background-color: #91918f;
   color: #fdfafa;
   border: 2px solid black;
-  padding: 15px 30px; /* Bigger button for easier clicking */
+  padding: 15px 30px; /* Bigger button for easier clicking 
   border-radius: 5px;
   cursor: pointer;
   transition: background-color 0.3s;
@@ -79,7 +79,7 @@ textarea {
   color: black;
 }
 
-/* Pop-up overlay styling */
+/* Pop-up overlay styling 
 .popup-overlay {
   position: fixed;
   top: 0;
@@ -122,4 +122,196 @@ textarea {
 
 .close-popup-button:hover {
   background-color: #e3e4e5;
+}*/
+/* Container for feedback form */
+/* Container for feedback form */
+/* Container for feedback form */
+.feedback-form-container {
+  background-color: #fff6e6; /* Light soft orange background */
+  border: 3px solid #ffcc99; /* Soft orange border */
+  border-radius: 10px;
+  padding: 40px;
+  width: 600px;
+  margin: 50px auto;
+  color: #333333;
+  text-align: left;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  display: flex;
+  flex-direction: column;
+  gap: 30px; /* Increased spacing between form fields */
+}
+
+/* Input fields styling */
+.name,
+.email,
+.message {
+  width: 100%;
+  padding: 14px; /* Increased padding */
+  background-color: #fff2e0; /* Lighter orange shade */
+  border: 2px solid #ffad66; /* Another shade of orange for the outline */
+  border-radius: 8px; /* Increased border radius for rounded edges */
+  color: #333333;
+  font-size: 16px;
+  box-sizing: border-box;
+  text-align: left;
+}
+
+textarea {
+  height: 120px;
+  resize: none;
+}
+
+/* Star rating styling */
+.stars {
+  display: flex;
+  justify-content: center;
+  gap: 15px;
+}
+
+.star,
+.star-filled {
+  font-size: 30px;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+.star {
+  color: #88775c; /* Soft orange for unfilled stars */
+}
+
+.star-filled {
+  color: #ff6600; /* Darker orange for filled stars */
+}
+
+/* Submit button */
+.post-button {
+  background-color: #ff944d; /* Bright orange for button */
+  color: white;
+  border: none;
+  padding: 14px 25px; /* Increased padding */
+  border-radius: 8px; /* Increased border radius for rounded edges */
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.post-button:hover {
+  background-color: #ff6600;
+  color: #ffffff;
+}
+
+/* Checkbox styling */
+input[type="checkbox"] {
+  width: 24px; /* Slightly reduced checkbox size */
+  height: 24px;
+  margin-right: 10px;
+  cursor: pointer;
+}
+
+/* Label styling */
+label {
+  font-size: 16px; /* Reduced font size for labels */
+  display: block;
+  margin-top: 15px;
+  color: #ff6600;
+  cursor: pointer;
+}
+
+/* Align checkbox options vertically */
+.checkbox-group {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  margin-top: 20px;
 }
+
+/* Pop-up overlay styling */
+.popup-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.popup {
+  background-color: #fff3e0;
+  padding: 25px;
+  border-radius: 10px;
+  text-align: center;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+  color: #333333;
+}
+
+.popup h3 {
+  margin-bottom: 10px;
+  color: #d97706;
+}
+
+.popup p {
+  margin-bottom: 15px;
+  color: #666666;
+}
+
+.close-popup-button {
+  background-color: #ffb84d;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.close-popup-button:hover {
+  background-color: #ff944d;
+}
+.personal-insights,
+.suggestions {
+  width: 100%;
+  padding: 12px;
+  background-color: #fff2e0;
+  border: 2px solid #ffad66;
+  border-radius: 8px;
+  color: #333333;
+  font-size: 16px;
+  box-sizing: border-box;
+  resize: none;
+  margin-top: 20px;
+}
+
+.personal-insights:focus,
+.suggestions:focus {
+  outline: none;
+  border-color: #ff6600;
+}
+
+/* Style for select dropdown */
+select {
+  margin-top: 20px; /* Space between previous questions */
+  margin-bottom: 40px; /* Space between select dropdown and next textbox */
+  width: 100%; /* Take up full container width */
+  max-width: 600px; /* Keep width within the form container */
+  padding: 15px; /* Padding for space inside the dropdown */
+  background-color: #fff2e0; /* Light orange background */
+  border: 2px solid #ffad66; /* Orange border */
+  border-radius: 10px; /* Rounded corners */
+  font-size: 16px; /* Font size for the option text */
+  color: #333333; /* Text color */
+  box-sizing: border-box; /* Ensures padding is included in width */
+  transition: border-color 0.3s ease-in-out; /* Smooth transition for border color */
+}
+
+/* Focus effect for select dropdown */
+select:focus {
+  outline: none; /* Remove default focus outline */
+  border-color: #ff6600; /* Darker orange when focused */
+}
+/* Set the background color of the entire page */
+body {
+  background-color: #ffffff; /* Set the background color to white */
+}
+
+/* If you have any container elements or sections that should also have a white background */
diff --git a/src/pages/Feedback.jsx b/src/pages/Feedback.jsx
index 2f3727e..ad594ce 100644
--- a/src/pages/Feedback.jsx
+++ b/src/pages/Feedback.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+/*import React, { useState } from "react";
 import "../css/Feedback.css";
 
 const Feedback = () => {
@@ -44,7 +44,7 @@ const Feedback = () => {
       <form onSubmit={handleSubmit}>
         <h1>Feedback Form</h1>
 
-        {/* Name Input */}
+        /* Name Input 
         <input
           className="name"
           type="text"
@@ -54,7 +54,7 @@ const Feedback = () => {
           required
         />
 
-        {/* Email Input */}
+        {/* Email Input 
         <input
           className="email"
           type="email"
@@ -64,7 +64,7 @@ const Feedback = () => {
           required
         />
 
-        {/* Star Rating */}
+        {/* Star Rating 
         <div className="stars">
           {[1, 2, 3, 4, 5].map((star) => (
             <span
@@ -81,7 +81,7 @@ const Feedback = () => {
           ))}
         </div>
 
-        {/* Feedback Textarea */}
+        {/* Feedback Textarea 
         <textarea
           className="message"
           value={feedback}
@@ -90,6 +90,307 @@ const Feedback = () => {
           required
         />
 
+        {/* Submit Button 
+        <button type="submit" className="post-button">
+          Submit
+        </button>
+      </form>
+
+      {/* Success Pop-up 
+      {isSubmitted && (
+        <div className="popup-overlay">
+          <div className="popup">
+            <h3>Thank You!</h3>
+            <p>Your feedback has been successfully submitted.</p>
+            <button onClick={closePopup} className="close-popup-button">
+              Close
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};*/
+
+
+
+
+
+
+
+
+
+
+
+
+import React, { useState } from "react";
+import "../css/Feedback.css";
+
+const Feedback = () => {
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [rating, setRating] = useState(0);
+  const [hoverRating, setHoverRating] = useState(0);
+  const [impactfulTeachings, setImpactfulTeachings] = useState([]);
+  const [inspired, setInspired] = useState("");
+  const [personalInsights, setPersonalInsights] = useState("");
+  const [suggestions, setSuggestions] = useState("");
+  const [layoutRating, setLayoutRating] = useState(0);
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [errors, setErrors] = useState({
+    name: false,
+    email: false,
+    rating: false,
+    impactfulTeachings: false,
+    inspired: false,
+    personalInsights: false,
+    suggestions: false,
+    layoutRating: false,
+  });
+
+  const handleRating = (rate) => {
+    setRating(rate);
+    setErrors((prev) => ({ ...prev, rating: false }));
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    let hasErrors = false;
+
+    if (!name) {
+      setErrors((prev) => ({ ...prev, name: true }));
+      hasErrors = true;
+    }
+    if (!email || !isValidEmail(email)) {
+      setErrors((prev) => ({ ...prev, email: true }));
+      hasErrors = true;
+    }
+    if (rating === 0) {
+      setErrors((prev) => ({ ...prev, rating: true }));
+      hasErrors = true;
+    }
+    if (impactfulTeachings.length === 0) {
+      setErrors((prev) => ({ ...prev, impactfulTeachings: true }));
+      hasErrors = true;
+    }
+    if (inspired === "") {
+      setErrors((prev) => ({ ...prev, inspired: true }));
+      hasErrors = true;
+    }
+    if (inspired === "Yes" && !personalInsights) {
+      setErrors((prev) => ({ ...prev, personalInsights: true }));
+      hasErrors = true;
+    }
+    if (!suggestions) {
+      setErrors((prev) => ({ ...prev, suggestions: true }));
+      hasErrors = true;
+    }
+    if (layoutRating === 0) {
+      setErrors((prev) => ({ ...prev, layoutRating: true }));
+      hasErrors = true;
+    }
+
+    if (!hasErrors) {
+      setIsSubmitted(true);
+      console.log({
+        name,
+        email,
+        rating,
+        impactfulTeachings,
+        inspired,
+        personalInsights,
+        suggestions,
+        layoutRating,
+      });
+      // Reset form fields
+      resetForm();
+    }
+  };
+
+  const handleCheckboxChange = (event) => {
+    const value = event.target.value;
+    setImpactfulTeachings((prev) =>
+      prev.includes(value) ? prev.filter((item) => item !== value) : [...prev, value]
+    );
+    setErrors((prev) => ({ ...prev, impactfulTeachings: false }));
+  };
+
+  const closePopup = () => {
+    setIsSubmitted(false);
+  };
+
+  const isValidEmail = (email) => {
+    // Simple email validation
+    return /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email);
+  };
+
+  const resetForm = () => {
+    setName("");
+    setEmail("");
+    setRating(0);
+    setImpactfulTeachings([]);
+    setInspired("");
+    setPersonalInsights("");
+    setSuggestions("");
+    setLayoutRating(0);
+    setHoverRating(0);
+    setErrors({
+      name: false,
+      email: false,
+      rating: false,
+      impactfulTeachings: false,
+      inspired: false,
+      personalInsights: false,
+      suggestions: false,
+      layoutRating: false,
+    });
+  };
+
+  return (
+    <div className="feedback-form-container">
+      <form onSubmit={handleSubmit}>
+        <h1>Feedback Form</h1>
+
+        {/* Name Input */}
+        <div className="form-group">
+          <label htmlFor="name">Name</label>
+          <input
+            className={`name ${errors.name ? "error" : ""}`}
+            type="text"
+            id="name"
+            placeholder="Your Name"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            required
+          />
+          {errors.name && <span className="error-message">Please enter your name.</span>}
+        </div>
+
+        {/* Email Input */}
+        <div className="form-group">
+          <label htmlFor="email"> Email</label>
+          <input
+            className={`email ${errors.email ? "error" : ""}`}
+            type="email"
+            id="email"
+            placeholder="Your Email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+          />
+          {errors.email && <span className="error-message">Please enter a valid email address.</span>}
+        </div>
+
+        {/* Content Rating */}
+        <div className="section">
+          <h3>How would you rate the overall content?</h3>
+          <div className="stars">
+            {[1, 2, 3, 4, 5].map((star) => (
+              <span
+                key={star}
+                className={`star ${star <= (hoverRating || rating) ? "star-filled" : ""} ${
+                  errors.rating && rating === 0 ? "error" : ""
+                }`}
+                onClick={() => handleRating(star)}
+                onMouseEnter={() => setHoverRating(star)}
+                onMouseLeave={() => setHoverRating(0)}
+              >
+                ★
+              </span>
+            ))}
+            {errors.rating && <span className="error-message">Please rate the content.</span>}
+          </div>
+        </div>
+
+        {/* Most Impactful Teachings */}
+        <div className="section">
+          <h3>Which teachings were most impactful for you?</h3>
+          <div className={`checkbox-group ${errors.impactfulTeachings ? "error" : ""}`}>
+            <label>
+              <input type="checkbox" value="Life Philosophy" onChange={handleCheckboxChange} /> Life Philosophy
+            </label>
+            <label>
+              <input type="checkbox" value="Leadership Skills" onChange={handleCheckboxChange} /> Leadership Skills
+            </label>
+            <label>
+              <input type="checkbox" value="Strategic Thinking" onChange={handleCheckboxChange} /> Strategic Thinking
+            </label>
+            <label>
+              <input type="checkbox" value="Relationship Management" onChange={handleCheckboxChange} /> Relationship Management
+            </label>
+            <label>
+              <input type="checkbox" value="Personal Development" onChange={handleCheckboxChange} /> Personal Development
+            </label>
+            {errors.impactfulTeachings && (
+              <span className="error-message">Please select at least one impactful teaching.</span>
+            )}
+          </div>
+        </div>
+
+        {/* Personal Insights */}
+        <div className="section">
+          <h3>Did Chanakya's teachings inspire you to make changes in your life?</h3>
+          <div className={`form-group ${errors.inspired ? "error" : ""}`}>
+            <select value={inspired} onChange={(e) => setInspired(e.target.value)} required>
+              <option value="">Select an option</option>
+              <option value="Yes">Yes</option>
+              <option value="No">No</option>
+            </select>
+            {errors.inspired && <span className="error-message">Please select an option.</span>}
+          </div>
+          {inspired === "Yes" && (
+            <div className={`form-group ${errors.personalInsights ? "error" : ""}`}>
+              
+              <textarea
+                className="personal-insights"
+                id="personal-insights"
+                value={personalInsights}
+                onChange={(e) => setPersonalInsights(e.target.value)}
+                placeholder="Describe your personal insights..."
+                required
+              />
+              {errors.personalInsights && (
+                <span className="error-message">Please share your personal insights.</span>
+              )}
+            </div>
+          )}
+        </div>
+        <div className="section">
+  <h3>Do you have any suggestions for additional content or improvements?</h3>
+  <div className={`form-group ${errors.suggestions ? "error" : ""}`}>
+    <textarea
+      className="suggestions"
+      id="suggestions"
+      value={suggestions}
+      onChange={(e) => setSuggestions(e.target.value)}
+      placeholder="Provide your suggestions..."
+      required
+    />
+    {errors.suggestions && (
+      <span className="error-message">Please provide your suggestions.</span>
+    )}
+  </div>
+</div>
+
+       
+
+        {/* Layout Rating */}
+        <div className="section">
+          <h3>How would you rate the website layout and design?</h3>
+          <div className={`stars ${errors.layoutRating ? "error" : ""}`}>
+            {[1, 2, 3, 4, 5].map((star) => (
+              <span
+                key={star}
+                className={`star ${star <= layoutRating ? "star-filled" : ""}`}
+                onClick={() => setLayoutRating(star)}
+              >
+                ★
+              </span>
+            ))}
+            {errors.layoutRating && <span className="error-message">Please rate the layout and design.</span>}
+          </div>
+        </div>
+
         {/* Submit Button */}
         <button type="submit" className="post-button">
           Submit
@@ -112,4 +413,4 @@ const Feedback = () => {
   );
 };
 
-export default Feedback;
+export default Feedback;
\ No newline at end of file