Letter: E-commerce Website

Project 1

Description:

Developed an original project simulating an eCommerce website where users can shop for handwritten letters. Built using HTML, CSS, and JavaScript, the application includes features such as automatic calculations, dynamic cart management, discount code functionality, and a responsive layout to enhance the user experience.

Technologies:

HTML, CSS, and JavaScript.

Features:

  • Automatic Calculations: Calculates the subtotal and total amounts.
  • Dynamic Cart Management: Items are dynamically added to the cart.
  • Discount Code Functionality: Allows users to apply coupon codes for discounts.
  • Responsive Interactions:Users receive alerts and updates immediately for key actions like adding items, applying coupons.

Purpose:

To practice building an eCommerce website from scratch.

How it works:

The code begins by loading the cart data from localStorage, or initializing an empty array if no data exists. It stores the data in localStorage in JSON format to ensure it persists even when the page reloads.

Example:

            [
              { "id": "1", "name": "Handwritten", "price": 20.00, "quantity": 1 }
            ]

The code uses if...else statements to check whether an item already exists in the cart. If the item is not present, it adds it to the cart.

A forEach loop executes the "add to cart" function whenever the associated event listener is triggered, such as a click event. This dynamically generates HTML to display cart items and their quantities.

The code also handles calculations for the subtotal, shipping cost, and total amount, updating and displaying these values in the DOM.

The code utilizes template literals delimited by backticks (`) to display the output of expressions, including dynamic values prefixed by the dollar sign ($).

The code uses an if...else statement to implement discount functionality via a coupon code when the "Apply" button is clicked. It validates the coupon code entered by the user and applies a 10% discount if the code is valid (DISCOUNT10). If the code is invalid, the discount is reset to zero.

The updated totals are recalculated, and the user is alerted about the coupon status, indicating whether it was successfully applied or invalid.

Each cart item has a "Remove" button that triggers a function to remove the item from the cart. The function identifies the item to remove using a unique ID or index, removes it from the cart array using the splice method, and saves the updated cart back to localStorage in JSON format. The cart display and totals are then refreshed to reflect the changes.

Each cart item also includes a way to update quantities, such as using a stepper or input field. When the quantity is updated, a function locates the item in the cart array using its index, updates the item's quantity property with the new value, and recalculates the subtotal and total based on the updated quantity. The updated cart is then saved back to localStorage, and the UI is re-rendered to reflect the changes.

Both removing and updating items require re-rendering the cart to ensure that the UI reflects the latest changes. The renderCart() function dynamically updates the cart display and recalculates the subtotals and totals.

Email Template:

I created an email template that delivers an exclusive 20% discount directly to users' inboxes.

Project 1