{"id":42781,"date":"2017-12-18T18:01:48","date_gmt":"2017-12-18T10:01:48","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=42781"},"modified":"2017-12-18T15:42:41","modified_gmt":"2017-12-18T07:42:41","slug":"jscalc-embeddable-calculator","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/jscalc-embeddable-calculator\/","title":{"rendered":"Make a Free Embedded Web Calculator Using JSCalc"},"content":{"rendered":"

If there\u2019s one thing developers hate it\u2019s reinventing the wheel<\/strong>. This is one of the biggest reasons to support the open-source movement<\/a><\/strong> and to share your favorite web apps with other developers.<\/p>\n

I recently stumbled onto a neat web app called JSCalc<\/a><\/strong> that lets anyone create their own embeddable calculator widget from scratch<\/strong>. It runs through JavaScript so you do need to be comfortable with JS code<\/a><\/strong>. This web app can save you loads of time building fairly complex calculators from scratch.<\/p>\n

\"JSCalc<\/a><\/figure>\n

Read Also:<\/strong> Useful Calendar & Date Picker Scripts For Web Developers<\/a><\/p>\n

The difficult part of any calculator is rarely the math<\/strong>. You can find mathematical solutions for anything from mortgage rates to tax estimations, all from a few Google searches.<\/p>\n

The tougher part of building a JS calculator is hooking up all the inputs<\/strong> and handling user data properly<\/strong>. That\u2019s why JSCalc is so useful.<\/p>\n

You can build a fully-functioning web form with a few clicks<\/strong> and connect it all to JavaScript functions. The app has three different tabs<\/strong>:<\/p>\n

    \n
  1. IO<\/strong> \u2013 creating the input fields & output data<\/li>\n
  2. Script<\/strong> \u2013 writing the actual calculations in JavaScript<\/li>\n
  3. Share<\/strong> \u2013 embed code for your site or a URL for direct linking<\/li>\n<\/ol>\n

    When embedding the calculator, you can choose how large to make the form<\/strong> and how it should appear on the site<\/strong>.<\/p>\n

    Every form created by JSCalc is fully responsive<\/a><\/strong>, so you don\u2019t need to worry about mobile users.<\/p>\n

    And, did I mention this app is totally open-source<\/strong>? You can find the source code on GitHub<\/a> if you wanna tinker with it or even host your own version.<\/p>\n

    Definitely a unique web app for developers who want a quick & easy way to create calc forms without coding everything from scratch<\/strong>.<\/p>\n

    To learn more, check out the main JSCalc site<\/a><\/strong> or watch the demo video<\/a><\/strong> to see how this thing works in action.<\/p>\n