Untitled

/*
You are a lead front-end developer at "Acme Widgets." We're about to launch a new version of our flagship product page, but we've had a few last-minute changes and some team members are new. We need your help to quickly identify and explain any bugs or issues you find before we go live.

You will be presented with a simplified product page. Your task is to identify all distinct issues that a user might encounter or that violate best practices. For each issue, please:

- Describe the issue: Clearly explain what is wrong.

- Identify the likely cause: Based on your knowledge, what do you suspect is causing this problem?

- Propose a solution: How would you fix it? Be specific about the code or approach.

*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Acme Widget Pro</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f4f4f4;
            color: #333;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #2c3e50;
            text-align: center;
        }
        .product-image {
            width: 100%;
            max-width: 400px;
            display: block;
            margin: 20px auto;
            border: 1px solid #ddd;
            padding: 5px;
            box-sizing: border-box;
        }
        .description {
            line-height: 1.6;
            margin-bottom: 20px;
        }
        .price {
            font-size: 2em;
            color: #e74c3c;
            text-align: center;
            margin-bottom: 20px;
        }
        .add-to-cart {
            display: block;
            width: 80%;
            padding: 15px;
            background-color: #27ae60;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 1.2em;
            cursor: pointer;
            margin: 0 auto 20px auto;
            transition: background-color 0.3s ease;
        }
        .add-to-cart:hover {
            background-color: #229954;
        }
        .reviews {
            margin-top: 30px;
            border-top: 1px solid #eee;
            padding-top: 20px;
        }
        .review-item {
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px dashed #eee;
        }
        .review-item:last-child {
            border-bottom: none;
        }
        .review-author {
            font-weight: bold;
            color: #555;
        }
        .rating {
            color: gold;
            font-size: 1.1em;
        }
        footer {
            text-align: center;
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid #eee;
            color: #777;
        }

        #product-title {
            font-size: 2.5em;
            font-family: 'Times New Roman', serif;
        }

        .price {
            padding: 10px;
        }

        .add-to-cart.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

    </style>
</head>
<body>
    <div class="container">
        <h1 id="product-title">Acme Widget Pro: The Ultimate Solution</h1>
        <img src="https://via.placeholder.com/400x300?text=Acme+Widget+Pro" alt="Acme Widget Pro" class="product-image">

        <p class="description">
            Experience the next generation of productivity with the Acme Widget Pro. Crafted with precision and designed for peak performance, this widget seamlessly integrates into your workflow, enhancing efficiency and delivering unparalleled results. Its robust features and intuitive interface make it the ideal choice for professionals and enthusiasts alike.
        </p>

        <div class="price">$99.99</div>

        <button class="add-to-cart" id="addToCartBtn">Add to Cart</button>

        <section class="reviews">
            <h2>Customer Reviews</h2>
            <div class="review-item">
                <p class="review-author">John Doe</p>
                <p class="rating">★★★★★</p>
                <p>Absolutely love this widget! It's transformed my daily tasks.</p>
            </div>
            <div class="review-item">
                <p class="review-author">Jane Smith</p>
                <p class="rating">★★★★☆</p>
                <p>Great product, though the setup was a bit tricky.</p>
            </div>
            <div class="review-item">
                <p class="review-author">Peter Jones</p>
                <p class="rating">★★★☆☆</p>
                <p>It's okay, nothing groundbreaking. Expected more for the price.</p>
            </div>
        </section>
    </div>

    <footer>
        &copy; 2025 Acme Widgets Inc. All rights reserved.
    </footer>

    <script>
        const addToCartBtn = document.getElementById('addToCartBtn');

        addToCartBtn.addEventListener('click', () => {
            console.log('Adding to cart...');
            addToCartBtn.textContent = 'Adding...';
            addToCartBtn.disabled = true;

            setTimeout(() => {
                alert('Acme Widget Pro added to cart!');
                addToCartBtn.textContent = 'Add to Cart';
                addToCartBtn.disabled = false;
            }, 1500);
        });

        function updateProductAvailability() {
            const productTitle = document.getElementById('product-title');
            if (Math.random() > 0.5) {
                productTitle.textContent += " (In Stock)";
            } else {
                productTitle.textContent += " (Out of Stock)";
                addToCartBtn.disabled = true;
            }
        }
    </script>
</body>
</html>
Editor is loading...