Design Shoe Company Template in Tailwind CSS
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.
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.
<!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>
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.w3wiki.net/wp-content/uploads/20240301112151/shoes.png",
},
{
name: "Sketchers",
price: "$129.99",
image:
"https://media.w3wiki.net/wp-content/uploads/20240301112151/sneakers.png",
},
{
name: "Adidas",
price: "$149.99",
image:
"https://media.w3wiki.net/wp-content/uploads/20240301112150/running-shoe.png",
},
{
name: "Converse",
price: "$199.99",
image:
"https://media.w3wiki.net/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: