Elep

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <link rel="shortcut icon" href="images/mixchief-logo.png">
    <title>MixChief</title>
</head>
<body>
    
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-KPSXVH4FDP"></script>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

gtag('config', 'G-KPSXVH4FDP');
    </script>
    <header style="position: relative;">
        <div class="header-content">
            <div class="header-content---inner">
                <img src="/images/mixchief-no-label-trans.png" alt="Logo">
                <h1>MixChief</h1>
                <p>Superior quality, better tasting cocktails.</p>
                <p>To order: Call <a href="tel:+2348133277306">08133277306</a> or Send a message on WhatsApp to <a href="https://wa.me/2348180871672">+2348180871672</a></p>
            </div>
        </div>

</header>
    <div class="tab">
        <div class="search-drinks-menu" id="menu">
            <input type="text" class="form-control filter-drinks" placeholder="Search menu">
            
        </div>
        <section class="place-menu">
            <div class="search-filters">
                <button type="button" class="button btn-circle filter-category active" data-attr="all">
                    All
                </button>
                <button type="button" class="button btn-circle filter-category" data-attr="classic">
                    Classic Cocktails
                </button>
                <button type="button" class="button btn-circle filter-category" data-attr="signature">
                    MixChief Cocktails
                </button>
                <button type="button" class="button btn-circle filter-category" data-attr="virgin">
                    Non-alcoholic Cocktails
                </button>
            </div>
            <div class="place-menu-items" id="drinks-container">
                
            </div>
        </section>
    </div>
    <script>
        document.querySelector('.filter-drinks').addEventListener('keyup', filterItems)

const capitalize = (str) => 
            str ? str.split(" ").map(word => {
                if (typeof word != "string") return word;
                else return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
            }).join(" ") : '';

function drinkTemplate(drink, i, place_slug) {

const cocktails = [
            {
                name: "Long Island Iced Tea",
                description: "Rum, Gin, Vodka, Tequila, Triple Sec, Fresh Lemon juice and Soda",
                price: 3000,
                category: "classic"
            },
            {
                name: "Mojito",
                description: "White rum, sweet and sour mix, mint and soda",
                price: 2700,
                category: "classic"
            },
            {
                name: "Whiskey Sour",
                description: "Bourbon, sweet and sour mix",
                price: 2700,
                category: "classic"
            },
            {
                name: "Classic Margarita",
                description: "Tequila, Triple Sec, sweet and sour mix",
                price: 3000,
                category: "classic"
            },
            {
                name: "Black Russian",
                description: "Vodka, coffee liqeuer",
                price: 3000,
                category: "classic"
            },
            {
                name: "Daquiri",
                description: "Rum, sweet and sour mix",
                price: 2700,
                category: "classic"
            },
            {
                name: "Negroni",
                description: "Gin, sweet vermouth and campari",
                price: 2700,
                category: "classic"
            },
            {
                name: "Manhattan",
                description: "Bourbon, sweet vermouth and angostura bitters",
                price: 2700,
                category: "classic"
            },
            {
                name: "Deep Blue Sea",
                description: "Rum, vodka, blue curacao, pineapple juice, lemon juice",
                price: 3000,
                category: "signature"
            },
            {
                name: "Rush Hour",
                description: "Bourbon whiskey, honey, fresh lime juice",
                price: 3000,
                category: "signature"
            },
            {
                name: "Avatar",
                description: "Vodka, blue curacao, apple juice, bubblegum syrup, fresh lime juice",
                price: 3000,
                category: "signature"
            },
            {
                name: "Collateral",
                description: "Jamaican rum, dark rum, almond syrup, grenadine, fresh lime juice",
                price: 3000,
                category: "signature"
            },
            {
                name: "Virgin Mojito",
                description: "Fresh lime juice, mint and soda water",
                price: 1700,
                category: "virgin"
            },
            {
                name: "Shirley Temple",
                description: "Fresh lime juice, grenadine and ginger ale",
                price: 1700,
                category: "virgin"
            }
        ]

let filteredItems = [...cocktails]

function filterItems(e) {
            const inp = e.target.value;
            filteredItems = [...cocktails].filter(item => item.name.toLowerCase().includes(inp.toLowerCase()));
            document.getElementById('drinks-container').innerHTML = filteredItems.map((cocktail, i) => drinkTemplate(cocktail, i)).join("")
        }

document.getElementById('drinks-container').innerHTML = cocktails.map((cocktail, i) => drinkTemplate(cocktail, i)).join("")

document.querySelectorAll('.filter-category').forEach(catButton => {
            catButton.addEventListener('click', e => {
                e.preventDefault()
                const chosen = catButton.dataset.attr;
                filteredItems = chosen === "all" ? [...cocktails] : [...cocktails].filter(item => item.category.toLowerCase() === chosen.toLowerCase());
                document.getElementById('drinks-container').innerHTML = filteredItems.map((cocktail, i) => drinkTemplate(cocktail, i)).join("")
                document.querySelectorAll('.filter-category').forEach(b => b.classList.remove('active'))
                catButton.classList.add('active')
            })
        })
    </script>
</body>
</html>