diff --git a/Domains/Frontend/MiniProjects/discount_calculator/README.md b/Domains/Frontend/MiniProjects/discount_calculator/README.md new file mode 100644 index 00000000..6e440186 --- /dev/null +++ b/Domains/Frontend/MiniProjects/discount_calculator/README.md @@ -0,0 +1,11 @@ +**Contributor:** Tanushri1307 + +## Description +A simple web application that takes amount and discount(%) as input and returns the final amount after the discount. +## Tech Stack +- HTML +- CSS +- JavaScript + +## How to Run +1. Open the `index.html` file in your web browser. \ No newline at end of file diff --git a/Domains/Frontend/MiniProjects/discount_calculator/index.html b/Domains/Frontend/MiniProjects/discount_calculator/index.html new file mode 100644 index 00000000..2188cb15 --- /dev/null +++ b/Domains/Frontend/MiniProjects/discount_calculator/index.html @@ -0,0 +1,34 @@ + + + + + + Discount Calculator + + + +
+

💰 Discount Calculator

+ +
+ + +
+ +
+ + +
+ + + +
+

Final Price: ₹0.00

+
+ + +
+ + + + diff --git a/Domains/Frontend/MiniProjects/discount_calculator/script.js b/Domains/Frontend/MiniProjects/discount_calculator/script.js new file mode 100644 index 00000000..d779517d --- /dev/null +++ b/Domains/Frontend/MiniProjects/discount_calculator/script.js @@ -0,0 +1,22 @@ +const originalInput = document.getElementById("original"); +const discountInput = document.getElementById("discount"); +const finalOutput = document.getElementById("final"); +const calculateBtn = document.getElementById("calculate"); + +calculateBtn.addEventListener("click", function () { + const originalPrice = parseFloat(originalInput.value); + const discount = parseFloat(discountInput.value); + + if (isNaN(originalPrice) || isNaN(discount)) { + alert("Please enter valid numbers for both fields!"); + return; + } + + if (discount < 0 || discount > 100) { + alert("Discount should be between 0% and 100%!"); + return; + } + + const finalPrice = originalPrice - (originalPrice * discount) / 100; + finalOutput.textContent = "₹" + finalPrice.toFixed(2); +}); diff --git a/Domains/Frontend/MiniProjects/discount_calculator/style.css b/Domains/Frontend/MiniProjects/discount_calculator/style.css new file mode 100644 index 00000000..76a203cf --- /dev/null +++ b/Domains/Frontend/MiniProjects/discount_calculator/style.css @@ -0,0 +1,82 @@ +* { + box-sizing: border-box; +} + +body { + background: linear-gradient(135deg, #74ebd5 0%, #9face6 100%); + font-family: 'Poppins', sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} + +.container { + background: #fff; + padding: 30px 40px; + border-radius: 15px; + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); + text-align: center; + width: 350px; +} + +h2 { + margin-bottom: 20px; + color: #333; +} + +.input-group { + margin: 15px 0; + text-align: left; +} + +label { + display: block; + font-weight: 500; + margin-bottom: 8px; +} + +input { + width: 100%; + padding: 10px; + border: 2px solid #ddd; + border-radius: 8px; + font-size: 16px; + outline: none; + transition: 0.3s; +} + +input:focus { + border-color: #6a11cb; +} + +button { + width: 100%; + padding: 10px; + background-color: #6a11cb; + color: white; + border: none; + border-radius: 8px; + font-size: 16px; + cursor: pointer; + margin-top: 10px; + transition: 0.3s; +} + +button:hover { + background-color: #2575fc; +} + +.result { + margin-top: 20px; + font-size: 18px; + font-weight: bold; + color: #333; +} + +footer { + margin-top: 15px; + font-size: 14px; + color: #666; +}