Create Discount Calculator HTML CSS JS – Free Online Calculator
SoaTools.com
Jun 23 /
6 months ago
Here's a simple Discount Calculator created using HTML, CSS, and JavaScript. This calculator allows users to input the original price and the discount percentage to calculate the final price after applying the discount.
First, we'll create the structure of the calculator in HTML.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Discount Calculator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Discount Calculator</h1>
<form id="discount-form">
<label for="original-price">Original Price:</label>
<input type="number" id="original-price" required>
<label for="discount-percentage">Discount Percentage:</label>
<input type="number" id="discount-percentage" required>
<button type="button" onclick="calculateDiscount()">Calculate</button>
</form>
<div id="result" class="result"></div>
</div>
<script src="script.js"></script>
</body>
</html>
Second, let's style the calculator using CSS.
CSS
/* styles.css */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
margin: 0;
}
.container {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
h1 {
margin-bottom: 20px;
}
label {
display: block;
margin-top: 10px;
}
input {
width: calc(100% - 20px);
padding: 10px;
margin-top: 5px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
button {
padding: 10px 20px;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
.result {
margin-top: 20px;
font-size: 1.2em;
font-weight: bold;
}
Finally, we'll add the functionality using JavaScript.
JavaScript
// script.js
function calculateDiscount() {
const originalPrice = document.getElementById('original-price').value;
const discountPercentage = document.getElementById('discount-percentage').value;
if (originalPrice && discountPercentage) {
const discountAmount = (originalPrice * discountPercentage) / 100;
const finalPrice = originalPrice - discountAmount;
document.getElementById('result').innerText = `Final Price: $${finalPrice.toFixed(2)}`;
} else {
document.getElementById('result').innerText = 'Please enter both values.';
}
}
How to Run - visit:- Discount Calculator
- Create a directory for your project.
- Inside this directory, create three files:
index.html,styles.css, andscript.js. - Copy the corresponding code into each file.
- Open
index.htmlin a web browser to see and use the Discount Calculator.
This setup will allow users to input an original price and a discount percentage, then click the "Calculate" button to see the final price after the discount.