Calorie calculator – Health Calculator for your Website

The Calorie Calculator – Health 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.
• 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.

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., calorie_calculator).
  • Paste the content of codesnippet.txt as shortcode content.
  • Click Save.
• Use the Shortcode:
  • Add the shortcode [sc name=”calorie_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) are linked correctly using their CDN URLs.

Troubleshooting
Common Issues

• Calculator Not Displaying Correctly:
  • Ensure all necessary libraries (jQuery) 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.