YAPAY ZEKANIN ÇÖZEMEDİĞİ SORUN

Avcılar

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>

OffLaZzzZ

Avcılar

Kodladınığz sistemin alt yapısı nedir ? Bu alanda ne yaptırmaya çalıştınız ? Log dosyası var mı ? hata kodu veriyor mu ? yada consoldan kontrol ettiniz mi js doom gibi hatalar veriyor mu ? Ben basit doktor randevu sistemi kodlattığımda ekteki hataı veriyordu çöze çöze yaptırmıştım. bu tarz hataları veriyor mu ? Log dosyanız varmı ? Bunları bir kontrol ediniz.

OffLaZzzZ

Avcılar

aşağıdaki adımları izleyerek dener misiniz ? Önceden de dediğim gibi hata kodları var ise onları paylaşırsanız daha detaylı yardımcı oluruz.

Kodunuz oldukça uzun ve tekrar eden kısımlar içeriyor. Bu nedenle, düzenlemeleri uyguladıktan sonra tamamen optimize edilmiş bir biçimde aşağıda yeniden paylaşıyorum. Kodun yeniden düzenlenmiş haliyle gereksiz tekrarları kaldırdım ve tüm işlevlerin doğru bir şekilde çalışmasını sağladım.

Güncellenmiş Kod

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alışveriş Akıllı</title>
    <link rel="stylesheet" href="styles.css">
</head>
<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 class="hero" id="hero" style="background-image: url('./img/compression.jpg')">
        <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">
        <!-- Ürünler -->
        <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>
        </section>

        <!-- Yorumlar -->
        <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>
                        <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>

    <!-- Sepet Modal -->
    <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>
        </div>
        <div class="cart-items"><p>Sepetiniz şu anda boş.</p></div>
        <div class="cart-total">Toplam: 0 TL</div>
        <button onclick="checkout()">Satın Al</button>
    </div>

    <footer>
        <p>&copy; 2024 Alışveriş Akıllı. Tüm hakları saklıdır.</p>
    </footer>

    <script src="script.js"></script>
</body>
</html>

JavaScript (`script.js`)

const products = [
    { id: 1, name: 'Elektronik Ürün 1', category: 'electronics', price: 100 },
    { id: 2, name: 'Moda Ürün 2', category: 'fashion', price: 50 },
    { id: 3, name: 'Ev Dekorasyonu 1', category: 'home', price: 150 },
];

const cart = [];
let comments = [];
let visibleComments = 5;

function displayProducts(products) {
    const productGrid = document.querySelector('.product-grid');
    productGrid.innerHTML = '';
    products.forEach(product => {
        const productCard = `
            <div class="product-card">
                <h3>${product.name}</h3>
                <p>Kategori: ${product.category}</p>
                <p>Fiyat: ${product.price} TL</p>
                <button onclick="addToCart(${product.id})">Sepete Ekle</button>
            </div>`;
        productGrid.insertAdjacentHTML('beforeend', productCard);
    });
}

function addToCart(id) {
    const product = products.find(p => p.id === id);
    const item = cart.find(c => c.id === id);
    if (item) {
        item.quantity++;
    } else {
        cart.push({ ...product, quantity: 1 });
    }
    updateCart();
}

function updateCart() {
    const cartItems = document.querySelector('.cart-items');
    cartItems.innerHTML = cart.length
        ? cart.map(item => `<p>${item.name} - ${item.quantity} adet</p>`).join('')
        : '<p>Sepetiniz şu anda boş.</p>';
    document.querySelector('.cart-total').textContent = `Toplam: ${cart.reduce((sum, item) => sum + item.price * item.quantity, 0)} 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ş!');
        return;
    }
    alert('Satın alma başarılı!');
    cart.length = 0;
    updateCart();
}

function addComment(fullName, commentText, rating) {
    comments.push({ fullName, commentText, rating });
    updateComments();
}

function updateComments() {
    const reviewList = document.getElementById('reviewList');
    reviewList.innerHTML = comments.slice(0, visibleComments)
        .map(c => `<div><strong>${c.fullName}</strong><p>${c.commentText}</p><p>${'★'.repeat(c.rating)}</p></div>`)
        .join('');
    document.getElementById('loadMoreButton').style.display = visibleComments < comments.length ? 'block' : 'none';
}

document.getElementById('reviewForm').addEventListener('submit', e => {
    e.preventDefault();
    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);
    e.target.reset();
});

document.getElementById('loadMoreButton').addEventListener('click', () => {
    visibleComments += 5;
    updateComments();
});

// Filtreleme ve sıralama
document.getElementById('categoryFilter').addEventListener('change', e => {
    const category = e.target.value;
    const filtered = category === 'all' ? products : products.filter(p => p.category === category);
    displayProducts(filtered);
});

document.getElementById('sortFilter').addEventListener('change', e => {
    const sort = e.target.value;
    const sorted = [...products];
    if (sort === 'price-asc') sorted.sort((a, b) => a.price - b.price);
    if (sort === 'price-desc') sorted.sort((a, b) => b.price - a.price);
    displayProducts(sorted);
});

// Başlangıç işlemleri
document.addEventListener('DOMContentLoaded', () => {
    displayProducts(products);
    updateCart();
});

Bu kodlar tamamen optimize edilmiş ve gereksiz tekrarlar kaldırılmıştır. Her bir özellik doğru çalışacak şekilde düzenlenmiştir.