Skip to content

Commit 8695ce8

Browse files
thinkswellthinkswell
authored
Merge pull request #1166 from Sochan2/CustomerReview-Sochan2
Make Customer review form looks like default screenshot. And I chenge…
2 parents fd97a70 + 839909e commit 8695ce8

File tree

9 files changed

+477
-1
lines changed

9 files changed

+477
-1
lines changed

‎CustomerReviews/Sochan2/README.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# Customer Reviews Web Application
2+
3+
## Overview
4+
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.
5+
6+
## Technologies Used
7+
- **HTML5**: Structure of the web pages.
8+
- **CSS3**: Styling the user interface with a modern, responsive design.
9+
- **JavaScript**: Functionality for user interaction (e.g., displaying reviews, handling form submission). Use Object.
10+
- **Framework**: No Framework, libraly
11+
12+
## Features
13+
- Display a list of customer reviews with associated images.
14+
- Navigation buttons for cycling through reviews (Previous, Next, Random).
15+
- A modal form to submit new reviews.
16+
- Sidebar displaying all customers' names that link to their reviews.
17+
- Ability to add a new review with a name, image URL, and customer feedback.
18+
19+
20+
### Prerequisites
21+
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).
22+
23+
24+
25+
26+

‎CustomerReviews/Sochan2/css/style.css‎

Lines changed: 246 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,246 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
display: flex;
4+
justify-content: space-around;
5+
align-items: center;
6+
height: 100vh;
7+
background: #f4f4f4;
8+
}
9+
10+
.review-container {
11+
background: white;
12+
padding: 20px;
13+
box-shadow: 0 0 10px rgba(0,0,0,0.1);
14+
text-align: center;
15+
width: 500px;
16+
}
17+
18+
#customer-image {
19+
width: 150px;
20+
height: 150px;
21+
border-radius: 50%;
22+
margin: 20px auto;
23+
}
24+
25+
#customer-name, #customer-review {
26+
font-size: 20px;
27+
color: #4A148C;
28+
}
29+
30+
.button
31+
32+
.buttons button {
33+
padding: 10px 20px;
34+
margin: 10px;
35+
background-color: #43A047;
36+
color: white;
37+
border: none;
38+
border-radius: 5px;
39+
cursor: pointer;
40+
}
41+
42+
.add-review{
43+
padding: 10px 20px;
44+
margin: 10px;
45+
background-color: #43A047;
46+
color: white;
47+
border: none;
48+
border-radius: 5px;
49+
cursor: pointer;
50+
}
51+
52+
.buttons button:hover {
53+
background-color: #2E7D32;
54+
}
55+
56+
57+
.modal {
58+
display: none;
59+
position: fixed;
60+
z-index: 1;
61+
left: 0;
62+
top: 0;
63+
width: 100%;
64+
height: 100%;
65+
overflow: auto;
66+
background-color: rgb(0,0,0);
67+
background-color: rgba(0,0,0,0.4);
68+
}
69+
70+
.modal-content {
71+
background-color: #fefefe;
72+
margin: 15% auto;
73+
padding: 20px;
74+
border: 1px solid #888;
75+
width: 80%;
76+
}
77+
78+
.close {
79+
color: #aaa;
80+
float: right;
81+
font-size: 28px;
82+
font-weight: bold;
83+
}
84+
85+
.close:hover,
86+
.close:focus {
87+
color: black;
88+
text-decoration: none;
89+
cursor: pointer;
90+
}
91+
92+
input[type="text"],
93+
textarea {
94+
width: 95%;
95+
padding: 12px;
96+
margin: 8px 0;
97+
display: inline-block;
98+
border: 1px solid #ccc;
99+
box-sizing: border-box;
100+
}
101+
102+
button[type="submit"] {
103+
background-color: #4CAF50;
104+
color: white;
105+
padding: 14px 20px;
106+
margin: 8px 0;
107+
border: none;
108+
cursor: pointer;
109+
width: 100%;
110+
}
111+
112+
button[type="submit"]:hover {
113+
opacity: 0.8;
114+
}
115+
116+
/* Modal background */
117+
.modal {
118+
display: none;
119+
position: fixed;
120+
top: 0;
121+
left: 0;
122+
width: 100%;
123+
height: 100%;
124+
background: rgba(0, 0, 0, 0.6);
125+
z-index: 1000;
126+
justify-content: center;
127+
align-items: center;
128+
}
129+
130+
/* Modal content */
131+
.modal-content {
132+
background: #fff;
133+
padding: 2rem;
134+
border-radius: 8px;
135+
width: 90%;
136+
max-width: 400px;
137+
text-align: center;
138+
position: relative;
139+
animation: fadeIn 0.3s ease;
140+
}
141+
142+
@keyframes fadeIn {
143+
from {
144+
opacity: 0;
145+
transform: scale(0.9);
146+
}
147+
to {
148+
opacity: 1;
149+
transform: scale(1);
150+
}
151+
}
152+
153+
/* Close button */
154+
.close {
155+
position: absolute;
156+
top: 10px;
157+
right: 15px;
158+
font-size: 1.5rem;
159+
color: #333;
160+
cursor: pointer;
161+
}
162+
163+
/* Form group */
164+
.form-group {
165+
margin-bottom: 1.5rem;
166+
text-align: left;
167+
}
168+
169+
label {
170+
display: block;
171+
margin-bottom: 0.5rem;
172+
font-weight: bold;
173+
}
174+
175+
input, textarea {
176+
width: 100%;
177+
padding: 0.8rem;
178+
border: 1px solid #ccc;
179+
border-radius: 5px;
180+
font-size: 1rem;
181+
margin-top: 0.3rem;
182+
}
183+
184+
textarea {
185+
resize: none;
186+
height: 80px;
187+
}
188+
189+
/* Submit button */
190+
.submit-btn {
191+
background: #007BFF;
192+
color: #fff;
193+
padding: 0.8rem 1.5rem;
194+
border: none;
195+
border-radius: 5px;
196+
cursor: pointer;
197+
font-size: 1rem;
198+
transition: background 0.3s ease;
199+
}
200+
201+
.submit-btn:hover {
202+
background: #0056b3;
203+
}
204+
205+
/* Add review button */
206+
.add-review-btn {
207+
background: #28a745;
208+
color: #fff;
209+
padding: 0.8rem 1.5rem;
210+
border: none;
211+
border-radius: 5px;
212+
cursor: pointer;
213+
font-size: 1rem;
214+
transition: background 0.3s ease;
215+
position: fixed;
216+
bottom: 20px;
217+
right: 20px;
218+
}
219+
220+
.add-review-btn:hover {
221+
background: #1e7e34;
222+
}
223+
224+
.sidebar {
225+
width: 250px;
226+
background-color: #f4f4f4;
227+
padding: 20px;
228+
position: fixed;
229+
top: 0;
230+
left: 0;
231+
height: 100%;
232+
overflow-y: auto;
233+
}
234+
235+
.sidebar div {
236+
padding: 10px;
237+
margin-bottom: 10px;
238+
cursor: pointer;
239+
background-color: #ddd;
240+
border-radius: 4px;
241+
}
242+
243+
.sidebar div:hover {
244+
background-color: #bbb;
245+
}
246+

‎CustomerReviews/Sochan2/img/customer1.png‎

12.9 KB
Loading

‎CustomerReviews/Sochan2/img/customer2.png‎

12.3 KB
Loading

‎CustomerReviews/Sochan2/img/customer3.png‎

12.4 KB
Loading

‎CustomerReviews/Sochan2/index.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Customer Reviews</title>
8+
<link rel="stylesheet" href="css/style.css">
9+
</head>
10+
11+
<body>
12+
<div class="sidebar">
13+
<!-- Sidebar to show all reviews -->
14+
</div>
15+
16+
<!-- Reviews -->
17+
<div class="review-container">
18+
<img id="customer-image" src="" alt="Customer Photo">
19+
<div id="customer-name"></div>
20+
<div id="customer-review"></div>
21+
<div class="buttons">
22+
<button id="prev">Prev</button>
23+
<button id="next">Next</button>
24+
<button id="random">Random</button>
25+
</div>
26+
</div>
27+
28+
<div id="review-form" class="modal">
29+
<div class="modal-content">
30+
<span class="close" id="close-form">&times;</span>
31+
<h2>Add Your Review</h2>
32+
<form id="new-review-form">
33+
<div class="form-group">
34+
<label for="name">Name</label>
35+
<input type="text" id="name" name="name" placeholder="Your name" required>
36+
</div>
37+
<div class="form-group">
38+
<label for="image">Image URL</label>
39+
<input type="text" id="image" name="image" placeholder="Link to your photo" required>
40+
</div>
41+
<div class="form-group">
42+
<label for="review">Review</label>
43+
<textarea id="review" name="review" placeholder="Write your review" required></textarea>
44+
</div>
45+
<button type="submit" class="submit-btn">Submit Review</button>
46+
</form>
47+
</div>
48+
</div>
49+
<button id="open-form" class="add-review-btn">Add Review</button>
50+
51+
<script src="js/customerData.js"></script>
52+
<script src="js/main.js"></script>
53+
</body>
54+
55+
</html>

‎CustomerReviews/Sochan2/js/customerData.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
2+
const userObject = [
3+
{
4+
image: "./img/customer1.png",
5+
name: "Bob Smith",
6+
customerReview: "Very satisfied with the purchase."
7+
},
8+
9+
{
10+
image: "./img/customer2.png",
11+
name: "Alice Johnson",
12+
customerReview: "Great service and support!"
13+
},
14+
15+
{
16+
image: "./img/customer3.png",
17+
name: "Carol White",
18+
customerReview: "Could be better, but good overall."
19+
}
20+
21+
]
22+

0 commit comments

Comments
 (0)