Skip to content

Commit 93e28f2

Browse files
NitkarshChourasiaNitkarshChourasia
authored
Merge pull request #1134 from TiannaLopes/CustomerReviews/tiannalopes
Creating review page
2 parents 0271107 + 60c0be5 commit 93e28f2

File tree

5 files changed

+302
-0
lines changed

5 files changed

+302
-0
lines changed

‎CustomerReviews/README.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# Develop a Javascript Customer Review site.
2+
3+
4+
## Description 📜
5+
6+
Customer Reviews Page is a user-friendly web application created with HTML, CSS, and JavaScript. It seamlessly displays and collects customer reviews, providing a simple yet effective platform for showcasing user feedback.
7+
8+
## Requirements 🛠️
9+
HTML, CSS, and JS.
10+
11+
12+
## Bonuses ✨
13+
A site can have an image of the customer and its testimony.
14+
Next or Prev button also it can have a random button.'
15+
16+
17+
## Screenshot
18+
19+
![Screenshot]Screenshot 2024-05-15 at 1.06.32 PM.png)
20+
21+

‎CustomerReviews/Screenshot 2024-05-15 at 1.06.32 PM.png‎

638 KB
Loading

‎CustomerReviews/customer-reviews.js‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
// Starting mock data
2+
let reviews = [
3+
{
4+
img: "https://www.wfla.com/wp-content/uploads/sites/71/2023/05/GettyImages-1389862392.jpg?w=2560&h=1440&crop=1",
5+
name: "Alice Johnson",
6+
review: "Great service and support!"
7+
},
8+
{
9+
img: "https://i.pinimg.com/736x/32/7e/db/327edb9a15b304efc264668ada03f725.jpg",
10+
name: "Bob Smith",
11+
review: "Very satisfied with the purchase."
12+
},
13+
{
14+
img: "https://img.cutenesscdn.com/-/ppds/c639593c-3f0b-48a5-a623-13f772f411ba.png",
15+
name: "Carol White",
16+
review: "Could be better, but good overall."
17+
}
18+
];
19+
let currentIndex = 0;
20+
21+
function displayReview(index) {
22+
const img = document.getElementById('customer-image');
23+
const name = document.getElementById('customer-name');
24+
const review = document.getElementById('customer-review');
25+
img.style.opacity = 0;
26+
name.style.opacity = 0;
27+
review.style.opacity = 0;
28+
29+
setTimeout(() => {
30+
img.src = reviews[index].img;
31+
name.innerText = reviews[index].name;
32+
review.innerText = reviews[index].review;
33+
img.style.opacity = 1;
34+
name.style.opacity = 1;
35+
review.style.opacity = 1;
36+
}, 500);
37+
}
38+
39+
function setupSidebar() {
40+
const sidebar = document.querySelector('.sidebar');
41+
reviews.forEach((review, index) => {
42+
const div = document.createElement('div');
43+
div.textContent = review.name;
44+
div.onclick = () => {
45+
currentIndex = index;
46+
displayReview(index);
47+
};
48+
sidebar.appendChild(div);
49+
});
50+
}
51+
52+
function nextReview() {
53+
currentIndex = (currentIndex + 1) % reviews.length;
54+
displayReview(currentIndex);
55+
}
56+
57+
function previousReview() {
58+
currentIndex = (currentIndex - 1 + reviews.length) % reviews.length;
59+
displayReview(currentIndex);
60+
}
61+
62+
function randomReview() {
63+
let randomIndex;
64+
do {
65+
randomIndex = Math.floor(Math.random() * reviews.length);
66+
} while (randomIndex === currentIndex);
67+
currentIndex = randomIndex;
68+
displayReview(currentIndex);
69+
}
70+
71+
window.onload = () => {
72+
displayReview(currentIndex);
73+
setupSidebar();
74+
};
75+
76+
function toggleForm() {
77+
const form = document.getElementById('review-form');
78+
form.style.display = form.style.display === "none" ? "block" : "none";
79+
}
80+
81+
document.getElementById('new-review-form').addEventListener('submit', function(event) {
82+
event.preventDefault();
83+
const name = document.getElementById('name').value;
84+
const image = document.getElementById('image').value;
85+
const review = document.getElementById('review').value;
86+
87+
const newReview = { img: image, name: name, review: review };
88+
reviews.push(newReview);
89+
displayReview(reviews.length - 1);
90+
addReviewToSidebar(newReview, reviews.length - 1);
91+
toggleForm();
92+
});
93+
94+
function addReviewToSidebar(review, index) {
95+
const sidebar = document.querySelector('.sidebar');
96+
const div = document.createElement('div');
97+
div.textContent = review.name;
98+
div.onclick = () => {
99+
currentIndex = index;
100+
displayReview(index);
101+
};
102+
sidebar.appendChild(div);
103+
}

‎CustomerReviews/index.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
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="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="default.jpg" alt="Customer Photo">
19+
<div id="customer-name">John Doe</div>
20+
<div id="customer-review">John's review goes here...</div>
21+
<div class="buttons">
22+
<button onclick="previousReview()">Prev</button>
23+
<button onclick="nextReview()">Next</button>
24+
<button onclick="randomReview()">Random</button>
25+
</div>
26+
<button class="add-review" onclick="toggleForm()">Add Review</button>
27+
</div>
28+
29+
30+
<!-- Add customer review form -->
31+
<div id="review-form" class="modal">
32+
<div class="modal-content">
33+
<span onclick="toggleForm()" class="close">&times;</span>
34+
<form id="new-review-form">
35+
<label for="name">Name:</label>
36+
<input type="text" id="name" name="name" required><br>
37+
<label for="image">Image URL:</label>
38+
<input type="text" id="image" name="image" required><br>
39+
<label for="review">Review:</label>
40+
<textarea id="review" name="review" required></textarea><br>
41+
<button type="submit">Submit Review</button>
42+
</form>
43+
</div>
44+
</div>
45+
<script src="customer-reviews.js"></script>
46+
</body>
47+
48+
</html>

‎CustomerReviews/style.css‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
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+
.sidebar {
57+
width: 200px;
58+
background: #EDE7F6;
59+
height: 100%;
60+
overflow-y: auto;
61+
padding: 20px;
62+
}
63+
64+
.sidebar div {
65+
cursor: pointer;
66+
padding: 10px;
67+
margin: 5px;
68+
background-color: #C8E6C9;
69+
border-radius: 5px;
70+
}
71+
72+
.modal {
73+
display: none;
74+
position: fixed;
75+
z-index: 1;
76+
left: 0;
77+
top: 0;
78+
width: 100%;
79+
height: 100%;
80+
overflow: auto;
81+
background-color: rgb(0,0,0);
82+
background-color: rgba(0,0,0,0.4);
83+
}
84+
85+
.modal-content {
86+
background-color: #fefefe;
87+
margin: 15% auto;
88+
padding: 20px;
89+
border: 1px solid #888;
90+
width: 80%;
91+
}
92+
93+
.close {
94+
color: #aaa;
95+
float: right;
96+
font-size: 28px;
97+
font-weight: bold;
98+
}
99+
100+
.close:hover,
101+
.close:focus {
102+
color: black;
103+
text-decoration: none;
104+
cursor: pointer;
105+
}
106+
107+
input[type="text"],
108+
textarea {
109+
width: 95%;
110+
padding: 12px;
111+
margin: 8px 0;
112+
display: inline-block;
113+
border: 1px solid #ccc;
114+
box-sizing: border-box;
115+
}
116+
117+
button[type="submit"] {
118+
background-color: #4CAF50;
119+
color: white;
120+
padding: 14px 20px;
121+
margin: 8px 0;
122+
border: none;
123+
cursor: pointer;
124+
width: 100%;
125+
}
126+
127+
button[type="submit"]:hover {
128+
opacity: 0.8;
129+
}
130+

0 commit comments

Comments
 (0)