Design Shoe Company Template in Tailwind CSS

Last Updated : 12 Mar, 2024

In this project, we will be designing a basic template for a Shoe company using Tailwind CSS & JavaScript. The ultimate goal of creating a visually appealing website with Tailwind CSS is to effectively market the company’s products and brand while providing a satisfying and memorable user experience.

shoe

Prerequisites

Approach

Create an HTML file named index.html and link the Tailwind CSS stylesheet for styling.
Design a basic structure including a navigation bar with Home, About, Features, Contact links and a search bar with a search button for filtering shoes.
Implement a shopping cart section with an initial total bill of $0.00.
Create a file named script.js.
Implement methods for displaying the shoes, searching shoes and when a user selects any shoe article update the bill amount. Also implement the feature of removing the articles from the shopping cart.
Make the app responsive using Tailwind CSS classes.

Example: This example shows the above-explained approach.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.16/dist/tailwind.min.css" 
    rel="stylesheet">
    <title>Shoe Company Template</title>
</head>
<body>
    <h1 class="text-3xl text-center 
            text-blue-500 font-bold mb-4">
        SHOE COMPANY
    </h1>
    <nav class="flex items-center py-4 
            sticky top-0 bg-white z-10">
        <ul class="flex-1 text-center">
            <li class="list-none inline-block px-5">
                <a href="#" 
                    class="no-underline text-black 
                        hover:text-blue-500 transition-colors 
                        duration-300 font-bold">
                    Home
                </a>
            </li>
            <li class="list-none inline-block px-2">
                <a href="#" 
                    class="no-underline text-black 
                        hover:text-blue-500 transition-colors 
                        duration-300 font-bold">
                    About
                </a>
            </li>
            <li class="list-none inline-block px-2">
                <a href="#" 
                    class="no-underline text-black 
                        hover:text-blue-500 transition-colors 
                        duration-300 font-bold">
                    Features
                </a>
            </li>
            <li class="list-none inline-block px-2">
                <a href="#" 
                    class="no-underline text-black 
                        hover:text-blue-500 transition-colors 
                        duration-300 font-bold">
                    Contact
                </a>
            </li>
            <li class="list-none inline-block px-2">
                <form class="flex items-center">
                    <input type="text" id="searchInput" 
                        class="w-64 h-8 pl-2 pr-4 
                            rounded-l-lg border border-gray-300 
                            focus:outline-none focus:border-blue-500" 
                        placeholder="Search..." 
                        aria-label="Search shoes">
                    <button class="w-20 h-8 bg-blue-500 
                            text-white rounded-r-lg hover:bg-blue-600 
                            transition-colors duration-300" 
                        type="button" 
                        onclick="filterShoes()">
                        Search
                    </button>
                </form>
            </li>
        </ul>
    </nav>

    <div class="h-auto bg-white p-10">
        <ul id="shoe-list" 
            class="flex flex-wrap justify-center align-center gap-10">
        </ul>
    </div>

    
    <div id="cart" class="w-1/3 p-4 bg-gray-100">
        <h2 class="text-xl font-bold mb-4">
            Shopping Cart
        </h2>

        <ul id="cart-items"></ul>
        <div id="total-bill" class="mt-4">
            Total Bill: $0.00
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

Javascript

const shoeList = 
    document.getElementById("shoe-list");
const searchInput = 
    document.getElementById("searchInput");
const cartItemsContainer = 
    document.getElementById("cart-items");

const shoes = [
    {
        name: "Reebok",
        price: "$99.99",
        image: 
        "https://media.geeksforgeeks.org/wp-content/uploads/20240301112151/shoes.png",
    },
    {
        name: "Sketchers",
        price: "$129.99",
        image: 
        "https://media.geeksforgeeks.org/wp-content/uploads/20240301112151/sneakers.png",
    },
    {
        name: "Adidas",
        price: "$149.99",
        image: 
        "https://media.geeksforgeeks.org/wp-content/uploads/20240301112150/running-shoe.png",
    },
    {
        name: "Converse",
        price: "$199.99",
        image: 
        "https://media.geeksforgeeks.org/wp-content/uploads/20240301112149/sneakers-(1).png",
    },
];

function renderShoes(shoes) {
    shoeList.innerHTML = "";
    shoes.forEach((shoe) => {
        const shoeCard = 
            document.createElement("li");
        shoeCard.classList.add(
            "p-2",
        );

        const shoeLink = 
            document.createElement("a");
        shoeLink.classList.add(
            "block",
            "bg-gray-200",
            "rounded-lg",
            "shadow-md",
            "hover:bg-gray-300",
            "transition-colors",
            "duration-300"
        );
        shoeLink.href = "#";

        const shoeImage = 
            document.createElement("img");
        shoeImage.classList.
            add("w-60", "h-60", "object-cover", "p-10");
        shoeImage.src = `${shoe.image}`;
        shoeImage.alt = shoe.name;

        const shoeDetails = 
            document.createElement("div");
        shoeDetails.classList.add("p-4");

        const shoeTitle = 
            document.createElement("h3");
        shoeTitle.classList.
            add("text-lg", "font-bold", "mb-1");
        shoeTitle.textContent = shoe.name;

        const shoePrice = 
            document.createElement("p");
        shoePrice.classList.
            add("text-gray-700");
        shoePrice.textContent = shoe.price;

        const buyNowButton = 
            document.createElement("button");
        buyNowButton.textContent = "Buy Now";
        buyNowButton.classList.add(
            "bg-blue-500",
            "text-white",
            "px-4",
            "py-2",
            "rounded-md",
            "mt-2",
            "hover:bg-blue-600",
            "transition-colors",
            "duration-300"
        );

        buyNowButton.addEventListener("click", () => {
            addToCart(shoe);
            updateTotalBillDisplay();
        });

        shoeDetails.appendChild(shoeTitle);
        shoeDetails.appendChild(shoePrice);
        shoeDetails.appendChild(buyNowButton);

        shoeLink.appendChild(shoeImage);
        shoeLink.appendChild(shoeDetails);
        shoeCard.appendChild(shoeLink);
        shoeList.appendChild(shoeCard);

        shoeLink.addEventListener("mouseover", () => {
            shoeLink.classList.add("scale-105");
        });

        shoeLink.addEventListener("mouseout", () => {
            shoeLink.classList.remove("scale-105");
        });
    });
}

function addToCart(item) {
    const existingCartItem = 
        Array.from(cartItemsContainer.children).
        find((cartItem) => {
            return cartItem.dataset.name === item.name;
        }
    );

    if (existingCartItem) {
        const quantityElement = 
            existingCartItem.querySelector(".quantity");
        const quantity = 
            parseInt(quantityElement.textContent);
        quantityElement.textContent = quantity + 1;
    } else {
        const cartItem = 
            document.createElement("li");
        cartItem.textContent = 
            `${item.name} - ${item.price} x `;
        cartItem.classList.add("cart-item");
        cartItem.dataset.name = item.name;

        const quantityElement = 
            document.createElement("span");
        quantityElement.textContent = "1";
        quantityElement.classList.
            add("quantity");
        cartItem.appendChild(quantityElement);

        cartItemsContainer.appendChild(cartItem);
    }
}

function calculateTotalBill() {
    let totalBill = 0;

    Array.from(cartItemsContainer.children).
        forEach((cartItem) => {
        const itemName = cartItem.textContent;
        // Extract the price from the item name
        const itemPrice = 
            parseFloat(
                itemName.split(" - ")[1].replace("$", "")
            );
        const quantity = parseInt(
            cartItem.querySelector(".quantity").textContent
        );

        totalBill += itemPrice * quantity;
    });

    return totalBill.toFixed(2);
}

function updateTotalBillDisplay() {
    const totalBillElement = 
        document.getElementById("total-bill");
    const totalBill = calculateTotalBill();
    totalBillElement.textContent = `$${totalBill}`;
}

renderShoes(shoes);

searchInput.addEventListener("input", filterShoes);

function filterShoes() {
    const query = searchInput.value.toLowerCase();
    const filteredShoes = shoes.filter((shoe) =>
        shoe.name.toLowerCase().includes(query)
    );
    renderShoes(filteredShoes);
    searchInput.value = query;
}

updateTotalBillDisplay();

Output:

shoe