{"id":4723,"date":"2025-11-03T09:58:38","date_gmt":"2025-11-03T09:58:38","guid":{"rendered":"https:\/\/jmp.dfq.temporary.site\/website_0e900b2c\/?page_id=4723"},"modified":"2025-12-29T12:03:22","modified_gmt":"2025-12-29T12:03:22","slug":"calcoulater","status":"publish","type":"page","link":"https:\/\/masterdriveauto.com\/ar\/calcoulater\/","title":{"rendered":"Calcoulater"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"4723\" class=\"elementor elementor-4723\">\n\t\t\t\t<div class=\"elementor-element elementor-element-db0348e hero-bg e-flex e-con-boxed e-con e-parent\" data-id=\"db0348e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c6cfd90 elementor-widget elementor-widget-spacer\" data-id=\"c6cfd90\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bb68601 elementor-widget elementor-widget-heading\" data-id=\"bb68601\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Drive Your Dream Car<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-403d0f2 elementor-widget elementor-widget-html\" data-id=\"403d0f2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"car-loan-calculator\" style=\"max-width:760px;margin:24px auto;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial\">\r\n    \r\n    <style> \r\n        \/* \u2705 \u0627\u0644\u0635\u0646\u062f\u0648\u0642 \u0627\u0644\u0631\u0626\u064a\u0633\u064a *\/\r\n        #car-loan-calculator .card {\r\n            background:#fff;\r\n            border:2px solid #BE1A23;\r\n            border-radius:16px;\r\n            padding:20px;\r\n            box-shadow:0 2px 10px rgba(0,0,0,.04);\r\n            transition: all 0.3s ease;\r\n        }\r\n        #car-loan-calculator .card:hover {\r\n            box-shadow: 0 0 15px rgba(190, 26, 35, 0.4);\r\n            transform: translateY(-3px);\r\n        }\r\n\r\n        #car-loan-calculator h2 {\r\n            margin:0 0 12px;\r\n            font-size:22px;\r\n            letter-spacing:.5px;\r\n            text-align:center;\r\n            color:#BE1A23;\r\n        } \r\n        #car-loan-calculator .grid{display:grid;gap:14px} \r\n        @media(min-width:720px){\r\n            #car-loan-calculator .grid{grid-template-columns:1fr 1fr}\r\n        }\r\n\r\n        \/* \u2705 \u062a\u0646\u0633\u064a\u0642 \u0627\u0644\u062d\u0642\u0648\u0644 *\/\r\n        #car-loan-calculator label {\r\n            display:block;\r\n            font-weight:600;\r\n            margin-bottom:6px;\r\n        } \r\n        #car-loan-calculator input[type=\"text\"],\r\n        #car-loan-calculator select { \r\n            width:100%;\r\n            padding:10px 12px;\r\n            border:2px solid #BE1A23;\r\n            border-radius:10px;\r\n            font-size:14px;\r\n            background:#fff;\r\n            appearance:auto;\r\n            transition: all 0.3s ease;\r\n        } \r\n        #car-loan-calculator input[type=\"text\"]:hover,\r\n        #car-loan-calculator select:hover {\r\n            box-shadow:0 0 10px rgba(190,26,35,0.3);\r\n            transform:translateY(-2px);\r\n        }\r\n        #car-loan-calculator input[type=\"text\"]:focus,\r\n        #car-loan-calculator select:focus {\r\n            border-color:#BE1A23;\r\n            box-shadow:0 0 0 3px rgba(190,26,35,.2);\r\n            outline:none;\r\n        }\r\n\r\n        \/* \u2705 \u0632\u0631 \u0627\u0644\u062d\u0633\u0627\u0628 *\/\r\n        #car-loan-calculator .btn {\r\n            display:inline-block;\r\n            background:#BE1A23;\r\n            color:#fff;\r\n            border:2px solid #BE1A23;\r\n            border-radius:10px;\r\n            padding:12px 16px;\r\n            font-weight:700;\r\n            cursor:pointer;\r\n            transition: all 0.3s ease;\r\n            width:100%;\r\n        } \r\n        #car-loan-calculator .btn:hover {\r\n            background:#fff;\r\n            color:#BE1A23;\r\n            box-shadow:0 0 12px rgba(190, 26, 35, 0.5);\r\n            transform:translateY(-2px);\r\n        }\r\n\r\n        \/* \u2705 \u0627\u0644\u0646\u062a\u0627\u0626\u062c *\/\r\n        #car-loan-calculator .results {\r\n            margin-top:16px;\r\n            display:grid;\r\n            gap:10px;\r\n        } \r\n        #car-loan-calculator .result-item {\r\n            background:#f9fafb;\r\n            border:2px solid #BE1A23;\r\n            border-radius:12px;\r\n            padding:12px 14px;\r\n            transition: all 0.3s ease;\r\n        } \r\n        #car-loan-calculator .result-item:hover {\r\n            box-shadow:0 0 10px rgba(190,26,35,0.3);\r\n            transform:translateY(-2px);\r\n        }\r\n        #car-loan-calculator .result-item .k {\r\n            color:#6b7280;\r\n            font-size:13px;\r\n        } \r\n        #car-loan-calculator .result-item .v {\r\n            font-weight:800;\r\n            font-size:17px;\r\n            margin-top:4px;\r\n            color:#BE1A23;\r\n        } \r\n        #car-loan-calculator .muted {\r\n            color:#6b7280;\r\n            font-size:13px;\r\n        } \r\n\r\n        \/* \u2705 \u0634\u0631\u064a\u0637 \u0627\u0644\u062a\u0645\u0631\u064a\u0631 *\/\r\n        #car-loan-calculator .range-container {\r\n            margin-top: 10px;\r\n            margin-bottom: 20px;\r\n        }\r\n        #car-loan-calculator input[type=\"range\"] {\r\n            width: 100%;\r\n            height: 8px; \r\n            cursor: pointer;\r\n            margin: 10px 0;\r\n            -webkit-appearance: none;\r\n            background: linear-gradient(to right, #BE1A23 0%, #BE1A23 20%, #ddd 20%, #ddd 100%);\r\n            border-radius: 4px;\r\n            transition: background 0.3s ease;\r\n        }\r\n        #car-loan-calculator input[type=\"range\"]::-webkit-slider-thumb {\r\n            -webkit-appearance: none;\r\n            height: 20px;\r\n            width: 20px;\r\n            border-radius: 50%;\r\n            background: #BE1A23; \r\n            cursor: pointer;\r\n            box-shadow: 0 0 0 4px rgba(190, 26, 35, .3);\r\n            margin-top: -6px; \r\n        }\r\n        #car-loan-calculator .range-labels {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            font-size: 13px;\r\n            color: #6b7280;\r\n            padding: 0 5px; \r\n        }\r\n        #car-loan-calculator .range-labels span {\r\n            width: calc(100% \/ 6); \r\n            text-align: center;\r\n        }\r\n        #car-loan-calculator .range-labels span:first-child {\r\n            text-align: left;\r\n        }\r\n        #car-loan-calculator .range-labels span:last-child {\r\n            text-align: right;\r\n        }\r\n        .range-title-value {\r\n            float: right;\r\n            font-weight: bold;\r\n            color: #BE1A23;\r\n        }\r\n    <\/style> \r\n\r\n    <div class=\"card\"> \r\n        <h2>Car Installment Calculator<\/h2> \r\n\r\n        <div class=\"grid\"> \r\n            <div> \r\n                <label>Car Price<\/label> \r\n                <input id=\"price\" type=\"text\" placeholder=\"e.g. 650,000\"> \r\n                <div class=\"muted\">Enter the total price of the car.<\/div> \r\n            <\/div> \r\n\r\n            <div> \r\n                <label>Loan Term (Years)<\/label> \r\n                <select id=\"years\"> \r\n                    <option value=\"3\">3 Years (36 Months)<\/option> \r\n                    <option value=\"5\">5 Years (60 Months)<\/option> \r\n                    <option value=\"7\">7 Years (84 Months)<\/option> \r\n                <\/select> \r\n            <\/div> \r\n\r\n            <div style=\"grid-column: 1 \/ -1;\">\r\n                <label>Down Payment (%) <span id=\"outDPPctValue\" class=\"range-title-value\">20%<\/span><\/label> \r\n                \r\n                <div class=\"range-container\">\r\n                    <input id=\"downPaymentSlider\" type=\"range\" min=\"20\" max=\"70\" value=\"20\" step=\"10\">\r\n                    <div class=\"range-labels\">\r\n                        <span>20%<\/span>\r\n                        <span>30%<\/span>\r\n                        <span>40%<\/span>\r\n                        <span>50%<\/span>\r\n                        <span>60%<\/span>\r\n                        <span>70%<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div> \r\n        <\/div> \r\n\r\n        <div style=\"margin-top:14px;\"> \r\n            <button class=\"btn\" id=\"calcBtn\">Calculate Installment<\/button> \r\n        <\/div> \r\n\r\n        <div class=\"results\" id=\"results\" style=\"display:none;\"> \r\n            <div class=\"result-item\"><div class=\"k\">Down Payment<\/div><div class=\"v\" id=\"outDP\">\u2014<\/div><\/div> \r\n            <div class=\"result-item\"><div class=\"k\">Monthly Installment<\/div><div class=\"v\" id=\"outMonthly\">\u2014<\/div><\/div> \r\n        <\/div> \r\n    <\/div> \r\n\r\n    <script> \r\n        (function(){ \r\n            const dpToRate = {20:16.0, 30:15.0, 40:14.5, 50:13.5, 60:12.5, 70:13.5}; \r\n            const $ = id => document.getElementById(id); \r\n            const priceEl = $('price'), yearsEl = $('years');\r\n            const dpSliderEl = $('downPaymentSlider');\r\n            const outDPPctValue = $('outDPPctValue');\r\n            const calcBtn = $('calcBtn'), resultsWrap = $('results'); \r\n            const outDP = $('outDP'), outMonthly = $('outMonthly'); \r\n\r\n            priceEl.addEventListener('input', function() { \r\n                let value = priceEl.value.replace(\/,\/g, ''); \r\n                if (!isNaN(value) && value !== \"\") { \r\n                    priceEl.value = parseFloat(value).toLocaleString('en-US'); \r\n                } \r\n            }); \r\n            const getPrice = () => parseFloat(priceEl.value.replace(\/,\/g,'')) || 0; \r\n            const fmt = v => isFinite(v) ? Math.round(v).toLocaleString() : '\u2014'; \r\n\r\n            const calculate = function(){ \r\n                const price = getPrice(); \r\n                const years = parseInt(yearsEl.value, 10); \r\n                const dpPct = parseFloat(dpSliderEl.value); \r\n\r\n                if (!(price>0) || !(years>0)) { \r\n                    outDP.textContent = '\u2014';\r\n                    outMonthly.textContent = '\u2014';\r\n                    return; \r\n                } \r\n\r\n                const downPaymentAmt = price * (dpPct\/100); \r\n                const principal = Math.max(0, price - downPaymentAmt); \r\n                const annualRate = (dpToRate[dpPct] || 0) \/ 100; \r\n                const totalInterest = principal * annualRate * years; \r\n                const totalPayable = principal + totalInterest; \r\n                const months = years * 12; \r\n                const monthly = totalPayable \/ months; \r\n\r\n                outDP.textContent = fmt(downPaymentAmt); \r\n                outMonthly.textContent = fmt(monthly); \r\n                resultsWrap.style.display = 'grid'; \r\n            }; \r\n\r\n            const updateSliderDisplay = function() {\r\n                const value = dpSliderEl.value;\r\n                outDPPctValue.textContent = value + '%';\r\n                const percent = (value - 20) \/ (70 - 20) * 100;\r\n                dpSliderEl.style.background = `linear-gradient(to right, #BE1A23 0%, #BE1A23 ${percent}%, #ddd ${percent}%, #ddd 100%)`;\r\n            }\r\n\r\n            dpSliderEl.addEventListener('input', function() {\r\n                updateSliderDisplay();\r\n                calculate();\r\n            });\r\n            yearsEl.addEventListener('change', calculate);\r\n            priceEl.addEventListener('input', calculate);\r\n            calcBtn.addEventListener('click', calculate); \r\n\r\n            updateSliderDisplay();\r\n            calculate();\r\n        })(); \r\n    <\/script> \r\n<\/div>\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>Drive Your Dream Car Car Installment Calculator Car Price Enter the total price of the car. Loan Term (Years) 3 [&hellip;]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"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":"","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-4723","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/masterdriveauto.com\/ar\/wp-json\/wp\/v2\/pages\/4723","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/masterdriveauto.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/masterdriveauto.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/masterdriveauto.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/masterdriveauto.com\/ar\/wp-json\/wp\/v2\/comments?post=4723"}],"version-history":[{"count":49,"href":"https:\/\/masterdriveauto.com\/ar\/wp-json\/wp\/v2\/pages\/4723\/revisions"}],"predecessor-version":[{"id":5704,"href":"https:\/\/masterdriveauto.com\/ar\/wp-json\/wp\/v2\/pages\/4723\/revisions\/5704"}],"wp:attachment":[{"href":"https:\/\/masterdriveauto.com\/ar\/wp-json\/wp\/v2\/media?parent=4723"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}