TypeScript Tutorial: Building a Simple Interactive E-commerce Product Discount Calculator

Written by

learnmodernjavascript

in

In the fast-paced world of e-commerce, offering discounts is a crucial strategy for attracting customers and boosting sales. But manually calculating discounts for each product can be time-consuming and prone to errors. This is where a simple, interactive product discount calculator comes to the rescue. This tutorial will guide you, step-by-step, on how to build one using TypeScript. We’ll cover the core concepts, provide clear code examples, and discuss common pitfalls to avoid. By the end, you’ll have a practical tool and a solid understanding of TypeScript fundamentals.

Why Build a Discount Calculator?

Imagine running an online store with hundreds or even thousands of products. You frequently offer discounts, whether it’s a percentage off, a fixed amount reduction, or a “buy one get one free” deal. Without an automated system, you’d have to manually calculate the discounted price for each product, which is inefficient and leaves room for human error. A discount calculator streamlines this process, ensuring accuracy and saving you valuable time. Moreover, it can be integrated directly into your e-commerce platform, offering customers a transparent and user-friendly experience.

Prerequisites

Before we dive in, ensure you have the following:

  • A basic understanding of HTML, CSS, and JavaScript.
  • Node.js and npm (Node Package Manager) installed on your system.
  • A code editor (like Visual Studio Code) to write and edit your code.
  • TypeScript installed globally (optional, but recommended): npm install -g typescript

Setting Up Your Project

Let’s create a new project directory and initialize it with npm. Open your terminal or command prompt and run the following commands:

mkdir product-discount-calculator
cd product-discount-calculator
npm init -y

This will create a new directory named “product-discount-calculator”, navigate into it, and initialize a new npm project with default settings. Now, let’s set up TypeScript.

Create a `tsconfig.json` file in your project directory. This file configures the TypeScript compiler. You can generate a basic one using the following command:

tsc --init

This will create a `tsconfig.json` file with a default configuration. You might want to modify this file based on your project requirements. For this tutorial, we’ll keep the default settings, but you can adjust them later.

Now, create a file named `index.ts` in your project directory. This is where we’ll write our TypeScript code.

Building the Discount Calculator Logic

Let’s start by defining the core logic for calculating discounts. We’ll create a function that takes the original price and the discount percentage as input and returns the discounted price.


// index.ts

function calculateDiscount(originalPrice: number, discountPercentage: number): number {
  const discountAmount = originalPrice * (discountPercentage / 100);
  const discountedPrice = originalPrice - discountAmount;
  return discountedPrice;
}

In this code:

  • We define a function called calculateDiscount.
  • It takes two parameters: originalPrice (a number) and discountPercentage (a number).
  • Inside the function, we calculate the discount amount and subtract it from the original price.
  • The function returns the discountedPrice.

Let’s test this function with a simple example:


const originalPrice = 100;
const discountPercentage = 20;
const discountedPrice = calculateDiscount(originalPrice, discountPercentage);
console.log("Discounted Price:", discountedPrice);

Compile your TypeScript code to JavaScript using the following command in your terminal:

tsc index.ts

This will generate a `index.js` file. Run the JavaScript file using Node.js:

node index.js

You should see “Discounted Price: 80” in your console, indicating that the discount calculation is working correctly.

Enhancing the Calculator with User Input (HTML & JavaScript)

Now, let’s make our calculator interactive by allowing users to input the original price and discount percentage. We’ll use HTML for the user interface and JavaScript to handle the input and display the results.

Create an `index.html` file in your project directory with the following code:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Product Discount Calculator</title>
  <style>
    body {
      font-family: sans-serif;
    }
    .container {
      width: 300px;
      margin: 20px auto;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
    label {
      display: block;
      margin-bottom: 5px;
    }
    input[type="number"] {
      width: 100%;
      padding: 8px;
      margin-bottom: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
    }
    button {
      background-color: #4CAF50;
      color: white;
      padding: 10px 15px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    #result {
      margin-top: 10px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>Product Discount Calculator</h2>
    <label for="originalPrice">Original Price:</label>
    <input type="number" id="originalPrice" placeholder="Enter price">

    <label for="discountPercentage">Discount (%):</label>
    <input type="number" id="discountPercentage" placeholder="Enter discount percentage">

    <button id="calculateButton">Calculate Discount</button>

    <div id="result"></div>
  </div>
  <script src="index.js"></script>
</body>
</html>

This HTML code creates a simple form with input fields for the original price and discount percentage, a button to trigger the calculation, and a `div` to display the result. It also includes basic CSS for styling.

Now, let’s modify our `index.ts` file to interact with the HTML elements.


// index.ts

function calculateDiscount(originalPrice: number, discountPercentage: number): number {
  const discountAmount = originalPrice * (discountPercentage / 100);
  const discountedPrice = originalPrice - discountAmount;
  return discountedPrice;
}

// Get references to HTML elements
const originalPriceInput = document.getElementById('originalPrice') as HTMLInputElement;
const discountPercentageInput = document.getElementById('discountPercentage') as HTMLInputElement;
const calculateButton = document.getElementById('calculateButton') as HTMLButtonElement;
const resultDiv = document.getElementById('result') as HTMLDivElement;

// Add event listener to the calculate button
calculateButton?.addEventListener('click', () => {
  // Get values from input fields
  const originalPrice = parseFloat(originalPriceInput.value);
  const discountPercentage = parseFloat(discountPercentageInput.value);

  // Validate input
  if (isNaN(originalPrice) || originalPrice < 0) {
    resultDiv.textContent = 'Please enter a valid original price.';
    return;
  }
  if (isNaN(discountPercentage) || discountPercentage < 0 || discountPercentage > 100) {
    resultDiv.textContent = 'Please enter a valid discount percentage (0-100).';
    return;
  }

  // Calculate the discounted price
  const discountedPrice = calculateDiscount(originalPrice, discountPercentage);

  // Display the result
  resultDiv.textContent = `Discounted Price: $${discountedPrice.toFixed(2)}`;
});

In this enhanced `index.ts` code:

  • We get references to the HTML input elements and the result `div` using document.getElementById().
  • We add an event listener to the calculate button. When the button is clicked, the code inside the event listener is executed.
  • Inside the event listener:
    • We retrieve the values from the input fields using .value.
    • We convert the input values to numbers using parseFloat().
    • We validate the input to ensure it’s a valid number and that the discount percentage is within the acceptable range (0-100).
    • If the input is valid, we call the calculateDiscount function to calculate the discounted price.
    • Finally, we display the discounted price in the result `div`.

Compile your TypeScript code again:

tsc index.ts

Open `index.html` in your web browser. You should now see the discount calculator interface. Enter the original price and discount percentage, click the “Calculate Discount” button, and the discounted price should appear below.

Handling Edge Cases and Common Mistakes

While the basic functionality is working, there are a few edge cases and common mistakes to consider:

1. Input Validation

As we’ve already implemented, it’s crucial to validate user input. This prevents unexpected behavior and errors. Ensure the user enters valid numbers and that the discount percentage is within a reasonable range (0-100).

Common Mistake: Forgetting to validate input. This can lead to unexpected results or errors in the calculation.

2. Formatting the Output

The toFixed(2) method is used to format the discounted price to two decimal places. This makes the output more user-friendly. Without this, you might see a long string of decimal places.

Common Mistake: Not formatting the output, leading to an unreadable result.

3. Handling Zero or Negative Prices/Discounts

Consider how your calculator should behave if the user enters a zero or negative price or discount. You might want to display an error message or treat negative discounts as a markup.

Common Mistake: Not considering edge cases like zero or negative values. This can lead to unexpected results.

4. Using `null` and `undefined`

When getting elements from the DOM, you might get `null` if the element is not found. The `?.` (optional chaining operator) is used to safely access properties of an object that might be `null` or `undefined`. This prevents errors.

Common Mistake: Not handling potential `null` values when accessing DOM elements, which can cause runtime errors.

Advanced Features (Optional)

Once you’ve mastered the basics, you can add more advanced features to your discount calculator:

  • Different Discount Types: Allow users to choose between percentage discounts and fixed amount discounts.
  • Tax Calculation: Include tax calculations to show the final price after tax.
  • Multiple Products: Extend the calculator to handle multiple products with different prices and discounts.
  • Save/Load Discounts: Implement a feature to save and load discount configurations.
  • Integration with an API: Fetch product prices and discounts from an external API.

Key Takeaways

  • This tutorial provided a step-by-step guide to building a simple interactive product discount calculator using TypeScript, HTML, and JavaScript.
  • We covered the core concepts of calculating discounts, handling user input, and displaying the results.
  • We discussed the importance of input validation and formatting the output for a user-friendly experience.
  • You learned how to integrate TypeScript with HTML and JavaScript to create an interactive web application.
  • You are now equipped with the knowledge to build and customize your own discount calculator.

FAQ

Q: What is TypeScript?

A: TypeScript is a superset of JavaScript that adds static typing. It helps you write more maintainable and scalable code by catching errors during development rather than at runtime.

Q: Why use TypeScript for this project?

A: TypeScript offers several benefits, including improved code readability, easier debugging, and better code maintainability. Static typing helps you catch errors early and provides better autocompletion and code suggestions in your editor.

Q: How do I deploy this calculator to the web?

A: You can deploy your calculator to the web by hosting the HTML, CSS, and JavaScript files on a web server or using a service like GitHub Pages, Netlify, or Vercel.

Q: Can I use this calculator in a real e-commerce website?

A: Yes, you can adapt and integrate this calculator into your e-commerce platform. You might need to adjust the code to match your specific requirements and integrate it with your existing codebase.

Q: What are some alternatives to this approach?

A: While this tutorial uses a basic HTML/JavaScript/TypeScript approach, you could also use a JavaScript framework like React, Angular, or Vue.js for a more complex and feature-rich application. These frameworks provide more structure and tools for building interactive web applications.

In conclusion, the creation of a product discount calculator, as shown here, is more than just a coding exercise; it’s a practical step toward improving efficiency and enhancing user experience in the digital marketplace. The concepts learned here can be extended to various other applications. By understanding the fundamentals and applying them creatively, you can build tools that not only meet a specific need but also provide a solid foundation for future development endeavors. The integration of TypeScript, HTML, and JavaScript, as demonstrated, offers a potent blend of functionality and user-friendliness, essential for any modern web-based application.

More posts