Web-Based Calculator Development

Job ID: 38766646

Budget: €750 – €1,500 EUR

Customer: Izidor Isakov, Spaincheck.com, email: partners@spaincheck..com 
 Developer: …………………..

Development Agreement for Creation of Four Online Calculators for Shopify
All Project Resources 
The Developer, ………………………….. will create four calculators based on provided Excel files, tailored for seamless integration into Shopify and other websites for Izidor Isakov. 

The deliverables for each calculator will include:
Platform: Shopify
Design & Usability: Visually appealing and intuitive interface, optimized for both desktop and mobile users.
Performance: Calculators load with a smooth loading animation of a maximum of 2 seconds for a better user experience.
Embed Code Generator: Each calculator will come with an embed code generator, allowing users to easily embed the calculators on other websites while attributing Spaincheck.com. 




<div id="salary-calculator"></div>
<script src="CDN FILE LINK.JS"></script>
<script>
window.calculatorConfig = {
bgColor: '#1773b0',
buttonColor: '#f1bf06'
};
</script>

PDF Download Option: Users can download results as a PDF file for convenient reference.
Email Capture: The calculator will capture the user's email before PDF download, allowing Spaincheck.com to engage with users directly.

Calculators to be Developed (Please follow this priority during the development process):
Salary Calculator (based on Salary Calculator.xlsx)
Expat Tax Checker (based on Spain Expat Tax Checker.xlsx)
Mortgage Calculator (based on Mortgage Calculator.xlsx)
BNB Profit Calculator (based on BNB Profit Calculator.xlsx)
Process Summary: 
Create the Calculator Page: Build a dedicated page that includes the calculator, an embed code generator, and a scaled preview (1:3) of the calculator.
Integrate CDN Script: Ensure that only the calculator-specific code from the JS file, hosted in the CDN directory, is loaded and executed on users webpage.


Design and Functionality Requirements
User Interface:
Elegant and Simple Design: Follow the example screenshots provided (STRUCTURE EXAMPLE & UI EXAMPLE).
Components:
Sliders for numeric inputs (e.g., age, income, loan amount).
Radio Buttons and Checkboxes for binary options (e.g., Yes/No selections).
Hidden Menus to keep the interface clean and organized.
Info Dots with hover text to provide explanations (using the provided “Info Dot Icon”).
Icons and Colors:
Use the provided icons (e.g., “Button Icon.png” and “Info Dot Icon.png”) where appropriate.
Ensure color customization options for embedding, while aligning with Spaincheck brand colors: Yellow: #f1bf06, Blue: #00568E, Black, Red: #df0909, White and Silver. Rounded Corners 20 degrees. 

Features:
Output Display:
BNB and Mortgage Calculators: Integrate easy-to-read charts to visually represent output data. The developer can choose between pie charts, column charts, or other chart types that best enhance the user experience. Charts should be responsive and visually clear.
All Calculators: Display results in a clean, organized format, similar to the provided "Output Table" example.
PDF Download Option (Lead Magnet):
PDF Report Generation: Each calculator should offer a PDF download of the results as a lead magnet.
Email Capture: Require users to enter their email before accessing the PDF download. Secure email storage and integration with email marketing services like Mailchimp API KEY PROVIDED.
PDF Content: Include calculated results and charts (where applicable) in an easy-to-read format, with Spaincheck branding.
Customizable Embed Code
Embed Options: Generate an embed code for users to place the calculators on their websites. +Small Preview under the generator. 
Customization Settings: Allow users to adjust:
Background Color
Text Color
Button Color
Text Font
Backlink Requirement: Each embedded calculator must include a do-follow link to Spaincheck.com, in a small Info logo Dot (i) (20x20px) with text like "By Spaincheck.com" on the calculator, right top corner. "By Spaincheck.com" is shown only when hovering on the info dot. 

Programming Requirements:

Quick Loading: Optimize each calculator for a smooth loading time of 2 seconds for a smooth user experience(loading icon for value and better UX).
CDN Compatibility: JavaScript files should be hosted in Shopify’s CDN - Public directory to ensure fast access and minimal load time.
Responsive Design: Each calculator should be optimized for both desktop and mobile viewing, with layouts that adapt to different screen sizes.
Efficient Performance: Ensure all code is optimized to avoid unnecessary delays and maintain loading speed.
Clear, Organized Code: Write clean, structured code for readability and maintainability, following Shopify best practices.
Testing: Test each calculator for calculation accuracy against the provided Excel formulas. Ensure compatibility across various browsers and devices.















Terms of Service and Licensing: State that the calculator is copyrighted in our website’s Terms of Service, specifying that unauthorised duplication is prohibited (exception is using the Embed Code Generation Option as Provided).
/*
MIT License

Copyright (c) 2024 Spaincheck.com, Izidor Isakov
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
1. Ownership and Attribution
   The Software, including calculators, associated resources, and embed code generation, is owned by Spaincheck.com and Izidor Isakov.
   2. Redistribution and Embed Requirements
   Any redistribution of the Software, including its embed code, must include an attribution link to Spaincheck.com (Do-Follow), in the form of a small ‘i’ logo (20x20px) when hoover with the moyse text shows: "By Spaincheck.com" above the info dot icon.
3. Modification and Customization
   Users may customize the Software as permitted by the MIT License. The embed code includes options to adjust background color, button color, text font and color, and other settings for user experience enhancement while maintaining branding with a Spaincheck.com backlink.
4. No Unauthorized Duplication
   Unauthorized duplication or redistribution beyond the embed code generation option provided in the Software is prohibited. These terms should be specified in the Terms of Service on the Spaincheck.com website.
5. PDF and Lead Magnet Usage
   Users of the Software are permitted to download calculator results as a PDF for personal use. Spaincheck.com reserves the right to collect user emails prior to PDF downloads, enabling Spaincheck.com to engage with users directly.
6. Performance Standards
   The Software includes performance optimization for smooth loading (2 seconds), compatibility with Shopify’s CDN for fast access, and responsive design for various device sizes. Testing for calculation accuracy and cross-browser/device compatibility is required to ensure an optimal user experience.
7. Disclaimer of Warranty
   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES, OR OTHER LIABILITY, ARISING FROM, OUT OF, OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.






Project Timeline and Communication:
Completion expected until 1.12.2024 from the start of the project 07.11.2024.
Weekly progress updates, with design drafts provided for approval as needed.

      5. Payment Milestones and Budget
Budget: 950 USD
Milestone
Description (Based on Excel File Completion)
Amount ($)
Milestone 1
Completion of Salary Calculator
$300
Milestone 2
Completion of BNB Profit Calculator
$300
Milestone 3
Completion of Mortgage Calculator
$200
Milestone 4
Completion of Expat Tax Checker
$150

Date: 07.11.2024
i: Valid upon written confirmation by both parties by any electronic means of communication(Fiverr, WhatsApp, other online message).

The calculators should have advanced, custom-designed interfaces to enhance user experience. Focus on ensuring compatibility across various browsers.

The PDF report should provide a detailed breakdown of the calculations, including all input parameters and intermediate results. The calculators should offer interactive elements like sliders, dynamic charts, and real-time updates. Include smooth transitions between sections for a seamless user experience. Use pie charts to visually represent output data for the BNB and Mortgage Calculators. Include advanced customization options such as layout adjustments and interactive features for the embedding options.
Related categories: JavaScript Website Design CSS HTML5 HTML