Skip to content

Commit 5348119

Browse files
NitkarshChourasiaNitkarshChourasia
authored
Merge pull request #1144 from darshjasani/customerreview-darshjasani-main
Develop Customer Review Page: User Reviews with Rating.
2 parents d81ec72 + 6013b64 commit 5348119

File tree

6 files changed

+343
-0
lines changed

6 files changed

+343
-0
lines changed

‎darshjasani/.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.DS_Store

‎darshjasani/Output.png

715 KB
Loading

‎darshjasani/README.md

+21
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](Output.png)
20+
21+

‎darshjasani/customer-reviews.js

+131
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
let reviews = [
2+
{ name: "John Doe", image: "https://via.placeholder.com/100?text=JD", review: "This is an amazing product! I highly recommend it to everyone.", rating: 5 },
3+
{ name: "Jane Smith", image: "https://via.placeholder.com/100?text=JS", review: "Great customer service and quick delivery. Will buy again!", rating: 4 },
4+
{ name: "Mike Johnson", image: "https://via.placeholder.com/100?text=MJ", review: "The quality exceeded my expectations. Very satisfied!", rating: 4.5 }
5+
];
6+
7+
let currentReview = 0;
8+
let currentRating = 0;
9+
10+
11+
function updateReview() {
12+
const review = reviews[currentReview];
13+
document.getElementById('customer-name').textContent = review.name;
14+
document.getElementById('customer-review').textContent = review.review;
15+
document.getElementById('customer-image').src = review.image;
16+
updateMainReviewStarRating(review.rating);
17+
18+
document.getElementById('review-container').style.opacity = 0;
19+
setTimeout(() => {
20+
document.getElementById('review-container').style.opacity = 1;
21+
}, 300);
22+
}
23+
24+
function updateMainReviewStarRating(rating) {
25+
const starContainer = document.getElementById('customer-rating');
26+
starContainer.innerHTML = '';
27+
for (let i = 1; i <= 5; i++) {
28+
const star = document.createElement('i');
29+
star.classList.add('fas', 'fa-star');
30+
if (i <= rating) {
31+
star.classList.add('checked');
32+
}
33+
starContainer.appendChild(star);
34+
}
35+
}
36+
37+
function updateModalStarRating(rating) {
38+
const stars = document.querySelectorAll('.modal .star-rating i');
39+
stars.forEach((star, index) => {
40+
if (index < rating) {
41+
star.classList.remove('far');
42+
star.classList.add('fas', 'checked');
43+
} else {
44+
star.classList.remove('fas', 'checked');
45+
star.classList.add('far');
46+
}
47+
});
48+
}
49+
50+
51+
document.getElementById('prev-btn').addEventListener('click', () => {
52+
currentReview = (currentReview - 1 + reviews.length) % reviews.length;
53+
updateReview();
54+
});
55+
56+
document.getElementById('next-btn').addEventListener('click', () => {
57+
currentReview = (currentReview + 1) % reviews.length;
58+
updateReview();
59+
});
60+
61+
document.getElementById('random-btn').addEventListener('click', () => {
62+
currentReview = Math.floor(Math.random() * reviews.length);
63+
updateReview();
64+
});
65+
66+
// Modal functionality
67+
const modal = document.getElementById('add-review-modal');
68+
const addReviewBtn = document.getElementById('add-review-btn');
69+
const closeBtn = document.getElementsByClassName('close')[0];
70+
71+
addReviewBtn.onclick = function() {
72+
modal.style.display = "block";
73+
currentRating = 0;
74+
updateModalStarRating(currentRating);
75+
}
76+
77+
closeBtn.onclick = function() {
78+
modal.style.display = "none";
79+
}
80+
81+
window.onclick = function(event) {
82+
if (event.target == modal) {
83+
modal.style.display = "none";
84+
}
85+
}
86+
87+
// Star rating functionality
88+
// Star rating functionality
89+
const modalStarRating = document.querySelector('.modal .star-rating');
90+
modalStarRating.addEventListener('click', (e) => {
91+
if (e.target.matches('i')) {
92+
const rating = parseInt(e.target.getAttribute('data-rating'));
93+
currentRating = rating;
94+
updateModalStarRating(rating);
95+
}
96+
});
97+
98+
99+
100+
function addEmoji(emoji) {
101+
const reviewTextarea = document.getElementById('new-review');
102+
reviewTextarea.value += emoji;
103+
}
104+
105+
document.getElementById('submit-review').addEventListener('click', () => {
106+
const name = document.getElementById('new-name').value;
107+
const imageFile = document.getElementById('new-image').files[0];
108+
const review = document.getElementById('new-review').value;
109+
110+
if (name && imageFile && review && currentRating > 0) {
111+
const reader = new FileReader();
112+
reader.onload = function(e) {
113+
reviews.push({ name, image: e.target.result, review, rating: currentRating });
114+
currentReview = reviews.length - 1;
115+
updateReview();
116+
modal.style.display = "none";
117+
118+
// Clear input fields
119+
document.getElementById('new-name').value = '';
120+
document.getElementById('new-image').value = '';
121+
document.getElementById('new-review').value = '';
122+
currentRating = 0;
123+
updateModalStarRating(currentRating);
124+
};
125+
reader.readAsDataURL(imageFile);
126+
} else {
127+
alert('Please fill in all fields and select a rating');
128+
}
129+
});
130+
131+
updateReview();

‎darshjasani/index.html

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Customer Reviews</title>
7+
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📝</text></svg>">
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
9+
<link rel="stylesheet" href="style.css">
10+
11+
</head>
12+
<body>
13+
<div class="container">
14+
<h1>Customer Reviews</h1>
15+
<div id="review-container" class="review-container">
16+
<img id="customer-image" class="customer-image" src="https://via.placeholder.com/100" alt="Customer">
17+
<div class="review-text">
18+
<h3 id="customer-name">John Doe</h3>
19+
<div id="customer-rating" class="star-rating"></div>
20+
<p id="customer-review">This is an amazing product! I highly recommend it to everyone.</p>
21+
</div>
22+
</div>
23+
<div class="buttons">
24+
<button id="prev-btn">Previous</button>
25+
<button id="random-btn">Random</button>
26+
<button id="next-btn">Next</button>
27+
<button id="add-review-btn">Add Review</button>
28+
</div>
29+
</div>
30+
31+
<div id="add-review-modal" class="modal">
32+
<div class="modal-content">
33+
<span class="close">&times;</span>
34+
<h2>Add a Review</h2>
35+
<input type="text" id="new-name" placeholder="Your Name">
36+
<input type="file" id="new-image" accept="image/*">
37+
<div class="star-rating">
38+
<i class="far fa-star" data-rating="1"></i>
39+
<i class="far fa-star" data-rating="2"></i>
40+
<i class="far fa-star" data-rating="3"></i>
41+
<i class="far fa-star" data-rating="4"></i>
42+
<i class="far fa-star" data-rating="5"></i>
43+
</div>
44+
<textarea id="new-review" placeholder="Your Review"></textarea>
45+
<div class="emoji-picker">
46+
<button onclick="addEmoji('😀')">😀</button>
47+
<button onclick="addEmoji('👍')">👍</button>
48+
<button onclick="addEmoji('❤️')">❤️</button>
49+
<button onclick="addEmoji('🌟')">🌟</button>
50+
<button onclick="addEmoji('🎉')">🎉</button>
51+
<button onclick="addEmoji('☹️')">☹️</button>
52+
</div>
53+
<button id="submit-review">Submit Review</button>
54+
</div>
55+
</div>
56+
57+
<script src="customer-reviews.js"></script>
58+
</body>
59+
</html>

‎darshjasani/style.css

+131
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
margin: 0;
4+
padding: 0;
5+
background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
6+
background-attachment: fixed;
7+
}
8+
.container {
9+
max-width: 800px;
10+
margin: 0 auto;
11+
padding: 20px;
12+
}
13+
h1 {
14+
text-align: center;
15+
color: #333;
16+
}
17+
.review-container {
18+
background-color: rgba(255, 255, 255, 0.9);
19+
border-radius: 10px;
20+
padding: 20px;
21+
margin-top: 20px;
22+
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
23+
transition: transform 0.3s ease;
24+
}
25+
.review-container:hover {
26+
transform: translateY(-5px);
27+
}
28+
.customer-image {
29+
width: 100px;
30+
height: 100px;
31+
border-radius: 50%;
32+
object-fit: cover;
33+
margin-right: 20px;
34+
float: left;
35+
}
36+
.review-text {
37+
overflow: hidden;
38+
}
39+
.buttons {
40+
text-align: center;
41+
margin-top: 20px;
42+
}
43+
button {
44+
padding: 10px 20px;
45+
margin: 0 10px;
46+
font-size: 16px;
47+
cursor: pointer;
48+
background-color: #4CAF50;
49+
color: white;
50+
border: none;
51+
border-radius: 5px;
52+
transition: background-color 0.3s ease;
53+
}
54+
button:hover {
55+
background-color: #45a049;
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: rgba(0,0,0,0.4);
67+
}
68+
.modal-content {
69+
background-color: #fefefe;
70+
margin: 15% auto;
71+
padding: 20px;
72+
border: 1px solid #888;
73+
width: 80%;
74+
max-width: 500px;
75+
border-radius: 10px;
76+
}
77+
.close {
78+
color: #aaa;
79+
float: right;
80+
font-size: 28px;
81+
font-weight: bold;
82+
}
83+
.close:hover,
84+
.close:focus {
85+
color: black;
86+
text-decoration: none;
87+
cursor: pointer;
88+
}
89+
.modal input, .modal textarea {
90+
width: 100%;
91+
padding: 10px;
92+
margin: 10px 0;
93+
border: 1px solid #ddd;
94+
border-radius: 5px;
95+
box-sizing: border-box;
96+
}
97+
.modal input[type="text"] {
98+
height: 40px;
99+
}
100+
.modal textarea {
101+
height: 100px;
102+
resize: vertical;
103+
}
104+
.modal input[type="file"] {
105+
padding: 10px 0;
106+
}
107+
.emoji-picker {
108+
margin-top: 10px;
109+
}
110+
.emoji-picker button {
111+
font-size: 20px;
112+
margin: 2px;
113+
padding: 5px;
114+
background: none;
115+
border: none;
116+
cursor: pointer;
117+
}
118+
.star-rating {
119+
font-size: 24px;
120+
color: #ddd;
121+
}
122+
.star-rating .fa-star.checked {
123+
color: #ffd700;
124+
}
125+
@media (max-width: 600px) {
126+
.customer-image {
127+
float: none;
128+
display: block;
129+
margin: 0 auto 20px;
130+
}
131+
}

0 commit comments

Comments
 (0)