Make Customer review form looks like default screenshot. And I chenge…

CustomerReviews/Sochan2/README.md

@@ -0,0 +1,26 @@
+# Customer Reviews Web Application
+
+## Overview
+This project is a simple customer reviews web application that allows users to view and submit customer feedback. Users can browse through reviews, navigate between them, or view random ones. Additionally, new reviews can be added through a modal form.
+
+## Technologies Used
+- **HTML5**: Structure of the web pages.
+- **CSS3**: Styling the user interface with a modern, responsive design.
+- **JavaScript**: Functionality for user interaction (e.g., displaying reviews, handling form submission). Use Object.
+- **Framework**: No Framework, libraly
+
+## Features
+- Display a list of customer reviews with associated images.
+- Navigation buttons for cycling through reviews (Previous, Next, Random).
+- A modal form to submit new reviews.
+- Sidebar displaying all customers' names that link to their reviews.
+- Ability to add a new review with a name, image URL, and customer feedback.
+
+
+### Prerequisites
+Make sure you have a web browser installed to run the app. You do not need any special software to run this application, as it is built using basic web technologies (HTML, CSS, JavaScript).
+
+
+
+
+

CustomerReviews/Sochan2/css/style.css

@@ -0,0 +1,246 @@
+body {
+  font-family: Arial, sans-serif;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  height: 100vh;
+  background: #f4f4f4;
+}
+
+.review-container {
+  background: white;
+  padding: 20px;
+  box-shadow: 0 0 10px rgba(0,0,0,0.1);
+  text-align: center;
+  width: 500px; 
+}
+
+#customer-image {
+  width: 150px;
+  height: 150px;
+  border-radius: 50%;
+  margin: 20px auto;
+}
+
+#customer-name, #customer-review {
+  font-size: 20px; 
+  color: #4A148C;
+}
+
+.button
+
+.buttons button {
+  padding: 10px 20px;
+  margin: 10px;
+  background-color: #43A047;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.add-review{
+      padding: 10px 20px;
+  margin: 10px;
+  background-color: #43A047;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.buttons button:hover {
+  background-color: #2E7D32;
+}
+
+
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 1; 
+  left: 0;
+  top: 0;
+  width: 100%; 
+  height: 100%;
+  overflow: auto;
+  background-color: rgb(0,0,0);
+  background-color: rgba(0,0,0,0.4); 
+}
+
+.modal-content {
+  background-color: #fefefe;
+  margin: 15% auto; 
+  padding: 20px;
+  border: 1px solid #888;
+  width: 80%; 
+}
+
+.close {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+input[type="text"],
+textarea {
+  width: 95%;
+  padding: 12px;
+  margin: 8px 0;
+  display: inline-block;
+  border: 1px solid #ccc;
+  box-sizing: border-box;
+}
+
+button[type="submit"] {
+  background-color: #4CAF50;
+  color: white;
+  padding: 14px 20px;
+  margin: 8px 0;
+  border: none;
+  cursor: pointer;
+  width: 100%;
+}
+
+button[type="submit"]:hover {
+  opacity: 0.8;
+}
+
+/* Modal background */
+.modal {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 1000;
+  justify-content: center;
+  align-items: center;
+}
+
+/* Modal content */
+.modal-content {
+  background: #fff;
+  padding: 2rem;
+  border-radius: 8px;
+  width: 90%;
+  max-width: 400px;
+  text-align: center;
+  position: relative;
+  animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Close button */
+.close {
+  position: absolute;
+  top: 10px;
+  right: 15px;
+  font-size: 1.5rem;
+  color: #333;
+  cursor: pointer;
+}
+
+/* Form group */
+.form-group {
+  margin-bottom: 1.5rem;
+  text-align: left;
+}
+
+label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: bold;
+}
+
+input, textarea {
+  width: 100%;
+  padding: 0.8rem;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  font-size: 1rem;
+  margin-top: 0.3rem;
+}
+
+textarea {
+  resize: none;
+  height: 80px;
+}
+
+/* Submit button */
+.submit-btn {
+  background: #007BFF;
+  color: #fff;
+  padding: 0.8rem 1.5rem;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 1rem;
+  transition: background 0.3s ease;
+}
+
+.submit-btn:hover {
+  background: #0056b3;
+}
+
+/* Add review button */
+.add-review-btn {
+  background: #28a745;
+  color: #fff;
+  padding: 0.8rem 1.5rem;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 1rem;
+  transition: background 0.3s ease;
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+}
+
+.add-review-btn:hover {
+  background: #1e7e34;
+}
+
+.sidebar {
+  width: 250px;
+  background-color: #f4f4f4;
+  padding: 20px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.sidebar div {
+  padding: 10px;
+  margin-bottom: 10px;
+  cursor: pointer;
+  background-color: #ddd;
+  border-radius: 4px;
+}
+
+.sidebar div:hover {
+  background-color: #bbb;
+}
+

CustomerReviews/Sochan2/index.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Customer Reviews</title>
+    <link rel="stylesheet" href="css/style.css">
+</head>
+
+<body>
+    <div class="sidebar">
+        <!-- Sidebar to show all reviews -->
+    </div>
+
+    <!-- Reviews -->
+    <div class="review-container">
+        <img id="customer-image" src="" alt="Customer Photo">
+        <div id="customer-name"></div>
+        <div id="customer-review"></div>
+        <div class="buttons">
+            <button id="prev">Prev</button>
+            <button id="next">Next</button>
+            <button id="random">Random</button>
+        </div>
+    </div>
+
+    <div id="review-form" class="modal">
+        <div class="modal-content">
+          <span class="close" id="close-form">&times;</span>
+          <h2>Add Your Review</h2>
+          <form id="new-review-form">
+            <div class="form-group">
+              <label for="name">Name</label>
+              <input type="text" id="name" name="name" placeholder="Your name" required>
+            </div>
+            <div class="form-group">
+              <label for="image">Image URL</label>
+              <input type="text" id="image" name="image" placeholder="Link to your photo" required>
+            </div>
+            <div class="form-group">
+              <label for="review">Review</label>
+              <textarea id="review" name="review" placeholder="Write your review" required></textarea>
+            </div>
+            <button type="submit" class="submit-btn">Submit Review</button>
+          </form>
+        </div>
+      </div>
+      <button id="open-form" class="add-review-btn">Add Review</button>
+
+    <script src="js/customerData.js"></script>
+    <script src="js/main.js"></script>
+</body>
+
+</html>

CustomerReviews/Sochan2/js/customerData.js

@@ -0,0 +1,22 @@
+
+const userObject = [
+  {
+    image: "./img/customer1.png",
+    name: "Bob Smith",
+    customerReview: "Very satisfied with the purchase."
+  },
+
+  {
+    image:  "./img/customer2.png",
+    name: "Alice Johnson",
+    customerReview: "Great service and support!"
+  },
+
+  {
+    image:  "./img/customer3.png",
+    name: "Carol White",
+    customerReview: "Could be better, but good overall."
+  }
+
+]
+