{"id":109,"date":"2024-10-12T13:55:51","date_gmt":"2024-10-12T13:55:51","guid":{"rendered":"https:\/\/finanthropist.in\/academy\/?page_id=109"},"modified":"2024-11-06T16:36:15","modified_gmt":"2024-11-06T16:36:15","slug":"inflation-calculator","status":"publish","type":"page","link":"https:\/\/finanthropist.in\/academy\/inflation-calculator\/","title":{"rendered":"Inflation Calculator"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n Inflation Calculator<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 0;\n background-color: white;\n min-height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.container {\n width: 100%;\n max-width: 600px;\n margin: 20px;\n background: #fff;\n padding: 20px;\n border-radius: 10px;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n}\n\nh1 {\n text-align: center;\n color: #333;\n font-size: 26px;\n font-weight: bold;\n margin-bottom: 25px;\n border-bottom: 2px solid #007bff;\n padding-bottom: 10px;\n}\n\nh3 {\n font-size: 15px;\n margin: 10px 0;\n color: #444;\n font-weight: 600;\n}\n\n\/* Form Elements *\/\nlabel {\n display: block;\n margin-bottom: 5px;\n font-weight: bold;\n color: #555;\n}\n\ninput[type=\"number\"] {\n width: 100%;\n padding: 10px;\n margin-bottom: 15px;\n border: 1px solid #ddd;\n border-radius: 5px;\n font-size: 16px;\n box-sizing: border-box;\n transition: border-color 0.3s ease;\n}\n\ninput[type=\"number\"]:focus {\n outline: none;\n border-color: #007bff;\n box-shadow: 0 0 0 2px rgba(0,123,255,0.1);\n}\n\n.btn-submit {\n width: 100%;\n padding: 12px;\n background-color: #007bff;\n color: white;\n border: none;\n border-radius: 5px;\n font-size: 18px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\n.btn-submit:hover {\n background-color: #0056b3;\n}\n\n\/* Learn More Link *\/\n.learn-more {\n margin-top: 15px;\n text-align: center;\n cursor: pointer;\n color: #007bff;\n text-decoration: underline;\n transition: color 0.3s ease;\n}\n\n.learn-more:hover {\n color: #0056b3;\n}\n\n\/* Table Styles *\/\n.result-table {\n display: none;\n margin-top: 20px;\n overflow-x: auto;\n}\n\ntable {\n width: 100%;\n border-collapse: collapse;\n margin-top: 10px;\n background-color: white;\n}\n\ntable, th, td {\n border: 1px solid #ddd;\n}\n\nth, td {\n padding: 10px 8px;\n text-align: center;\n}\n\nth {\n background-color: #f8f9fa;\n font-weight: 600;\n color: #444;\n}\n\n\/* Modal Styles *\/\n#modal {\n display: none;\n position: fixed;\n z-index: 100;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.5);\n justify-content: center;\n align-items: center;\n}\n\n#modal.show {\n display: flex;\n}\n\n#modal .modal-content {\n position: relative;\n background: white;\n width: 90%;\n max-width: 500px;\n margin: 20px;\n padding: 20px;\n border-radius: 10px;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\n}\n\n#modal .close-btn {\n position: absolute;\n top: 10px;\n right: 10px;\n font-size: 25px;\n color: red;\n cursor: pointer;\n transition: color 0.3s ease;\n}\n\n#modal .close-btn:hover {\n color: darkred;\n}\n\n\/* Responsive Design *\/\n@media (max-width: 600px) {\n body {\n padding: 10px;\n }\n \n .container {\n margin: 10px;\n padding: 15px;\n }\n \n h1 {\n font-size: 20px;\n margin-bottom: 20px;\n }\n \n h3 {\n font-size: 14px;\n }\n \n input[type=\"number\"] {\n font-size: 14px;\n }\n \n .btn-submit {\n font-size: 16px;\n }\n \n #modal .modal-content {\n margin: 10px;\n padding: 15px;\n }\n \n table {\n font-size: 14px;\n }\n \n th, td {\n padding: 6px 4px;\n }\n}\n <\/style>\n<\/head>\n<body>\n\n<div class=\"container\">\n <h1>Inflation Calculator<\/h1>\n <form id=\"inflation-form\">\n <label for=\"investment\">Investment Amount *<\/label>\n <input type=\"number\" id=\"investment\" placeholder=\"Enter investment amount\" required>\n \n <label for=\"inflation-rate\">Inflation Rate (%) *<\/label>\n <input type=\"number\" id=\"inflation-rate\" placeholder=\"Enter inflation rate\" required>\n \n <label for=\"terms\">Terms (years) *<\/label>\n <input type=\"number\" id=\"terms\" placeholder=\"Enter number of years\" required>\n \n <button type=\"submit\" class=\"btn-submit\">Submit<\/button>\n <\/form>\n\n <div class=\"learn-more\" onclick=\"openModal()\">Click here to know more about Inflation Calculator.<\/div>\n\n <div class=\"result-table\" id=\"result-table\">\n <h3>Inflation Result<\/h3>\n <table id=\"inflation-results\">\n <tr>\n <th>Year<\/th>\n <th>Purchase Power<\/th>\n <\/tr>\n <\/table>\n <\/div>\n<\/div>\n\n<div id=\"modal\">\n <div class=\"modal-content\">\n <span class=\"close-btn\" onclick=\"closeModal()\">×<\/span>\n <h3>What is an Inflation Calculator?<\/h3><br>\n <p>Many times people invest their hard-earned money into various investment vehicles available in the market, but while investing, they fail to check the inflation percentage against the benefits they will get after the decided tenure. \n This module will help you check the deprecated value (real purchasing power) of your current investment after the decided tenure. For example, if you invest today \u20b910,00,000 for 15 years, considering an inflation rate of 7%, your \u20b910,00,000 purchasing power will depreciate to \u20b93,36,000 at maturity in actual.<\/p>\n <\/div>\n<\/div>\n\n<script>\n const form = document.getElementById('inflation-form');\n const resultTable = document.getElementById('result-table');\n const inflationResultsTable = document.getElementById('inflation-results');\n\n form.addEventListener('submit', function(e) {\n e.preventDefault();\n \n const investment = parseFloat(document.getElementById('investment').value);\n const inflationRate = parseFloat(document.getElementById('inflation-rate').value) \/ 100;\n const terms = parseInt(document.getElementById('terms').value);\n \n inflationResultsTable.innerHTML = '<tr><th>Year<\/th><th>Purchase Power<\/th><\/tr>'; \/\/ Reset table header\n\n for (let year = 1; year <= terms; year++) {\n const depreciatedValue = investment * Math.pow(1 - inflationRate, year);\n inflationResultsTable.innerHTML += `<tr><td>${year}<\/td><td>${depreciatedValue.toFixed(2)}<\/td><\/tr>`;\n }\n\n resultTable.style.display = 'block';\n });\n\n \/\/ Modal functions\n function openModal() {\n document.getElementById('modal').style.display = 'block';\n }\n\n function closeModal() {\n document.getElementById('modal').style.display = 'none';\n }\n<\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\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>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Inflation Calculator Inflation Calculator Investment Amount * Inflation Rate (%) * Terms (years) * Submit Click here to<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"elementor_canvas","meta":{"_tutorstarter_page_metadata":[],"footnotes":""},"class_list":["post-109","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/finanthropist.in\/academy\/wp-json\/wp\/v2\/pages\/109","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/finanthropist.in\/academy\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/finanthropist.in\/academy\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/finanthropist.in\/academy\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/finanthropist.in\/academy\/wp-json\/wp\/v2\/comments?post=109"}],"version-history":[{"count":0,"href":"https:\/\/finanthropist.in\/academy\/wp-json\/wp\/v2\/pages\/109\/revisions"}],"wp:attachment":[{"href":"https:\/\/finanthropist.in\/academy\/wp-json\/wp\/v2\/media?parent=109"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}