Fetch Product Woo Comm In One Click

In this exciting YouTube tutorial, join us as we dive into creating a dynamic product listing page using JavaScript and a FREE API.

index html

Script js

main No errors Lines: — UTF-8 —

<section class="hero-section d-flex align-items-center" id="home">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12 col-lg-10 col-xl-8">
                <div class="terminal-window" id="terminalWindow">
                    <div class="terminal-header d-flex align-items-center gap-2 px-3 py-2">
                        <span class="terminal-btn btn-close-t"></span>
                        <span class="terminal-btn btn-minimize"></span>
                        <span class="terminal-btn btn-maximize"></span>
                        <span class="terminal-title ms-2">
                            <i class="bi bi-terminal-fill me-1" style="color: var(--neon-green); font-size: 0.75rem;"></i>
                            terminal@portfolio: ~
                        </span>
                    </div>

                    <div class="terminal-body" id="terminalBody">
                        <div class="terminal-line">
                            <span class="terminal-prompt">visitor@portfolio:~$</span>
                            <span class="terminal-output"> Welcome. System initialized.</span>
                        </div>
                    </div>

                    <div class="terminal-input-line d-flex align-items-center px-3 py-2" id="terminalInputLine">
                        <span class="terminal-prompt me-2">visitor@portfolio:~$</span>
                        <div class="terminal-input-wrapper flex-grow-1">
                            <input type="text" id="terminalInput" class="terminal-input" placeholder="type a command..." autocomplete="off" spellcheck="false" />
                            <span class="terminal-cursor" id="terminalCursor">▌</span>
                        </div>
                    </div>

                    <div class="terminal-hints px-3 pb-2">
                        <span class="hint-label">try:</span>
                        <span class="hint-cmd" onclick="runCommand('help')">help</span>
                        <span class="hint-cmd" onclick="runCommand('skills')">skills</span>
                        <span class="hint-cmd" onclick="runCommand('projects')">projects</span>
                        <span class="hint-cmd" onclick="runCommand('contact')">contact</span>
                        <span class="hint-cmd" onclick="runCommand('clear')">clear</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

// Product Fetch Example

const productContainer = document.getElementById('products');

async function fetchProducts() {
    try {
        showLoading();

        const response = await fetch(
            'https://fakestoreapi.com/products'
        );

        if (!response.ok) {
            throw new Error('Failed to fetch products');
        }

        const products = await response.json();

        displayProducts(products);

    } catch (error) {
        console.error(error);
        productContainer.innerHTML =
            '<p>Error loading products</p>';
    }
}

function displayProducts(products) {
    productContainer.innerHTML = '';

    products.forEach(product => {
        const card = document.createElement('div');

        card.classList.add('product-card');

        card.innerHTML = `
            <img src="${product.image}"
                 alt="${product.title}">
            <h3>${product.title}</h3>
            <p>₹${product.price}</p>
        `;

        productContainer.appendChild(card);
    });
}

function showLoading() {
    productContainer.innerHTML =
        '<p>Loading products...</p>';
}

document.addEventListener(
    'DOMContentLoaded',
    fetchProducts
);