Coupon Code Validator | HTML, CSS & JavaScript

Coupon Code Validator with HTML, CSS & JavaScript

30 DAYS 30 PROJECT CHALLENGE

Day #17

Project Overview

The Coupon Code Validator is a beginner-friendly project built using HTML, CSS, and JavaScript. It allows users to enter a coupon code and apply a discount to an original product price. This project uses predefined coupon codes with different percentage discounts. When a valid coupon is entered, JavaScript calculates the discount and displays the updated price along with a success message. If the coupon is invalid , the application displays an appropriate error message.

This project helps beginners understand how validation and calculations can be used together in an interactive web application. It introduces concepts such as JavaScript objects, functions, conditional statements, string methods, DOM manipulation, and dynamic price updates.

Key Features

Coupon Code Validation: Users can enter a coupon code into the input field and apply it to the product price. JavaScript checks whether the entered code exists in the available coupon list.
Multiple Coupon Codes: The application supports multiple coupon codes with different discount percentages. This makes it possible to provide different offers to users.
Percentage-Based Discounts: Each valid coupon has a percentage value assigned to it. JavaScript uses this percentage to calculate the discounted final price automatically.
Instant Price Update: When a valid coupon is applied, the final price changes immediately on the webpage. Users can see the discount result without refreshing the page.
Empty Input Validation: JavaScript checks whether the coupon input field is empty before applying a discount. An error message is displayed when users attempt to submit without entering a code.
Invalid Coupon Message: If a coupon code does not exist in the available coupon list, the application displays an invalid coupon message. The original price is also restored.
Success Feedback: When a valid coupon is applied, users receive a success message showing the percentage they saved. This provides clear feedback about the applied discount.
Case-Insensitive Coupon Input: The entered coupon code is converted to uppercase before validation. Therefore, users can enter supported coupon codes without worrying about lowercase or uppercase letters.
Simple and Clean Interface: The application displays the original price, coupon input, action button, message area, and final price clearly. This keeps the interface easy for beginners to understand.
Easy to Extend: Developers can add more features such as expiry dates, maximum usage limits, fixed discounts, backend validation, and database support.

What You'll Learn

Understand how JavaScript validates user input.
Learn how to read values from an input field.
Practice using .trim() to remove unnecessary spaces.
Learn how .toUpperCase() standardizes text input.
Understand how JavaScript objects store coupon information.
Practice accessing object values using dynamic keys.
Learn how conditional statements validate coupon codes.
Understand how percentage-based calculations work.
Practice updating HTML elements dynamically.
Learn how to display success and error messages.
Understand how JavaScript functions organize application logic.

HTML Code

HTML creates the structure of the Coupon Code Validator. First, the style.css file is linked inside the <head> section so CSS can control the appearance and layout of the application. The main content is placed inside the .coupon-container, which contains the heading, original price, available coupon information, input field, button, message area, and final price.

The couponInput field allows users to enter a coupon code, while the Apply Coupon button calls the JavaScript function responsible for validating the code. The message element provides space for success or error messages, and the finalPrice element displays the updated price after a valid coupon is applied. Finally, script.js file is loaded at the bottom of the <body> so JavaScript can access the HTML elements and handle the coupon validation and price calculation.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Coupon Code Validator</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <div class="coupon-container">
    <h2>Apply Coupon</h2>

    <div class="price">
      Original Price: ₹<span id="originalPrice">1000</span>
    </div>

<p class="available">
  Available Coupons: <strong>SAVE10</strong>, <strong>SAVE20</strong>, <strong>DISCOUNT50</strong>
</p>

    <input
      type="text"
      id="couponInput"
      placeholder="Enter coupon code"
    />

    <button onclick="applyCoupon()">Apply Coupon</button>

    <p class="message" id="message"></p>

    <div class="final-price">
      Final Price: ₹<span id="finalPrice">1000</span>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS Code

CSS controls the appearance and layout of the Coupon Code Validator. The universal * selector applies box-sizing: border-box and the Segoe UI font to all elements. The body uses Flexbox with justify-content and align-items to center the application on the page.

This .coupon-container creates the main card layout by adding a white background, fixed width, padding, rounded corners, centered text, and a box shadow, .price and .final-price classes use margin and font-weight to clearly display the price information.

Also the input selector styles the coupon code field with full width, padding, a border, and rounded corners. Similarly, the button uses full width, padding, a background color, and cursor: pointer to make it easy for users to apply the coupon. Finally, the .message class provides spacing and font styling for displaying validation or result messages.

* {
  box-sizing: border-box;
  font-family: "Segoe UI", sans-serif;
}

body {
  min-height: 100vh;
  background: #042453;
  display: flex;
  justify-content: center;
  align-items: center;
}

.coupon-container {
  background: #ffffff;
  width: 320px;
  padding: 25px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

h2 {
  margin-bottom: 15px;
}

.price,
.final-price {
  margin: 10px 0;
  font-weight: 600;
}

input {
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  margin: 10px 0;
}

button {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 6px;
  background: #4f46e5;
  color: white;
  cursor: pointer;
}

.message {
  margin-top: 10px;
  font-size: 14px;
}

Javascript Code

JavaScript handles coupon validation and discount calculation. First, it stores the original price and selects the final price and message elements from the HTML and the coupons object stores the available coupon codes along with their discount percentages. When the applyCoupon() function runs, JavaScript reads the value entered into the coupon input and uses .trim() and .toUpperCase() to clean and standardize the code. If the input is empty, an error message is displayed.

If the entered coupon exists in the coupons object, JavaScript gets the discount percentage and calculates the discounted price using the original price. The final price is updated, and a success message displays the amount of discount applied. If the coupon is invalid, the original price is restored and an error message is displayed.

const originalPrice = 1000;
const finalPriceEl = document.getElementById("finalPrice");
const message = document.getElementById("message");

const coupons = {
  SAVE10: 10,
  SAVE20: 20,
  DISCOUNT50: 50
};

function applyCoupon() {
alert("Try these coupons: SAVE10, SAVE20, DISCOUNT50");
  const input = document.getElementById("couponInput").value.trim().toUpperCase();

  if (!input) {
    message.style.color = "red";
    message.innerText = "Please enter a coupon code";
    return;
  }

  if (coupons[input]) {
    const discount = coupons[input];
    const discountedPrice = originalPrice - (originalPrice * discount) / 100;

    finalPriceEl.innerText = discountedPrice;
    message.style.color = "green";
    message.innerText = `Coupon applied! You saved ${discount}%`;
  } else {
    finalPriceEl.innerText = originalPrice;
    message.style.color = "red";
    message.innerText = "Invalid coupon code";
  }
}