{"id":3231,"date":"2019-11-22T06:51:00","date_gmt":"2019-11-22T06:51:00","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=3231"},"modified":"2019-11-13T07:30:02","modified_gmt":"2019-11-13T07:30:02","slug":"a-nice-collection-of-css-javascript-calculators","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/code\/a-nice-collection-of-css-javascript-calculators\/","title":{"rendered":"A Nice Collection of CSS &#038; JavaScript Calculators"},"content":{"rendered":"\n<p><strong>Calculators <\/strong>are one of the few <strong>tools <\/strong>that have become just as useful online as they are off. Perhaps even more so, when you consider that we now have apps that can calculate more than just hard numbers.<\/p>\n\n\n\n<p>Online calculators do everything from help us manage our diet, figure out a loan payment to telling us the distance between two points. Whatever the equation, there\u2019s likely a niche tool out there to provide answers.<\/p>\n\n\n\n<p>In that spirit, we\u2019ve put together a collection of code snippets that calculate all sorts of things. Not only are they useful, but they also demonstrate the power of both CSS and JavaScript.<\/p>\n\n\n\n<h2>Covering the Basics<\/h2>\n\n\n\n<p>Let\u2019s start with the calculator we\u2019re all familiar with. This snippet, built with\u00a0<a rel=\"noreferrer noopener\" aria-label=\"React (opens in a new tab)\" href=\"https:\/\/www.w3schools.com\/whatis\/whatis_react.asp\" target=\"_blank\">React<\/a>, is not unlike the pocket model many of us carried around in school. And it\u2019s still useful. You don\u2019t want to solve those equations on your own, right?<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"React Calculator\" id=\"cp_embed_xOzyGX\" src=\"https:\/\/codepen.io\/mjijackson\/embed\/preview\/xOzyGX?height=300&amp;slug-hash=xOzyGX&amp;default-tabs=js,result&amp;host=https:\/\/codepen.io\" scrolling=\"no\" frameborder=\"0\" height=\"300\" allowtransparency=\"true\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2>The Other VW<\/h2>\n\n\n\n<p>At first glance, the letters \u201cVW\u201d might make you think of the popular German cars. But in the web design space, VW stands for \u201c<a href=\"https:\/\/css-tricks.com\/fun-viewport-units\/\" target=\"_blank\" rel=\"noreferrer noopener\">Viewport Width<\/a>\u201d. It\u2019s the percentage of the full width of a browser window. This calculator provides an easy way to find your VW. Enter the width of your design element and that of the viewport and see the result.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-codepen\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/codepen.io\/lakshmiR\/pen\/YGWXoo\n<\/div><\/figure>\n\n\n\n<h2>What\u2019s Your BMI?<\/h2>\n\n\n\n<p>Here\u2019s a simple way to calculate your body mass index (BMI). This is a combined measure of your height and weight. This calculation is then used to determine whether or not you are within a healthy range. This snippet takes your height (in inches) and weight (in pounds) and calculates BMI using Angular.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Angular BMI Calculator\" id=\"cp_embed_GpNxrv\" src=\"https:\/\/codepen.io\/Gothburz\/embed\/preview\/GpNxrv?height=300&amp;slug-hash=GpNxrv&amp;default-tabs=html,result&amp;host=https:\/\/codepen.io\" scrolling=\"no\" frameborder=\"0\" height=\"300\" allowtransparency=\"true\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2>Can You Afford It?<\/h2>\n\n\n\n<p>Buying a car is a pretty big deal. Before you head to the dealer, you might want to make sure that you can afford that monthly payment. Use this handy calculator, written in\u00a0Vue.js, to determine various payment scenarios. The clever use of JavaScript also enables the totals to change on the fly.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Daily UI #04: Auto loan calculator using Vue JS\" id=\"cp_embed_PWVGVb\" src=\"https:\/\/codepen.io\/brykng\/embed\/preview\/PWVGVb?height=300&amp;slug-hash=PWVGVb&amp;default-tabs=css,result&amp;host=https:\/\/codepen.io\" scrolling=\"no\" frameborder=\"0\" height=\"300\" allowtransparency=\"true\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2>Maintain the Right Ratio<\/h2>\n\n\n\n<p>When performing tasks such as cropping images, keeping the correct aspect ratio is important. Failure to do so can lead to some unpleasant distortion. This simple calculator takes the original size of an element on the top line. Then, as you enter the desired new width on the second line, it will automatically determine the correct height \u2013 thus keeping your ratio intact.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"jQuery | Aspect Ratio Calculator\" id=\"cp_embed_XNjxdZ\" src=\"https:\/\/codepen.io\/tobiasdev\/embed\/preview\/XNjxdZ?height=300&amp;slug-hash=XNjxdZ&amp;default-tabs=js,result&amp;host=https:\/\/codepen.io\" scrolling=\"no\" frameborder=\"0\" height=\"300\" allowtransparency=\"true\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2>Pixels to REM<\/h2>\n\n\n\n<p>It\u2019s pretty common practice these days to use the CSS\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/www.sitepoint.com\/understanding-and-using-rem-units-in-css\/\" target=\"_blank\"><code>REM<\/code>\u00a0unit<\/a>\u00a0for sizing text. REMs are relevant to the size of the root element. So, if your base font size is\u00a0<code>16px<\/code>, that is equal to\u00a0<code>1rem<\/code>. But calculations beyond that can be tricky. This handy converter will help you size things just right. Plus, it generates a snippet to that you can copy and paste it into your stylesheet.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Pixel to REM calculator\" id=\"cp_embed_Yrmxqw\" src=\"https:\/\/codepen.io\/andybelldesign\/embed\/preview\/Yrmxqw?height=300&amp;slug-hash=Yrmxqw&amp;default-tabs=css,result&amp;host=https:\/\/codepen.io\" scrolling=\"no\" frameborder=\"0\" height=\"300\" allowtransparency=\"true\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2>Who Needs JavaScript?<\/h2>\n\n\n\n<p>As time goes on, it seems like CSS is becoming capable of some amazing feats. Take this CSS-only calculator. No, it\u2019s probably not going to replace the fancy JavaScript options on this list. But it does show what\u2019s possible with a little creative thinking. And that in itself is impressive.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"From Integer Variable To Content: A basic pure CSS calculator\" id=\"cp_embed_gJMgVv\" src=\"https:\/\/codepen.io\/RockStarwind\/embed\/preview\/gJMgVv?height=300&amp;slug-hash=gJMgVv&amp;default-tabs=css,result&amp;host=https:\/\/codepen.io\" scrolling=\"no\" frameborder=\"0\" height=\"300\" allowtransparency=\"true\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2>Your Mileage May Vary<\/h2>\n\n\n\n<p>For those looking to buy an electric vehicle, one of the biggest concerns is the driving range. This calculator will show how many miles you can drive various Tesla models on a single charge. It uses criteria such as speed, outside temperature, wheel size and whether or not the air conditioning system is in use.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Tesla Range per Charge Calculator in React \/ Redux\" id=\"cp_embed_GrWZQq\" src=\"https:\/\/codepen.io\/DELAN\/embed\/preview\/GrWZQq?height=300&amp;slug-hash=GrWZQq&amp;default-tabs=js,result&amp;host=https:\/\/codepen.io\" scrolling=\"no\" frameborder=\"0\" height=\"300\" allowtransparency=\"true\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2>Calculate All the Things<\/h2>\n\n\n\n<p>It just so happens that calculators and code go perfectly together. Languages such as JavaScript are quite reliant on math, so it\u2019s only natural that developers are using it to build these types of apps.<\/p>\n\n\n\n<p>What\u2019s really amazing is that we\u2019re only scratching the surface when it comes to the types of calculators being built. To see even more examples, check out this <a rel=\"noreferrer noopener\" href=\"https:\/\/codepen.io\/collection\/XBwxgg\/\" target=\"_blank\">CodePen collection<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Calculators are one of the few tools that have become just as useful online as they are off. Perhaps even more so, when you consider that we now have apps that can calculate more than just hard numbers. Online calculators do everything from help us manage our diet, figure out a loan payment to telling [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":3235,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[4,145,12],"tags":[25,56,94,146,116,87],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/11\/CSS-Javascript-Calculators-3.jpg","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-Q7","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/3231"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=3231"}],"version-history":[{"count":2,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/3231\/revisions"}],"predecessor-version":[{"id":3413,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/3231\/revisions\/3413"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/3235"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=3231"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=3231"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=3231"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}