The Budget 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

Files Included:

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.
img folder – Contains all images
index.html – A HTML file for preview the calculator.

Installation and Integration General Instructions

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
Copy the code:
Open codesnippet.txt and copy all its contents.
Embed the code:
Paste the copied code into the custom code section of your website platform. See specific platform instructions below.

Platform-Specific Instructions WordPress

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., budget_calculator).
- Paste the content of codesnippet.txt as shortcode content.
- Click Save.
Use the Shortcode:
- Add the shortcode [sc name=”budget_calculator”] to any page or post.

Squarespace

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.

Wix

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.

Webflow

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.

Customizing Styles

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.

JavaScript Configuration

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.

Troubleshooting Common Issues

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.

Support & Contact If you encounter any issues or have questions related to the the, feel free to contact our support team. We are dedicated to providing timely assistance and ensuring that you have a seamless experience with the calculator.

Budget Calculator - Financial Web Calculator for Website