1. Amazon Shipping Calculator Project

In this project, we will create an Amazon Shipping Calculator using HTML, CSS, and JavaScript. The calculator will help users determine whether they need to pay for shipping based on their order total.

Features of the Calculator:
  • Orders under $40 will have a $10 shipping fee.
  • Orders above $40 will have free shipping.


2. Steps to Create the Project:

1. HTML Structure

We start by creating a simple HTML structure that includes:

  • A heading for the title.
  • Two lines explaining the shipping rules.
  • An input box for the user to enter the order amount.
  • A button to calculate the total cost (including shipping if applicable).
  • A place to display the result.
				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Amazon Shipping Calculator</title><style>body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        button {
            background-color: green;
            color: white;
            padding: 10px;
            border: none;
            cursor: pointer;
        }
        input {
            padding: 10px;
            margin-right: 10px;
        }
        #result {
            margin-top: 20px;
            font-size: 24px;
        }</style></head>
<body>
    <h2>Amazon Shipping Calculator</h2>
    <p>Order under $40 = $10 shipping</p>
    <p>Order more than $40 = FREE! shipping</p>

    
    <input type="number" id="orderAmount" placeholder="Enter order amount" />
    <button onclick="calculateShipping()">Calculate</button>

    
    <div id="result"></div> <script defer src="data:text/javascript;base64,DQogICAgICAgIGZ1bmN0aW9uIGNhbGN1bGF0ZVNoaXBwaW5nKCkgew0KICAgICAgICAgICAgY29uc3Qgb3JkZXJBbW91bnQgPSBwYXJzZUZsb2F0KGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdvcmRlckFtb3VudCcpLnZhbHVlKTsNCiAgICAgICAgICAgIGxldCB0b3RhbDsNCg0KICAgICAgICAgICAgaWYgKG9yZGVyQW1vdW50IDwgNDApIHsNCiAgICAgICAgICAgICAgICB0b3RhbCA9IG9yZGVyQW1vdW50ICsgMTA7ICAvLyBBZGQgJDEwIHNoaXBwaW5nDQogICAgICAgICAgICAgICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3Jlc3VsdCcpLmlubmVySFRNTCA9IGAkJHt0b3RhbH0gKGluY2x1ZGVzICQxMCBzaGlwcGluZylgOw0KICAgICAgICAgICAgfSBlbHNlIHsNCiAgICAgICAgICAgICAgICB0b3RhbCA9IG9yZGVyQW1vdW50OyAgLy8gRnJlZSBzaGlwcGluZw0KICAgICAgICAgICAgICAgIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdyZXN1bHQnKS5pbm5lckhUTUwgPSBgJCR7dG90YWx9IChGcmVlIHNoaXBwaW5nKWA7DQogICAgICAgICAgICB9DQogICAgICAgIH0NCiAgICA="></script> </body>
</html>

				
			

2. JavaScript Functionality

The main logic is written in a JavaScript function called calculateShipping(). Here’s how it works:
  • It grabs the order amount entered by the user using document.getElementById().
  • It checks if the order amount is less than $40:
    • If true, it adds $10 for shipping and displays the total.
    • If false, it simply displays the entered amount because shipping is free for orders above $40.
  • The result is displayed in the #result div.
  • 3. CSS for Styling

    We apply basic CSS to style the calculator:

    • The button is styled with a green background, white text, and padding to make it visually appealing.
    • The input box is also styled for consistency.
    • The result is displayed in larger font for better visibility.

    How the Calculator Works:

  • The user enters an order amount in the input field.
  • When the user clicks the "Calculate" button:
    • If the order amount is below $40, $10 is added to the total as a shipping fee.
    • If the order amount is $40 or above, the shipping is free.
  • The final amount is displayed below the button, either showing the cost with shipping or with free shipping.
  • Example:

    • If the user enters $34, the result will be $44 (includes $10 shipping).
    • If the user enters $50, the result will be $50 (Free shipping).

    Conclusion

    This simple project demonstrates how to use basic HTML, CSS, and JavaScript to create an interactive tool for calculating shipping costs. The project can be extended by adding more features like discounts or handling different regions with varying shipping costs.
    ×