jeansanchezfelix / tejidosangelicales.store

Creating a fully fuctional and reactional website, using Bootstrap

tejidosangelicales.store

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.

Motivation

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.

Build Status

Currently, the website is being converted from static to dynamic code, to later integrate the database.

Features

• User authentication
• Product listing and search functionality
• Shopping cart and checkout process
• User reviews and ratings
• Order tracking and history

Tech/Framework used

• Bootstrap: A popular CSS framework for building responsive and visually appealing websites.

Screenshots

{Home Page}

{One of the Product Pages}

{Shopping Cart}

Code Examples

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)}`;
          }

How to Use

Follow these steps to use the crochet-selling website:

1. Browse through the available products or use the search functionality to find specific items.
2. Click on a product to view more details and add it to your shopping cart.
3. Proceed to the checkout process, providing the necessary information.
4. Track your orders and view your order history.

Credits

[email protected]