Yapay zekaya yaptırdığım sitedeki yorum kısmı çalışmıyor. Çözmüştüm sonra sıra yorumların tasarımını yapmaya gelince yorum yapınca çıkan yorumun gözükmemesinede sebep oldu. Halada çözemiyor bende pek js den anlamıyorum. Anlayan yardımcı olabilirmi?
 <body>
    <header>
        <div class="logo">Alışveriş Akıllı</div>
        <nav>
            <ul class="nav-links">
                <li><a href="#hero">Ana Sayfa</a></li>
                <li><a href="#products">Ürünler</a></li>
                <li><a href="#about">Hakkımızda</a></li>
                <li><a href="#contact">İletişim</a></li>
                <li><a href="javascript:toggleCartModal();">Sepet</a></li>
            </ul>
        </nav>
    </header>

    <section style="background-image: url(../ecommercewebsite/img/compression.jpg)" class="hero" id="hero">
        <h1>Alışveriş Akıllı'ya Hoşgeldiniz</h1>
        <p>İhtiyaçlarınıza yönelik her şey tek bir yerde!</p>
        <a href="#products" class="btn">Hemen Satın Al</a>
    </section>
    
    <div class="container">
        <section id="products">
            <h2>Ürünlerimiz</h2>
            <div class="filters">
                <select id="categoryFilter">
                    <option value="all">Tüm Kategoriler</option>
                    <option value="electronics">Elektronik</option>
                    <option value="fashion">Moda</option>
                    <option value="home">Ev Dekorasyonu</option>
                </select>
                <select id="sortFilter">
                    <option value="default">Varsayılan</option>
                    <option value="price-asc">Fiyata Göre (Artan)</option>
                    <option value="price-desc">Fiyata Göre (Azalan)</option>
                </select>
            </div>       
            <div class="product-grid">
                <div class="product-card">
                    <div class="product-badge">Yeni</div>
                    <h3>Ürün 1</h3>
                    <p>Kategori: Elektronik</p>
                    <p>Fiyat: 100 TL</p>
                    <button onclick="addToCart(1)">Sepete Ekle</button>
                </div>            <div class="product-card">
                    <div class="product-badge">Yeni</div>
                    <h3>Ürün 1</h3>
                    <p>Kategori: Elektronik</p>
                    <p>Fiyat: 100 TL</p>
                    <button onclick="addToCart(1)">Sepete Ekle</button>
                </div>
                <div class="product-card">
                    <div class="product-badge">Yeni</div>
                    <h3>Ürün 1</h3>
                    <p>Kategori: Elektronik</p>
                    <p>Fiyat: 100 TL</p>
                    <button onclick="addToCart(1)">Sepete Ekle</button>
                </div>
                <div class="product-card">
                    <div class="product-badge">Yeni</div>
                    <h3>Ürün 1</h3>
                    <p>Kategori: Elektronik</p>
                    <p>Fiyat: 100 TL</p>
                    <button onclick="addToCart(1)">Sepete Ekle</button>
                </div>
                <!-- Ürünler dinamik olarak burada görünecek -->
            </div>
        </section>        
    
        <section id="reviews">
            <h2>Yorumlar</h2>
            <div class="review-form-container">
                <form id="reviewForm">
                    <label for="firstName">Ad:</label>
                    <input type="text" id="firstName" placeholder="Adınız" required>
        
                    <label for="lastName">
                        <input type="checkbox" id="hideLastName"> Soyadı gizle
                    </label>
                    <input type="text" id="lastName" placeholder="Soyadınız" required>
        
                    <label for="reviewText">Yorum:</label>
                    <textarea id="reviewText" placeholder="Yorumunuzu yazın..." required></textarea>
        
                    <label for="rating">Yıldız Verin:</label>
                    <select id="rating" required>
                        <option value="1">1 Yıldız</option>
                        <option value="2">2 Yıldız</option>
                        <option value="3">3 Yıldız</option>
                        <option value="4">4 Yıldız</option>
                        <option value="5">5 Yıldız</option>
                    </select>
        
                    <button type="submit">Gönder</button>
                </form>
            </div>
            <div id="reviewList"></div>
            <button id="loadMoreButton" style="display: none;">Daha Fazla Göster</button>
        </section>                           
    </div>
    
    <div class="modal-overlay" id="modal-overlay" onclick="toggleCartModal()"></div>
    <div class="cart-modal" id="cart-modal">
        <div class="cart-modal-header">
            <button class="cart-modal-close" onclick="toggleCartModal()">&times;</button>
            <h2>Sepetiniz</h2>
            <br>
            <br>
        </div>
        <div class="cart-items">
            <p>Sepetiniz şu anda boş.</p>
        </div>
        <br>
        <br>
        <div class="cart-total">Toplam: 0 TL</div>
        <br>
        <button onclick="checkout()">Satın Al</button>
    </div>
    
    <footer>
        <div class="footer-content">
            <div class="footer-section">
                <h3>Hakkımızda</h3>
                <p>Alışveriş Akıllı, en iyi ürünleri en uygun fiyatlarla sunmayı amaçlar.</p>
            </div>
            <div class="footer-section">
                <h3>Kategoriler</h3>
                <ul class="footer-links">
                    <li><a href="#electronics">Elektronik</a></li>
                    <li><a href="#fashion">Moda</a></li>
                    <li><a href="#home">Ev Dekorasyonu</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h3>Popüler Ürünler</h3>
                <ul class="footer-links">
                    <li><a href="#popular1">Popüler Ürün 1</a></li>
                    <li><a href="#popular2">Popüler Ürün 2</a></li>
                    <li><a href="#popular3">Popüler Ürün 3</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h3>Kurumsal</h3>
                <ul class="footer-links">
                    <li><a href="#about">Hakkımızda</a></li>
                    <li><a href="#contact">İletişim</a></li>
                    <li><a href="#privacy-policy">Gizlilik Politikası</a></li>
                    <li><a href="#terms">Kullanım Şartları</a></li>
                </ul>
            </div>
        </div>
        <p style="text-align: center; margin-top: 2rem;">&copy; 2024 Alışveriş Akıllı. Tüm hakları saklıdır.</p>
    </footer>
    <script>
        const products = [
            { id: 1, name: 'Elektronik Ürün 1', category: 'electronics', price: 100, description: 'Yüksek kaliteli elektronik cihaz.' },
            { id: 2, name: 'Moda Ürün 2', category: 'fashion', price: 50, description: 'Yüksek kaliteli elektronik cihaz.' },
            { id: 3, name: 'Ev Dekorasyonu', category: 'home', price: 150, description: 'Yüksek kaliteli elektronik cihaz.' },
        ];

        function displayProducts(filteredProducts) { 
            const productGrid = document.querySelector('.product-grid');
            productGrid.innerHTML = ''; // Önceki ürünleri temizle
            filteredProducts.forEach(product => {
                const productCard = document.createElement('div');
                productCard.className = 'product-card';
                productCard.innerHTML = `
                    <img src="${product.image || 'default.jpg'}" alt="${product.name}">
                    <h3>${product.name}</h3>
                    <p>Kategori: ${product.category}</p>
                    <p>Fiyat: ${product.price} TL</p>
                    <button onclick="addToCart(${product.id})">Sepete Ekle</button>
                `;
                productGrid.appendChild(productCard); // Ürünü listeye ekle
            });
        }

        function applyFilters() {
            const category = document.getElementById('categoryFilter').value; // Seçilen kategori
            const sortBy = document.getElementById('sortFilter').value; // Sıralama tipi

            let filteredProducts = products;

            if (category !== 'all') { 
                filteredProducts = filteredProducts.filter(product => product.category === category);
            }

            if (sortBy === 'price-asc') {
                filteredProducts.sort((a, b) => a.price - b.price); // Artan sıralama
            } else if (sortBy === 'price-desc') {
                filteredProducts.sort((a, b) => b.price - a.price); // Azalan sıralama
            }

            displayProducts(filteredProducts);
        }

        document.getElementById('categoryFilter').addEventListener('change', applyFilters);
        document.getElementById('sortFilter').addEventListener('change', applyFilters);


        // Filtreleme ve sıralama işlevleri
        document.getElementById('categoryFilter').addEventListener('change', function () {
            const category = this.value;
            const filteredProducts = category === 'all'
                ? products
                : products.filter(product => product.category === category);
            displayProducts(filteredProducts);
        });

        document.getElementById('sortFilter').addEventListener('change', function () {
            const sortBy = this.value;
            let sortedProducts = [...products];
            if (sortBy === 'price-asc') {
                sortedProducts.sort((a, b) => a.price - b.price);
            } else if (sortBy === 'price-desc') {
                sortedProducts.sort((a, b) => b.price - a.price);
            }
            displayProducts(sortedProducts);
        });

        // Sayfa yüklendiğinde tüm ürünleri göster
        document.addEventListener('DOMContentLoaded', () => displayProducts(products));

    
        const cart = [];
        function addToCart(id) {
            const product = products.find(p => p.id === id);
            if (!product) return;

            const cartItem = cart.find(item => item.id === id);
            if (cartItem) {
                cartItem.quantity++; // Miktarı artır
            } else {
                cart.push({ ...product, quantity: 1 }); // Yeni ürün ekle
            }

            updateCart();
            alert('Ürün sepete eklendi!');
        }
    
        function updateCart() {
            const cartItems = document.querySelector('.cart-items');
            cartItems.innerHTML = '';

            if (cart.length === 0) {
                cartItems.innerHTML = '<p>Sepetiniz şu anda boş.</p>';
            } else {
                cart.forEach(item => {
                    const cartItem = document.createElement('div');
                    cartItem.className = 'cart-item';
                    cartItem.innerHTML = `
                        <span>${item.name} - ${item.price} TL x ${item.quantity}</span>
                        <button onclick="removeFromCart(${item.id})">Kaldır</button>
                    `;
                    cartItems.appendChild(cartItem);
                });
            }
        }

        function removeFromCart(id) {
            const cartItem = cart.find(item => item.id === id);
            if (cartItem) {
                if (cartItem.quantity > 1) {
                    cartItem.quantity--; // Miktarı azalt
                } else {
                    cart.splice(cart.indexOf(cartItem), 1); // Ürünü kaldır
                }
            }

            updateCart();
        }

        function calculateTotal() {
            return cart.reduce((total, item) => total + item.price * item.quantity, 0);
        }

        function updateCart() {
            const cartItems = document.querySelector('.cart-items');
            cartItems.innerHTML = '';

            if (cart.length === 0) {
                cartItems.innerHTML = '<p>Sepetiniz şu anda boş.</p>';
            } else {
                cart.forEach(item => {
                    const cartItem = document.createElement('div');
                    cartItem.className = 'cart-item';
                    cartItem.innerHTML = `
                        <span>${item.name} - ${item.price} TL x ${item.quantity}</span>
                        <button onclick="removeFromCart(${item.id})">Kaldır</button>
                    `;
                    cartItems.appendChild(cartItem);
                });
            }

            const total = calculateTotal();
            document.querySelector('.cart-total').textContent = `Toplam: ${total} TL`;
        }
    
        function toggleCartModal() {
            document.getElementById('cart-modal').classList.toggle('active');
            document.getElementById('modal-overlay').classList.toggle('active');
        }
    
        function checkout() {
            if (cart.length === 0) {
                alert('Sepetiniz boş!');
            } else {
                alert('Satın alma işlemi gerçekleştiriliyor!');
                cart.length = 0;
                updateCart();
                toggleCartModal();
            }
        }
    
        document.getElementById('searchInput').addEventListener('input', function () {
            const query = this.value.toLowerCase();
            const productCards = document.querySelectorAll('.product-card');

            let found = false;
            productCards.forEach(card => {
                const name = card.querySelector('h3').textContent.toLowerCase();
                if (name.includes(query)) {
                    card.style.display = '';
                    found = true;
                } else {
                    card.style.display = 'none';
                }
            });

            if (!found) {
                alert('Sonuç bulunamadı!');
            }
        });

        const comments = [];

    document.addEventListener('DOMContentLoaded', function () {
            document.addEventListener('DOMContentLoaded', function () {
        const comments = []; // Yorumları saklamak için kullanılan dizi
        const reviewList = document.getElementById('reviewList'); // Yorumların görüntülendiği bölüm

        function addComment(fullName, commentText, rating) {
            // Yeni yorumu ekliyoruz
            comments.push({ fullName, commentText, rating });

            // DOM'a güncel yorumları yazdırıyoruz
            reviewList.innerHTML = comments.map(comment => `
                <div class="review">
                    <strong>${comment.fullName}</strong>
                    <p>${comment.commentText}</p>
                    <span>${'⭐'.repeat(comment.rating)}</span>
                </div>
            `).join('');

            console.log('Güncellenen Yorumlar:', comments); // Test için yorumları konsola yazdır
        }

        // Test etmek için manuel bir yorum ekleyin
        addComment('Ali Yılmaz', 'Harika bir ürün!', 5);
    });

    // Yorumları DOM'a yazdırma işlevi
    function updateComments() {
        const reviewList = document.getElementById('reviewList');
        reviewList.innerHTML = ''; // Listeyi temizle

        console.log('Updating comments:', comments); // Yorumları kontrol edin

        const commentsToDisplay = comments.slice(0, visibleComments);
        commentsToDisplay.forEach(comment => {
            const commentItem = document.createElement('div');
            commentItem.className = 'review';
            commentItem.innerHTML = `
                <strong>${comment.fullName}</strong>
                <p>${comment.commentText}</p>
                <span>${'⭐'.repeat(comment.rating)}</span>
            `;
            reviewList.appendChild(commentItem);
        });
    }

    // "Daha Fazla Göster" butonuna tıklama işlevi
    document.getElementById('loadMoreButton').addEventListener('click', function () {
        visibleComments = comments.length; // Tüm yorumları göster
       updateComments();
    });

    // Form gönderildiğinde işlev
    document.getElementById('reviewForm').addEventListener('submit', function (e) {
        e.preventDefault(); // Sayfanın yeniden yüklenmesini engelle
        console.log('Form gönderildi'); // Konsola test mesajı ekle

        const firstName = document.getElementById('firstName').value;
        const lastName = document.getElementById('lastName').value;
        const hideLastName = document.getElementById('hideLastName').checked;
        const reviewText = document.getElementById('reviewText').value;
        const rating = document.getElementById('rating').value;

        const fullName = hideLastName ? `${firstName} ${lastName.charAt(0)}.` : `${firstName} ${lastName}`;
        addComment(fullName, reviewText, rating);
        this.reset(); // Formu sıfırla
    });
});

    </script>
</body>
</html>