Loan Calculator<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n \n color: #333;\n }\n\n .loan-calculator-container {\n max-width: 900px;\n margin: auto;\n background-color: #fff;\n padding: 20px;\n border-radius: 10px;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n }\n\n .loan-calculator-container h1 {\n text-align: center;\n color: #BA2026;\n margin-bottom: 20px;\n }\n\n .slider-container {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 20px;\n }\n\n .slider-container input[type=\"range\"] {\n width: 70%;\n }\n\n .slider-container input[type=\"number\"] {\n width: 25%;\n padding: 10px;\n border: 1px solid #ccc;\n border-radius: 5px;\n text-align: right;\n }\n\n .slider-container label {\n display: block;\n margin-bottom: 5px;\n }\n\n .result-section {\n display: flex;\n justify-content: space-between;\n margin-top: 20px;\n }\n\n .result-box {\n width: 45%;\n padding: 20px;\n background-color: #f0f0f0;\n border-radius: 10px;\n text-align: center;\n }\n\n .result-box h3 {\n margin-bottom: 15px;\n color: #BA2026;\n }\n\n .chart-container {\n width: 45%;\n height: 300px;\n }\n\n #loan-chart {\n width: 100%;\n height: 100%;\n }\n\n button {\n width: 100%;\n padding: 15px;\n background-color: #BA2026;\n color: white;\n border: none;\n border-radius: 5px;\n font-size: 18px;\n cursor: pointer;\n margin-top: 20px;\n }\n\n button:hover {\n background-color: #a6201f;\n }\n <\/style>\n<\/head>\n<body>\n\n <div class=\"loan-calculator-container\">\n <h1>Loan Calculator<\/h1>\n\n \n <div class=\"slider-container\">\n <label for=\"principal\">Loan Amount<\/label>\n <input type=\"range\" id=\"principalSlider\" min=\"1000\" max=\"1000000\" value=\"10000\" step=\"100\" oninput=\"updatePrincipalAmount(this.value)\">\n <input type=\"number\" id=\"principal\" value=\"10000\" oninput=\"updatePrincipalSlider(this.value)\">\n <\/div>\n\n \n <div class=\"slider-container\">\n <label for=\"rate\">Rate of Interest (in %)<\/label>\n <input type=\"range\" id=\"rateSlider\" min=\"0.1\" max=\"100\" step=\"0.1\" value=\"5\" oninput=\"updateRate(this.value)\">\n <input type=\"number\" id=\"rate\" value=\"5\" step=\"0.1\" oninput=\"updateRateSlider(this.value)\">\n <\/div>\n\n \n <div class=\"slider-container\">\n <label for=\"time\">Loan Tenure (in years)<\/label>\n <input type=\"range\" id=\"timeSlider\" min=\"1\" max=\"50\" value=\"1\" oninput=\"updateTimePeriod(this.value)\">\n <input type=\"number\" id=\"time\" value=\"1\" oninput=\"updateTimeSlider(this.value)\">\n <\/div>\n\n <button onclick=\"calculateLoan()\">Calculate EMI<\/button>\n\n <div class=\"result-section\">\n <div class=\"result-box\">\n <h3>EMI Details<\/h3>\n <p>Monthly EMI: \u20b9<span id=\"emiResult\">0<\/span><\/p>\n <p>Total Interest Payable: \u20b9<span id=\"interestResult\">0<\/span><\/p>\n <p>Total Payment (Principal + Interest): \u20b9<span id=\"totalAmountResult\">0<\/span><\/p>\n <\/div>\n\n \n <div class=\"chart-container\">\n <canvas id=\"loan-chart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n\n <script>\n function updatePrincipalAmount(value) {\n document.getElementById('principal').value = value;\n }\n\n function updatePrincipalSlider(value) {\n document.getElementById('principalSlider').value = value;\n }\n\n function updateRate(value) {\n document.getElementById('rate').value = value;\n }\n\n function updateRateSlider(value) {\n document.getElementById('rateSlider').value = value;\n }\n\n function updateTimePeriod(value) {\n document.getElementById('time').value = value;\n }\n\n function updateTimeSlider(value) {\n document.getElementById('timeSlider').value = value;\n }\n\n function calculateLoan() {\n const principal = parseFloat(document.getElementById('principal').value);\n const rate = parseFloat(document.getElementById('rate').value);\n const time = parseFloat(document.getElementById('time').value);\n const monthlyRate = rate \/ 12 \/ 100;\n const tenureMonths = time * 12;\n\n const emi = (principal * monthlyRate * Math.pow(1 + monthlyRate, tenureMonths)) \/ (Math.pow(1 + monthlyRate, tenureMonths) - 1);\n const totalPayment = emi * tenureMonths;\n const totalInterest = totalPayment - principal;\n\n document.getElementById('emiResult').innerText = emi.toFixed(2);\n document.getElementById('interestResult').innerText = totalInterest.toFixed(2);\n document.getElementById('totalAmountResult').innerText = totalPayment.toFixed(2);\n\n \/\/ Update the pie chart\n updateChart(principal, totalInterest);\n }\n\n function updateChart(principal, interest) {\n const ctx = document.getElementById('loan-chart').getContext('2d');\n if (window.loanChart) {\n window.loanChart.destroy();\n }\n window.loanChart = new Chart(ctx, {\n type: 'doughnut',\n data: {\n labels: ['Principal', 'Interest'],\n datasets: [{\n data: [principal, interest],\n backgroundColor: ['#4CAF50', '#BA2026'],\n hoverOffset: 4\n }]\n },\n options: {\n responsive: true,\n plugins: {\n legend: {\n position: 'bottom',\n },\n }\n }\n });\n }\n\n \/\/ Initial calculation to display default EMI values\n calculateLoan();\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Loan Calculator Loan Calculator Loan Amount Rate of Interest (in %) Loan Tenure (in years) Calculate EMI EMI Details Monthly EMI: \u20b90 Total Interest Payable:…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","format":"standard","meta":{"_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"tools":[],"class_list":["post-19602","tools","type-tools","status-publish","format-standard","hentry","entry","rows"],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":false,"_links":{"self":[{"href":"https:\/\/bigbreakingwire.in\/wp-json\/wp\/v2\/tools\/19602"}],"collection":[{"href":"https:\/\/bigbreakingwire.in\/wp-json\/wp\/v2\/tools"}],"about":[{"href":"https:\/\/bigbreakingwire.in\/wp-json\/wp\/v2\/types\/tools"}],"author":[{"embeddable":true,"href":"https:\/\/bigbreakingwire.in\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bigbreakingwire.in\/wp-json\/wp\/v2\/comments?post=19602"}],"version-history":[{"count":0,"href":"https:\/\/bigbreakingwire.in\/wp-json\/wp\/v2\/tools\/19602\/revisions"}],"wp:attachment":[{"href":"https:\/\/bigbreakingwire.in\/wp-json\/wp\/v2\/media?parent=19602"}],"wp:term":[{"taxonomy":"tools","embeddable":true,"href":"https:\/\/bigbreakingwire.in\/wp-json\/wp\/v2\/tools?post=19602"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":19602,"date":"2024-09-24T16:22:27","date_gmt":"2024-09-24T10:52:27","guid":{"rendered":"https:\/\/bigbreakingwire.in\/?post_type=tools&p=19602"},"modified":"2024-10-02T15:10:29","modified_gmt":"2024-10-02T09:40:29","slug":"loan-calculator","status":"publish","type":"tools","link":"https:\/\/bigbreakingwire.in\/tools\/loan-calculator\/","title":{"rendered":"Loan Calculator"},"content":{"rendered":"\n\n\n\n \n \n Loan Calculator<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n \n color: #333;\n }\n\n .loan-calculator-container {\n max-width: 900px;\n margin: auto;\n background-color: #fff;\n padding: 20px;\n border-radius: 10px;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n }\n\n .loan-calculator-container h1 {\n text-align: center;\n color: #BA2026;\n margin-bottom: 20px;\n }\n\n .slider-container {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 20px;\n }\n\n .slider-container input[type=\"range\"] {\n width: 70%;\n }\n\n .slider-container input[type=\"number\"] {\n width: 25%;\n padding: 10px;\n border: 1px solid #ccc;\n border-radius: 5px;\n text-align: right;\n }\n\n .slider-container label {\n display: block;\n margin-bottom: 5px;\n }\n\n .result-section {\n display: flex;\n justify-content: space-between;\n margin-top: 20px;\n }\n\n .result-box {\n width: 45%;\n padding: 20px;\n background-color: #f0f0f0;\n border-radius: 10px;\n text-align: center;\n }\n\n .result-box h3 {\n margin-bottom: 15px;\n color: #BA2026;\n }\n\n .chart-container {\n width: 45%;\n height: 300px;\n }\n\n #loan-chart {\n width: 100%;\n height: 100%;\n }\n\n button {\n width: 100%;\n padding: 15px;\n background-color: #BA2026;\n color: white;\n border: none;\n border-radius: 5px;\n font-size: 18px;\n cursor: pointer;\n margin-top: 20px;\n }\n\n button:hover {\n background-color: #a6201f;\n }\n <\/style>\n<\/head>\n<body>\n\n <div class=\"loan-calculator-container\">\n <h1>Loan Calculator<\/h1>\n\n \n <div class=\"slider-container\">\n <label for=\"principal\">Loan Amount<\/label>\n <input type=\"range\" id=\"principalSlider\" min=\"1000\" max=\"1000000\" value=\"10000\" step=\"100\" oninput=\"updatePrincipalAmount(this.value)\">\n <input type=\"number\" id=\"principal\" value=\"10000\" oninput=\"updatePrincipalSlider(this.value)\">\n <\/div>\n\n \n <div class=\"slider-container\">\n <label for=\"rate\">Rate of Interest (in %)<\/label>\n <input type=\"range\" id=\"rateSlider\" min=\"0.1\" max=\"100\" step=\"0.1\" value=\"5\" oninput=\"updateRate(this.value)\">\n <input type=\"number\" id=\"rate\" value=\"5\" step=\"0.1\" oninput=\"updateRateSlider(this.value)\">\n <\/div>\n\n \n <div class=\"slider-container\">\n <label for=\"time\">Loan Tenure (in years)<\/label>\n <input type=\"range\" id=\"timeSlider\" min=\"1\" max=\"50\" value=\"1\" oninput=\"updateTimePeriod(this.value)\">\n <input type=\"number\" id=\"time\" value=\"1\" oninput=\"updateTimeSlider(this.value)\">\n <\/div>\n\n <button onclick=\"calculateLoan()\">Calculate EMI<\/button>\n\n <div class=\"result-section\">\n <div class=\"result-box\">\n <h3>EMI Details<\/h3>\n <p>Monthly EMI: \u20b9<span id=\"emiResult\">0<\/span><\/p>\n <p>Total Interest Payable: \u20b9<span id=\"interestResult\">0<\/span><\/p>\n <p>Total Payment (Principal + Interest): \u20b9<span id=\"totalAmountResult\">0<\/span><\/p>\n <\/div>\n\n \n <div class=\"chart-container\">\n <canvas id=\"loan-chart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n\n <script>\n function updatePrincipalAmount(value) {\n document.getElementById('principal').value = value;\n }\n\n function updatePrincipalSlider(value) {\n document.getElementById('principalSlider').value = value;\n }\n\n function updateRate(value) {\n document.getElementById('rate').value = value;\n }\n\n function updateRateSlider(value) {\n document.getElementById('rateSlider').value = value;\n }\n\n function updateTimePeriod(value) {\n document.getElementById('time').value = value;\n }\n\n function updateTimeSlider(value) {\n document.getElementById('timeSlider').value = value;\n }\n\n function calculateLoan() {\n const principal = parseFloat(document.getElementById('principal').value);\n const rate = parseFloat(document.getElementById('rate').value);\n const time = parseFloat(document.getElementById('time').value);\n const monthlyRate = rate \/ 12 \/ 100;\n const tenureMonths = time * 12;\n\n const emi = (principal * monthlyRate * Math.pow(1 + monthlyRate, tenureMonths)) \/ (Math.pow(1 + monthlyRate, tenureMonths) - 1);\n const totalPayment = emi * tenureMonths;\n const totalInterest = totalPayment - principal;\n\n document.getElementById('emiResult').innerText = emi.toFixed(2);\n document.getElementById('interestResult').innerText = totalInterest.toFixed(2);\n document.getElementById('totalAmountResult').innerText = totalPayment.toFixed(2);\n\n \/\/ Update the pie chart\n updateChart(principal, totalInterest);\n }\n\n function updateChart(principal, interest) {\n const ctx = document.getElementById('loan-chart').getContext('2d');\n if (window.loanChart) {\n window.loanChart.destroy();\n }\n window.loanChart = new Chart(ctx, {\n type: 'doughnut',\n data: {\n labels: ['Principal', 'Interest'],\n datasets: [{\n data: [principal, interest],\n backgroundColor: ['#4CAF50', '#BA2026'],\n hoverOffset: 4\n }]\n },\n options: {\n responsive: true,\n plugins: {\n legend: {\n position: 'bottom',\n },\n }\n }\n });\n }\n\n \/\/ Initial calculation to display default EMI values\n calculateLoan();\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Loan Calculator Loan Calculator Loan Amount Rate of Interest (in %) Loan Tenure (in years) Calculate EMI EMI Details Monthly EMI: \u20b90 Total Interest Payable:…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","format":"standard","meta":{"_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"tools":[],"class_list":["post-19602","tools","type-tools","status-publish","format-standard","hentry","entry","rows"],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":false,"_links":{"self":[{"href":"https:\/\/bigbreakingwire.in\/wp-json\/wp\/v2\/tools\/19602"}],"collection":[{"href":"https:\/\/bigbreakingwire.in\/wp-json\/wp\/v2\/tools"}],"about":[{"href":"https:\/\/bigbreakingwire.in\/wp-json\/wp\/v2\/types\/tools"}],"author":[{"embeddable":true,"href":"https:\/\/bigbreakingwire.in\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bigbreakingwire.in\/wp-json\/wp\/v2\/comments?post=19602"}],"version-history":[{"count":0,"href":"https:\/\/bigbreakingwire.in\/wp-json\/wp\/v2\/tools\/19602\/revisions"}],"wp:attachment":[{"href":"https:\/\/bigbreakingwire.in\/wp-json\/wp\/v2\/media?parent=19602"}],"wp:term":[{"taxonomy":"tools","embeddable":true,"href":"https:\/\/bigbreakingwire.in\/wp-json\/wp\/v2\/tools?post=19602"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}