Merge pull request #1144 from darshjasani/customerreview-darshjasani-…

…main

Develop Customer Review Page: User Reviews with Rating.

darshjasani/.gitignore

@@ -0,0 +1 @@
+.DS_Store

darshjasani/README.md

@@ -0,0 +1,21 @@
+# Develop a Javascript Customer Review site.
+
+
+## Description 📜
+
+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.
+
+## Requirements 🛠️
+HTML, CSS, and JS.
+
+
+## Bonuses ✨
+A site can have an image of the customer and its testimony.
+Next or Prev button also it can have a random button.'
+
+
+## Screenshot
+
+![Screenshot](Output.png)
+
+

darshjasani/customer-reviews.js

@@ -0,0 +1,131 @@
+let reviews = [
+    { 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 },
+    { name: "Jane Smith", image: "https://via.placeholder.com/100?text=JS", review: "Great customer service and quick delivery. Will buy again!", rating: 4 },
+    { name: "Mike Johnson", image: "https://via.placeholder.com/100?text=MJ", review: "The quality exceeded my expectations. Very satisfied!", rating: 4.5 }
+];
+
+let currentReview = 0;
+let currentRating = 0;
+
+
+function updateReview() {
+    const review = reviews[currentReview];
+    document.getElementById('customer-name').textContent = review.name;
+    document.getElementById('customer-review').textContent = review.review;
+    document.getElementById('customer-image').src = review.image;
+    updateMainReviewStarRating(review.rating);
+
+    document.getElementById('review-container').style.opacity = 0;
+    setTimeout(() => {
+        document.getElementById('review-container').style.opacity = 1;
+    }, 300);
+}
+
+function updateMainReviewStarRating(rating) {
+    const starContainer = document.getElementById('customer-rating');
+    starContainer.innerHTML = '';
+    for (let i = 1; i <= 5; i++) {
+        const star = document.createElement('i');
+        star.classList.add('fas', 'fa-star');
+        if (i <= rating) {
+            star.classList.add('checked');
+        }
+        starContainer.appendChild(star);
+    }
+}
+
+function updateModalStarRating(rating) {
+    const stars = document.querySelectorAll('.modal .star-rating i');
+    stars.forEach((star, index) => {
+        if (index < rating) {
+            star.classList.remove('far');
+            star.classList.add('fas', 'checked');
+        } else {
+            star.classList.remove('fas', 'checked');
+            star.classList.add('far');
+        }
+    });
+}
+
+
+document.getElementById('prev-btn').addEventListener('click', () => {
+    currentReview = (currentReview - 1 + reviews.length) % reviews.length;
+    updateReview();
+});
+
+document.getElementById('next-btn').addEventListener('click', () => {
+    currentReview = (currentReview + 1) % reviews.length;
+    updateReview();
+});
+
+document.getElementById('random-btn').addEventListener('click', () => {
+    currentReview = Math.floor(Math.random() * reviews.length);
+    updateReview();
+});
+
+// Modal functionality
+const modal = document.getElementById('add-review-modal');
+const addReviewBtn = document.getElementById('add-review-btn');
+const closeBtn = document.getElementsByClassName('close')[0];
+
+addReviewBtn.onclick = function() {
+    modal.style.display = "block";
+    currentRating = 0;
+    updateModalStarRating(currentRating);
+}
+
+closeBtn.onclick = function() {
+    modal.style.display = "none";
+}
+
+window.onclick = function(event) {
+    if (event.target == modal) {
+        modal.style.display = "none";
+    }
+}
+
+// Star rating functionality
+// Star rating functionality
+const modalStarRating = document.querySelector('.modal .star-rating');
+modalStarRating.addEventListener('click', (e) => {
+    if (e.target.matches('i')) {
+        const rating = parseInt(e.target.getAttribute('data-rating'));
+        currentRating = rating;
+        updateModalStarRating(rating);
+    }
+});
+
+
+
+function addEmoji(emoji) {
+    const reviewTextarea = document.getElementById('new-review');
+    reviewTextarea.value += emoji;
+}
+
+document.getElementById('submit-review').addEventListener('click', () => {
+    const name = document.getElementById('new-name').value;
+    const imageFile = document.getElementById('new-image').files[0];
+    const review = document.getElementById('new-review').value;
+
+    if (name && imageFile && review && currentRating > 0) {
+        const reader = new FileReader();
+        reader.onload = function(e) {
+            reviews.push({ name, image: e.target.result, review, rating: currentRating });
+            currentReview = reviews.length - 1;
+            updateReview();
+            modal.style.display = "none";
+
+            // Clear input fields
+            document.getElementById('new-name').value = '';
+            document.getElementById('new-image').value = '';
+            document.getElementById('new-review').value = '';
+            currentRating = 0;
+            updateModalStarRating(currentRating);
+        };
+        reader.readAsDataURL(imageFile);
+    } else {
+        alert('Please fill in all fields and select a rating');
+    }
+});
+
+updateReview();

darshjasani/index.html

@@ -0,0 +1,59 @@
+<!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="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>">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link rel="stylesheet" href="style.css">
+
+</head>
+<body>
+    <div class="container">
+        <h1>Customer Reviews</h1>
+        <div id="review-container" class="review-container">
+            <img id="customer-image" class="customer-image" src="https://via.placeholder.com/100" alt="Customer">
+            <div class="review-text">
+                <h3 id="customer-name">John Doe</h3>
+                <div id="customer-rating" class="star-rating"></div>
+                <p id="customer-review">This is an amazing product! I highly recommend it to everyone.</p>
+            </div>
+        </div>
+        <div class="buttons">
+            <button id="prev-btn">Previous</button>
+            <button id="random-btn">Random</button>
+            <button id="next-btn">Next</button>
+            <button id="add-review-btn">Add Review</button>
+        </div>
+    </div>
+
+    <div id="add-review-modal" class="modal">
+        <div class="modal-content">
+            <span class="close">&times;</span>
+            <h2>Add a Review</h2>
+            <input type="text" id="new-name" placeholder="Your Name">
+            <input type="file" id="new-image" accept="image/*">
+            <div class="star-rating">
+                <i class="far fa-star" data-rating="1"></i>
+                <i class="far fa-star" data-rating="2"></i>
+                <i class="far fa-star" data-rating="3"></i>
+                <i class="far fa-star" data-rating="4"></i>
+                <i class="far fa-star" data-rating="5"></i>
+            </div>
+            <textarea id="new-review" placeholder="Your Review"></textarea>
+            <div class="emoji-picker">
+                <button onclick="addEmoji('😀')">😀</button>
+                <button onclick="addEmoji('👍')">👍</button>
+                <button onclick="addEmoji('❤️')">❤️</button>
+                <button onclick="addEmoji('🌟')">🌟</button>
+                <button onclick="addEmoji('🎉')">🎉</button>
+                <button onclick="addEmoji('☹️')">☹️</button>
+            </div>
+            <button id="submit-review">Submit Review</button>
+        </div>
+    </div>
+
+    <script src="customer-reviews.js"></script>
+</body>
+</html>

darshjasani/style.css

@@ -0,0 +1,131 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
+    background-attachment: fixed;
+}
+.container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+}
+h1 {
+    text-align: center;
+    color: #333;
+}
+.review-container {
+    background-color: rgba(255, 255, 255, 0.9);
+    border-radius: 10px;
+    padding: 20px;
+    margin-top: 20px;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+    transition: transform 0.3s ease;
+}
+.review-container:hover {
+    transform: translateY(-5px);
+}
+.customer-image {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    object-fit: cover;
+    margin-right: 20px;
+    float: left;
+}
+.review-text {
+    overflow: hidden;
+}
+.buttons {
+    text-align: center;
+    margin-top: 20px;
+}
+button {
+    padding: 10px 20px;
+    margin: 0 10px;
+    font-size: 16px;
+    cursor: pointer;
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    transition: background-color 0.3s ease;
+}
+button:hover {
+    background-color: #45a049;
+}
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0,0,0,0.4);
+}
+.modal-content {
+    background-color: #fefefe;
+    margin: 15% auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%;
+    max-width: 500px;
+    border-radius: 10px;
+}
+.close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+.close:hover,
+.close:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+}
+.modal input, .modal textarea {
+    width: 100%;
+    padding: 10px;
+    margin: 10px 0;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    box-sizing: border-box;
+}
+.modal input[type="text"] {
+    height: 40px;
+}
+.modal textarea {
+    height: 100px;
+    resize: vertical;
+}
+.modal input[type="file"] {
+    padding: 10px 0;
+}
+.emoji-picker {
+    margin-top: 10px;
+}
+.emoji-picker button {
+    font-size: 20px;
+    margin: 2px;
+    padding: 5px;
+    background: none;
+    border: none;
+    cursor: pointer;
+}
+.star-rating {
+    font-size: 24px;
+    color: #ddd;
+}
+.star-rating .fa-star.checked {
+    color: #ffd700;
+}
+@media (max-width: 600px) {
+    .customer-image {
+        float: none;
+        display: block;
+        margin: 0 auto 20px;
+    }
+}