This website aims to provide a platform for selling crochet products. It is built using Bootstrap and JavaScript React, offering a fully functional and reactive user experience.
The motivation behind creating this crochet-selling website is to provide a dedicated platform for my friend's crochet business. Currently, she sells her products through Facebook, but she wants to showcase her creations and upcoming products in a more organized and professional manner. As a software engineering student, I saw this as an opportunity to apply and enhance my skills while helping my friend grow her business.
Currently, the website is being converted from static to dynamic code, to later integrate the database.
- User authentication
- Product listing and search functionality
- Shopping cart and checkout process
- User reviews and ratings
- Order tracking and history
- Bootstrap: A popular CSS framework for building responsive and visually appealing websites.
{Home Page}
{One of the Product Pages}
{Shopping Cart}
Here is an example of how to add a product to the shopping cart:
function updateOrderSummary() {
let subtotal = 0;
productRows.forEach(row => {
const quantityCell = row.querySelector('.quantity-column');
const priceCell = row.querySelector('.price-column');
const price = parseFloat(priceCell.innerText.replace('$', ''));
let quantity = parseInt(quantityCell.innerText);
if (quantity <= 0) {
row.style.display = 'none';
} else {
row.style.display = 'table-row';
subtotal += price * quantity;
}
});
orderSubtotalElement.innerText = `$${subtotal.toFixed(2)}`;
// Update other costs and total based on the calculated subtotal
const shippingCost = checkedSwitch.checked ? 10.00 : 0.00;
const taxRate = 0.115;
const taxCost = subtotal * taxRate;
const totalCost = subtotal + shippingCost + taxCost;
shippingCostElement.innerText = `$${shippingCost.toFixed(2)}`;
taxCostElement.innerText = `$${taxCost.toFixed(2)}`;
totalCostElement.innerText = `$${totalCost.toFixed(2)}`;
}Follow these steps to use the crochet-selling website:
- Browse through the available products or use the search functionality to find specific items.
- Click on a product to view more details and add it to your shopping cart.
- Proceed to the checkout process, providing the necessary information.
- Track your orders and view your order history.