office_chairs.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>épipla</title>
    <link rel="stylesheet" href="office_chairs.css">
</head>
<body>
    <h1><center>Chairs</center></h1>
    <div id="office">
        <!-- Chair cards will be dynamically inserted here -->
    </div>

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

        // Function to fetch chair data and images from Unsplash API
        async function fetchChairData() {
            try {
                const response = await fetch('https://api.unsplash.com/search/photos?query=chair&client_id=MIuFsXm_pdrrWzlDJkgna1KcEfobWWCb8whlSip_2rg'); // Replace with your actual Unsplash API access key
                const data = await response.json();
                const chairs = data.results;

                // Loop through the chair data and dynamically create cards
                chairs.forEach((chair, index) => {
                    const chairCard = `
                        <div class="cards">
                            <img id="c${index + 1}" class="c" src="${chair.urls.small}" alt="${chair.alt_description}">
                            <div id="chair">${chair.alt_description ? chair.alt_description : 'Chair'}<hr>
                                <div class="price">₹${(1500 + index * 500)}</div>
                            </div>
                        </div>
                    `;
                    officeDiv.innerHTML += chairCard;
                });
            } catch (error) {
                console.error('Error fetching chair data:', error);
            }
        }

        // Call the function to fetch and display chair data
        fetchChairData();
    </script>
</body>
</html>