grocery.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Find Grocery Deals</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 20px;
            background-color: #f4f4f4;
            color: #333;
            padding-top: 20px;
            padding-right: 20px;
        }

        #searchBar {
            display: flex;
            margin: 0 auto;
            max-width: 400px;
            width: 100%;
            box-sizing: border-box;
        }

        #zipCodeInput {
            margin-right: 10px;
            flex: 1;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 14px;
        }

        #searchInput {
            flex: 2;
            margin-right: 10px;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 14px;
        }

        button {
            padding: 10px;
            background-color: #4caf50;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }

        #imageGrid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px;
            margin-top: 20px;
            margin-left: 200px;
            margin-right: 200px;
        }

        .imageContainer {
            position: relative;
            overflow: hidden;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            background-color: #fff;
            transition: transform 0.3s ease-in-out;
        }

        .imageContainer:hover {
            transform: scale(1.05);
        }

        .imageContainer img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 8px 8px 0 0;
        }

        .itemInfo {
            padding: 15px;
            text-align: left;
            border-top: 1px solid #eee;
        }

        .itemInfo p {
            margin: 0;
            margin-bottom: 8px;
            font-size: 14px;
        }

        .itemInfo strong {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <center><h1>Nearby Grocery Deals</h1></center>
    <div id="searchBar">
        <input type="text" id="zipCodeInput" placeholder="Enter Zip Code">
        <input type="text" id="searchInput" placeholder="Search for Groceries">
        <button onclick="searchImages()">Search</button>
    </div>

    <div id="imageGrid"></div>

    <script>
        function searchImages() {
            try {
                const zipCodeInput = document.getElementById("zipCodeInput");
                const searchInput = document.getElementById("searchInput");
        
                const zipCode = zipCodeInput.value;
                const searchQuery = searchInput.value;
                const apiUrl = `https://cdn-gateflipp.flippback.com/bf/flipp/items/search?locale=en-us&postal_code=${zipCode}&sid=&q=${searchQuery}`;
        
                fetch(apiUrl)
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Network response was not ok');
                        }
                        return response.json();
                    })
                    .then(data => {
                        const items = data.items;
                        const uniqueImages = new Set();
                        const imageGrid = document.getElementById("imageGrid");
                        imageGrid.innerHTML = '';
        
                        if (items.length == 0) {
                            const itemInfo = document.createElement("div");
                            itemInfo.classList.add("itemInfo");
                            itemInfo.innerHTML = `
                                <p><strong>No results</p>
                            `;
        
                            imageGrid.append(itemInfo);
                        }
        
                        items.forEach(item => {
                            const imageUrl = item.clean_image_url;
                            const currentPrice = Number(item.current_price).toFixed(2);
                            const store = item.merchant_name;
                            const itemName = item.name;
                            const start = item.valid_from.substring(0, 10);
                            const expire = item.valid_to.substring(0, 10);
                            const flyerId = item.flyer_id;
        
                            // Fetch address using getAddressFromFlyerId
                            getAddressFromFlyerId(flyerId, zipCode)
                                .then(address => {
                                    var startDate = new Date(start);
                                    var startDateString = startDate.toLocaleString('default', { month: 'short' }) + " " + startDate.getDate() + ", " + startDate.getFullYear();
        
                                    var expireDate = new Date(expire);
                                    var expireDateString = expireDate.toLocaleString('default', { month: 'short' }) + " " + expireDate.getDate() + ", " + expireDate.getFullYear();
        
                                    if (!uniqueImages.has(imageUrl)) {
                                        const imageContainer = document.createElement("div");
                                        imageContainer.classList.add("imageContainer");
        
                                        const image = document.createElement("img");
                                        image.src = imageUrl;
                                        image.alt = "Item Image";
        
                                        const itemInfo = document.createElement("div");
                                        itemInfo.classList.add("itemInfo");
                                        itemInfo.innerHTML = `
                                            <p><strong>Store:</strong> ${store}</p>
                                            <p><strong>Address:</strong> ${address}</p>
                                            <p><strong>Name:</strong> ${itemName}</p>
                                            <p><strong>Current Price:</strong> $${currentPrice}</p>
                                            <p><strong>Date:</strong> ${startDateString} - ${expireDateString}</p>
                                            `;
        
                                        imageContainer.appendChild(image);
                                        imageContainer.appendChild(itemInfo);
                                        imageGrid.appendChild(imageContainer);
        
                                        uniqueImages.add(imageUrl);
                                    }
                                })
                                .catch(error => {
                                    console.error("Error fetching address:", error);
                                });
                        });
                    })
                    .catch(error => {
                        console.error("Error fetching data:", error);
                    });
            } catch (error) {
                console.error("Error:", error);
            }
        }
        

        function getAddressFromFlyerId(flyerId, zipcode) {
            const url = "https://cdn-gateflipp.flippback.com/bf/flipp/flyers/" + flyerId + "/info?locale=en-us&postal_code=" + zipcode;
        
            return fetch(url)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json();
                })
                .then(data => {
                    const store = data.info.select_stores[0];
                    const address = store.address;
                    const city = store.city;
                    const province = store.province;
                    const postalCode = store.postal_code;

                    return address + ", " + city + " " + province + " " + postalCode;
                })
                .catch(error => {
                    console.error("Error fetching address:", error);
                    throw error;
                });
        }

        function handleKeyDown(event) {
            if (event.key === "Enter") {
                searchImages();
            }
        }
    
        document.getElementById("zipCodeInput").addEventListener("keydown", handleKeyDown);
        document.getElementById("searchInput").addEventListener("keydown", handleKeyDown);
        
    </script>
</body>
</html>