Merge pull request #668 from Ojas-Arora/shana

Rate Us Backend

BACKEND/server.js

@@ -86,6 +86,18 @@ app.post('/send', upload.single('attachments'), (req, res) => {
   }
 });
 
+// Endpoint to handle feedback submission
+app.post('/api/submit-feedback', (req, res) => {
+  const { emoji, feedback } = req.body;
+
+  // Here you would typically save the feedback to a database
+  // For now, we'll just log it to the console
+  console.log(`Received feedback: Emoji: ${emoji}, Feedback: ${feedback}`);
+
+  // Send a success response
+  res.status(200).send({ message: 'Feedback received successfully!' });
+});
+
 // Add a root route to handle the root URL
 app.get('/', (req, res) => {
   res.send('Welcome to the Stopwatch API!');

src/Components/Contributors.css

@@ -1,88 +1,88 @@
 .contributors-container {
-    width: 100%;
-    height: 100%;
-    padding-top: 0rem;
-    overflow: hidden;
-    margin-bottom: 90px;
-    margin-top: -37px;
-  }
-
-  .contributors-title {
-    margin-top: 4rem;
-    text-align: center;
-    font-size: 2.5rem;
-    font-weight: 600;
-    color: #ff21bc; 
-    margin-bottom: 2rem;
-    text-transform: uppercase;
-  }
-
-  .contributors-grid {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 2rem;
-    margin-bottom: 1rem;
-  }
-
+  width: 100%;
+  height: 100%;
+  padding-top: 0rem;
+  overflow: hidden;
+  margin-bottom: 90px;
+  margin-top: -37px;
+}
+
+.contributors-title {
+  margin-top: 4rem;
+  text-align: center;
+  font-size: 2.5rem;
+  font-weight: 600;
+  color: #ff21bc; 
+  margin-bottom: 2rem;
+  text-transform: uppercase;
+}
+
+.contributors-grid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 2rem;
+  margin-bottom: 1rem;
+}
+
+.contributor-card {
+  width: 100%;
+  max-width: 25%; 
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: #17081e; 
+  border: 1px solid #ff21bc;
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); 
+  padding: 1rem;
+  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; /* Added transition for background color */
+}
+
+.contributor-card:hover {
+  transform: scale(1.05);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); 
+  background-color: #ff21bc; /* Change background color on hover */
+}
+
+.contributor-link {
+  display: block;
+}
+
+.contributor-avatar {
+  width: 5rem;
+  height: 5rem;
+  border-radius: 50%;
+  object-fit: cover;
+  margin-bottom: 1rem;
+  border: 2px solid #9416e9; 
+}
+
+.contributor-name {
+  font-size: 1rem;
+  font-weight: 500;
+  color: #f3f4f6; 
+  margin-bottom: 0.5rem;
+}
+
+.contributor-contributions {
+  color: #d1d5db; 
+}
+
+@media (max-width: 1200px) {
   .contributor-card {
-    width: 100%;
-    max-width: 25%; 
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    background-color: #17081e; 
-    border: 1px solid #ff21bc;
-    border-radius: 0.5rem;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); 
-    padding: 1rem;
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-  }
-
-  .contributor-card:hover {
-    transform: scale(1.05);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); 
-  }
-
-  .contributor-link {
-    display: block;
-  }
-
-  .contributor-avatar {
-    width: 5rem;
-    height: 5rem;
-    border-radius: 50%;
-    object-fit: cover;
-    margin-bottom: 1rem;
-    border: 2px solid #9416e9; 
-  }
-
-  .contributor-name {
-    font-size: 1rem;
-    font-weight: 500;
-    color: #f3f4f6; 
-    margin-bottom: 0.5rem;
-  }
-
-  .contributor-contributions {
-    color: #d1d5db; 
-  }
-
-  @media (max-width: 1200px) {
-    .contributor-card {
       max-width: 33.333%; 
-    }
   }
-
-  @media (max-width: 992px) {
-    .contributor-card {
+}
+
+@media (max-width: 992px) {
+  .contributor-card {
       max-width: 50%; 
-    }
   }
-
-  @media (max-width: 768px) {
-    .contributor-card {
+}
+
+@media (max-width: 768px) {
+  .contributor-card {
       max-width: 83%; 
-    }
   }
-  
+}

src/Components/Contributors.js

@@ -1,6 +1,7 @@
 
 import React, { useEffect, useState } from 'react';
-
+import { Link } from "react-router-dom";
+import homeIcon from '../img/homeicon.png';
 import axios from 'axios';
 import './Contributors.css';
 
@@ -24,6 +25,9 @@ function Contributors() {
   return (
     <div className="contributors-container">
       <h1 className="contributors-title">Our Contributors</h1>
+      <Link to="/">
+          <img src={homeIcon} alt="Home" className="home-icon" style={{ marginTop: '2px' }} />
+        </Link>
       <div className="contributors-grid">
         {contributors.map((contributor) => (
           <div key={contributor.id} className="contributor-card">

src/Components/RateUs.js

@@ -1,3 +1,4 @@
+// RateUsComponent.js
 import React, { useState } from "react";
 import "./RateUs.css";
 import TopContainer from "./TopContainer";
@@ -18,36 +19,52 @@ function RateUsComponent({ previousContent }) {
     setFeedback(e.target.value);
   };
 
-  const handleSubmit = () => {
+  const handleSubmit = async () => {
     if (emoji !== "" && feedback.trim() !== "") {
-      // Reset the state after submitting
-      setEmoji("");
-      setFeedback("");
-      setSubmitted(true); // Hide the rating and feedback area
-      // Optionally handle success feedback, such as showing a thank you message
+      try {
+        const response = await fetch('/api/submit-feedback', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({ emoji, feedback }),
+        });
+
+        if (response.ok) {
+          // Reset the state after submitting
+          setEmoji("");
+          setFeedback("");
+          setSubmitted(true); // Hide the rating and feedback area
+        } else {
+          // Handle error response
+          console.error('Failed to submit feedback');
+        }
+      } catch (error) {
+        console.error('Error:', error);
+      }
     } else {
       // Optionally handle error feedback
+      console.error('Please select an emoji and provide feedback');
     }
   };
 
   return (
     <div>
       <div className="header">
-      <Link to="/">
-  <img src={homeIcon} alt="Home" className="home-icon" style={{ marginTop: '130px' }} />
-</Link>
-
-        <TopContainer /></div>
+        <Link to="/">
+          <img src={homeIcon} alt="Home" className="home-icon" style={{ marginTop: '130px' }} />
+        </Link>
+        <TopContainer />
+      </div>
       <div className="rateUsContainer">
         <Menu />
         <div className={`rate-us-page ${previousContent ? 'animated' : ''}`}>
           <div className="rate-us-container">
-
             {!submitted ? (
               <>
                 <h2 className="rate-us-heading">Rate Our Website</h2>
                 <div className="emoji-selection">
-                  {["😡", "😞", "😐 ", "😊", "😍"].map((emojiOption) => (
+                  {["😡", "😞", "😐", "😊", "😍"].map((emojiOption) => (
                     <span
                       key={emojiOption}
                       className={`emoji ${emoji === emojiOption ? 'selected' : ''}`}
@@ -74,12 +91,7 @@ function RateUsComponent({ previousContent }) {
         </div>
       </div>
     </div>
-
   );
 }
 
 export default RateUsComponent;
-
-
-
-