Retirement Planning Calculator - Web Calculator for your Website

The Retirement Planning Calculator – Financial Calculator is a customizable and responsive web calculator designed to integrate seamlessly into various website platforms, including WordPress, Squarespace, Wix, and Webflow. It is built using HTML, CSS, JavaScript, and jQuery. This documentation provides step-by-step instructions for installation, configuration, and usage.

Features:

• Fully customizable using HTML, CSS, and JavaScript.
• Lightweight and easy to integrate.
• Compatible with popular website platforms.
• 100% Responsive design for all devices

• codesnippet.txt – Contains the complete HTML, CSS, and JavaScript code for the calculator.
• calculator-styles.css – Contains the CSS styles for the calculator.
• calculator-script.js – Contains the JavaScript logic for the calculator.
• jquery.js – The jQuery library required for the calculator.
• autoNumeric.js – The autoNumeric library required for the number format.
• img folder – Contains all images
• index.html – A HTML file for preview the calculator.

• Download the file, Unpack and navigate to codesnippet.txt file:
• Open the file to view the code.
• Update image paths (if applicable):
• Replace any image URLs with your own image links.
• Currency change (if applicable):
• Change dollar sign in this variable let curr_symbol = ”$”; in the <script> section
• Open codesnippet.txt and copy all its contents.
• Paste the copied code into the custom code section of your website platform. See specific platform instructions below.

• Install a Shortcoder Plugin:
  • Navigate to your WordPress dashboard.
  • Go to Plugins > Add New.
  • Search for “Shortcoder” and click Install Now.
  • Activate the plugin.
• Create a Shortcode:
  • Go to “Shortcoder” link in the left navigation menu.
  • Click on Create a New Shortcode.
  • Name your shortcode (e.g., rt_calculator).
  • Paste the content of codesnippet.txt as shortcode content.
  • Click Save.
• Use the Shortcode:
  • Add the shortcode [sc name=”rt_calculator”] to any page or post.

• Embed on a Page:
  • Use a Code Block in Squarespace to embed the calculator on a specific page.
  • Paste the contents of codesnippet.txt into the Code Block.

• Open the Editor:
  • Go to your Wix dashboard and open the site editor.
• Add an HTML Embed:
  • Drag and drop an HTML Embed block onto your page.
  • Paste the contents of codesnippet.txt into the block.

• Open the Designer:
  • Navigate to your Webflow project.
• Embed Custom Code:
  • Use an Embed element to paste the contents of codesnippet.txt
• Publish the Site:
  • Save and publish your site to view the calculator.

• Modify CSS:
  • The CSS section is enclosed within <style> tags.
  • Update font sizes, colors, or layout to match your website’s theme.
• Add Custom Fonts (Optional):
  • Link your preferred font CDN in the <style> section.

• Functionality Tweaks:
  • Update the logic in the <script> section if additional calculations or custom behaviors are required.
• External Libraries:
  • Ensure the required libraries (jQuery and AutoNumeric) are linked correctly using their CDN URLs.

• Calculator Not Displaying Correctly:
  • Ensure all necessary libraries (jQuery and AutoNumeric) are loaded.
  • Check for JavaScript errors in the browser console.
• Image Not Loading:
  • Verify the image URL is correct and accessible.