Compute and Display Discounted Prices with CSS

Introduction

Calculating and displaying discounted prices is a common requirement in e-commerce and web development. In this guide, we’ll explore how to compute and display these prices using CSS along with some HTML and JavaScript.

Understanding the Basics

Before diving into the code, let’s clarify some concepts:

Discounted Price: The original price minus the discount applied.
CSS: Used for styling the displayed prices.
JavaScript: Helps compute the discounted price dynamically.

Step-by-Step Guide to Compute and Display Discounted Prices

Step 1: Setting Up Your HTML Structure

First, create a simple HTML structure to hold the original price, discount percentage, and the final discounted price.

<div class="price-container">
  <span class="original-price">$100.00</span>
  <span class="discount-percentage">20% off</span>
  <span class="discounted-price"></span>
</div>

Step 2: Adding CSS for Styling

Next, we’ll style the original price, discount percentage, and discounted price using CSS.

.price-container {
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
}

.original-price {
  text-decoration: line-through;
  color: grey;
}

.discounted-price {
  color: green;
  font-weight: bold;
}

Step 3: Implementing JavaScript for Calculation

Now let’s add a JavaScript function to compute the discounted price based on the original price and discount percentage.

const originalPrice = 100.00;
const discountPercentage = 20;

function calculateDiscountedPrice(originalPrice, discountPercentage) {
  return originalPrice - (originalPrice * (discountPercentage / 100));
}

const discountedPrice = calculateDiscountedPrice(originalPrice, discountPercentage);

document.querySelector('.discounted-price').textContent = `$${discountedPrice.toFixed(2)}`;

Step 4: Putting It All Together

Combine the HTML, CSS, and JavaScript snippets into a single file. Here’s how it looks:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Discount Price Calculator</title>
  <style>
    .price-container {
      font-family: Arial, sans-serif;
      display: flex;
      flex-direction: column;
    }
    .original-price {
      text-decoration: line-through;
      color: grey;
    }
    .discounted-price {
      color: green;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="price-container">
    <span class="original-price">$100.00</span>
    <span class="discount-percentage">20% off</span>
    <span class="discounted-price"></span>
  </div>
  <script>
    const originalPrice = 100.00;
    const discountPercentage = 20;

    function calculateDiscountedPrice(originalPrice, discountPercentage) {
      return originalPrice - (originalPrice * (discountPercentage / 100));
    }

    const discountedPrice = calculateDiscountedPrice(originalPrice, discountPercentage);
    document.querySelector('.discounted-price').textContent = `$${discountedPrice.toFixed(2)}`;
  </script>
</body>
</html>

FAQs

1. Can I use CSS only to display discounted prices?

No, CSS alone cannot compute prices. You need JavaScript or a backend language to handle calculations.

2. How can I style the prices differently?

You can customize the CSS styles by changing colors, fonts, and sizes as per your design requirements.

3. Is there a tool to minify my CSS and HTML?

Yes! You can use the CSS Minifier and HTML Minifier from WebToolsLab to optimize your code.

Conclusion

Calculating and displaying discounted prices is a fundamental skill for web developers. By following this guide, you can easily implement this functionality on your website. Remember to explore tools like the Button Generator to enhance your user interface further!