{"id":1578,"date":"2026-02-03T22:47:31","date_gmt":"2026-02-03T22:47:31","guid":{"rendered":"https:\/\/samirmoustakim.com\/?page_id=1578"},"modified":"2026-02-03T23:49:49","modified_gmt":"2026-02-03T23:49:49","slug":"discount-calculator","status":"publish","type":"page","link":"https:\/\/samirmoustakim.com\/ar\/discount-calculator\/","title":{"rendered":"Discount Calculator"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nDiscount Calculator | Free Online Tool<\/title>\r\n<style>\r\n\/* ======================\r\n General Styles\r\n====================== *\/\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;700&display=swap');\r\n\r\nbody {\r\n font-family: 'Inter', Calibri, sans-serif;\r\n margin: 0;\r\n padding: 0;\r\n background-color: #F8F9FA;\r\n color: #212529;\r\n}\r\n\r\na {\r\n text-decoration: none;\r\n}\r\n\r\n\/* ======================\r\n Tool Wrapper\r\n====================== *\/\r\n.discount-calculator-wrapper {\r\n max-width: 600px;\r\n margin: 40px auto;\r\n background: #FFFFFF;\r\n padding: 30px;\r\n border-radius: 12px;\r\n box-shadow: 0 6px 20px rgba(0,0,0,0.05);\r\n}\r\n\r\n\/* ======================\r\n Title & Description\r\n====================== *\/\r\n.discount-calculator-wrapper h1 {\r\n color: #0D6EFD;\r\n font-size: 28px;\r\n margin-bottom: 10px;\r\n text-align: center;\r\n}\r\n\r\n.discount-calculator-wrapper p.description {\r\n text-align: center;\r\n color: #6C757D;\r\n font-size: 16px;\r\n margin-bottom: 30px;\r\n}\r\n\r\n\/* ======================\r\n Calculator Box\r\n====================== *\/\r\n.calculator-box {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 15px;\r\n}\r\n\r\n.calculator-box label {\r\n font-weight: 500;\r\n margin-bottom: 5px;\r\n}\r\n\r\n.calculator-box input,\r\n.calculator-box select {\r\n padding: 10px 12px;\r\n font-size: 16px;\r\n border: 1px solid #CED4DA;\r\n border-radius: 6px;\r\n width: 100%;\r\n box-sizing: border-box;\r\n}\r\n\r\n.calculator-box button {\r\n padding: 12px;\r\n font-size: 16px;\r\n font-weight: 600;\r\n border: none;\r\n border-radius: 6px;\r\n cursor: pointer;\r\n transition: 0.3s;\r\n}\r\n\r\nbutton.calculate-btn {\r\n background-color: #0D6EFD;\r\n color: #fff;\r\n}\r\n\r\nbutton.calculate-btn:hover {\r\n background-color: #0b5ed7;\r\n}\r\n\r\nbutton.reset-btn {\r\n background-color: #6C757D;\r\n color: #fff;\r\n}\r\n\r\nbutton.reset-btn:hover {\r\n background-color: #5c636a;\r\n}\r\n\r\n\/* ======================\r\n Result Box\r\n====================== *\/\r\n.result-box {\r\n margin-top: 25px;\r\n padding: 15px 20px;\r\n background: #F8F9FA;\r\n border-radius: 8px;\r\n border: 1px solid #CED4DA;\r\n font-size: 18px;\r\n color: #212529;\r\n}\r\n\r\n.result-box .breakdown {\r\n margin-top: 10px;\r\n font-size: 14px;\r\n color: #6C757D;\r\n}\r\n\r\n\/* ======================\r\n CTA Section\r\n====================== *\/\r\n.cta-section {\r\n text-align: center;\r\n margin-top: 30px;\r\n}\r\n\r\n.cta-section a {\r\n display: inline-block;\r\n padding: 12px 20px;\r\n background-color: #20C997;\r\n color: #fff;\r\n font-weight: 600;\r\n border-radius: 6px;\r\n transition: 0.3s;\r\n}\r\n\r\n.cta-section a:hover {\r\n background-color: #1aa179;\r\n}\r\n\r\n\/* ======================\r\n SEO Section\r\n====================== *\/\r\n.seo-section {\r\n margin-top: 35px;\r\n font-size: 14px;\r\n color: #6C757D;\r\n}\r\n\r\n.seo-section h3 {\r\n color: #0D6EFD;\r\n margin-top: 20px;\r\n}\r\n\r\n.seo-section ul {\r\n margin-left: 20px;\r\n}\r\n\r\n.related-tools {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n margin-top: 15px;\r\n}\r\n\r\n.related-tools a {\r\n color: #0D6EFD;\r\n}\r\n\r\n\/* ======================\r\n Responsive\r\n====================== *\/\r\n@media (max-width: 768px) {\r\n .discount-calculator-wrapper {\r\n margin: 20px;\r\n padding: 20px;\r\n }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"discount-calculator-wrapper\">\r\n <!-- Title -->\r\n <h1>Discount Calculator<\/h1>\r\n <p class=\"description\">Quickly calculate the final price after applying discounts to help you display accurate sale pricing.<\/p>\r\n\r\n <!-- Calculator Box -->\r\n <div class=\"calculator-box\">\r\n <label for=\"originalPrice\">Original Price ($)<\/label>\r\n <input type=\"number\" id=\"originalPrice\" placeholder=\"Enter original price\" min=\"0\">\r\n\r\n <label for=\"discountPercent\">Discount (%)<\/label>\r\n <input type=\"number\" id=\"discountPercent\" placeholder=\"Enter discount percentage\" min=\"0\" max=\"100\">\r\n\r\n <button class=\"calculate-btn\" onclick=\"calculateDiscount()\">Calculate<\/button>\r\n <button class=\"reset-btn\" onclick=\"resetCalculator()\">Reset<\/button>\r\n <\/div>\r\n\r\n <!-- Result Box -->\r\n <div class=\"result-box\" id=\"resultBox\" style=\"display:none;\">\r\n <div>Final Price: $<span id=\"finalPrice\"><\/span><\/div>\r\n <div class=\"breakdown\" id=\"breakdown\"><\/div>\r\n <\/div>\r\n\r\n <!-- CTA Section -->\r\n <div class=\"cta-section\">\r\n <a href=\"https:\/\/samirmoustakim.com\/ar\/shop\/\" target=\"_blank\">Visit Our Shop<\/a>\r\n <\/div>\r\n\r\n <!-- SEO Section -->\r\n <div class=\"seo-section\">\r\n <h3>How to use:<\/h3>\r\n <ol>\r\n <li>Enter the original price of your product.<\/li>\r\n <li>Enter the discount percentage you want to apply.<\/li>\r\n <li>Click 'Calculate' to see the final discounted price instantly.<\/li>\r\n <li>Use 'Reset' to start over.<\/li>\r\n <\/ol>\r\n\r\n <h3>FAQ:<\/h3>\r\n <ul>\r\n <li><strong>Q:<\/strong> Can I enter negative numbers? <br><strong>A:<\/strong> No, only positive numbers are allowed.<\/li>\r\n <li><strong>Q:<\/strong> Can I apply multiple discounts? <br><strong>A:<\/strong> Currently, only one discount at a time is supported.<\/li>\r\n <li><strong>Q:<\/strong> Is this calculator mobile-friendly? <br><strong>A:<\/strong> Yes, fully responsive for all devices.<\/li>\r\n <\/ul>\r\n\r\n <h3>Related Tools:<\/h3>\r\n <div class=\"related-tools\">\r\n <a href=\"#\">Profit Margin Calculator<\/a>\r\n <a href=\"#\">Markup Calculator<\/a>\r\n <a href=\"#\">Sales Tax Calculator<\/a>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/\/ ======================\r\n\/\/ Discount Calculator JS\r\n\/\/ ======================\r\n\r\n\/\/ Main calculation function\r\nfunction calculateDiscount() {\r\n \/\/ Get input values\r\n const originalPrice = parseFloat(document.getElementById('originalPrice').value);\r\n const discountPercent = parseFloat(document.getElementById('discountPercent').value);\r\n\r\n \/\/ Input validation\r\n if (isNaN(originalPrice) || originalPrice < 0) {\r\n alert('Please enter a valid positive original price.');\r\n return;\r\n }\r\n if (isNaN(discountPercent) || discountPercent < 0 || discountPercent > 100) {\r\n alert('Please enter a valid discount percentage (0-100).');\r\n return;\r\n }\r\n\r\n \/\/ Formula: Final Price = Original Price - (Original Price * Discount % \/ 100)\r\n const discountAmount = originalPrice * (discountPercent \/ 100);\r\n const finalPrice = originalPrice - discountAmount;\r\n\r\n \/\/ Display results\r\n document.getElementById('finalPrice').textContent = finalPrice.toFixed(2);\r\n document.getElementById('breakdown').textContent = `You saved $${discountAmount.toFixed(2)} (${discountPercent}%).`;\r\n document.getElementById('resultBox').style.display = 'block';\r\n}\r\n\r\n\/\/ Reset function\r\nfunction resetCalculator() {\r\n document.getElementById('originalPrice').value = '';\r\n document.getElementById('discountPercent').value = '';\r\n document.getElementById('resultBox').style.display = 'none';\r\n}\r\n\r\n\/* ======================\r\n HOW TO MODIFY \/ REUSE\r\n======================\r\n- Change formula: Edit inside calculateDiscount() function\r\n- Add inputs: Add HTML input elements in calculator-box and read values in JS\r\n- Change colors: Modify CSS variables for primary, secondary, accent colors\r\n- Reuse for other calculators: Duplicate the wrapper div with a unique class and adjust labels, placeholders, and calculation logic\r\n*\/\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Discount Calculator | Free Online Tool Discount Calculator Quickly calculate the final price after applying discounts to help you display […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1578","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/samirmoustakim.com\/ar\/wp-json\/wp\/v2\/pages\/1578","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/samirmoustakim.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/samirmoustakim.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/samirmoustakim.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/samirmoustakim.com\/ar\/wp-json\/wp\/v2\/comments?post=1578"}],"version-history":[{"count":8,"href":"https:\/\/samirmoustakim.com\/ar\/wp-json\/wp\/v2\/pages\/1578\/revisions"}],"predecessor-version":[{"id":1589,"href":"https:\/\/samirmoustakim.com\/ar\/wp-json\/wp\/v2\/pages\/1578\/revisions\/1589"}],"wp:attachment":[{"href":"https:\/\/samirmoustakim.com\/ar\/wp-json\/wp\/v2\/media?parent=1578"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}