Cactuslab · Work · Westpac Calculators

<!doctype html>  <html lang="en" class="js--html"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileImage" content="/static/img/favicon/ms-icon-144x144.2d537cba.png"> <meta name="theme-color" content="#ffffff"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@cactuslab"> <meta name="twitter:title" content="Cactuslab: Westpac Calculators"> <meta name="twitter:description" content="Cactuslab worked with Westpac New Zealand to rebuild several of its financial calculators as interactive HTML5 web apps for its public site. The new calculators make use of APIs to populate Westpac’s latest interest rates, and provide live results based on user input across a range of component types. Additionally, the ‘What could my rent get me?’ calculator uses HTML5 geo-location and Trade Me APIs to suggest possible properties in the user’s neighbourhood and price range."> <meta name="twitter:image" content="https://cactuslab.com/assets/resized/sm/upload/ha/i0/qs/xy/property-investment-crop-0-500-0-0.jpg?k=8969c9d00b"> <meta property="og:url" content="https://cactuslab.com/work/westpac-calculators/"> <meta property="og:type" content="article"> <meta property="og:title" content="Project details for Westpac Calculators at Cactuslab"> <meta property="og:description" content="Cactuslab worked with Westpac New Zealand to rebuild several of its financial calculators as interactive HTML5 web apps for its public site. The new calculators make use of APIs to populate Westpac’s latest interest rates, and provide live results based on user input across a range of component types. Additionally, the ‘What could my rent get me?’ calculator uses HTML5 geo-location and Trade Me APIs to suggest possible properties in the user’s neighbourhood and price range."> <meta property="og:image" content="https://cactuslab.com/assets/resized/sm/upload/ha/i0/qs/xy/property-investment-crop-0-500-0-0.jpg?k=8969c9d00b"> <meta property="og:image:width" content="500"> <meta property="og:image:height" content="750"> <meta property="fb:app_id" content="654000414758342"> <title> Cactuslab · Work · Westpac Calculators </title> <link rel="stylesheet" href="/static/css/main.min.9fa619f9.css" type="text/css" media="all"> <link rel="apple-touch-icon" sizes="57x57" href="/static/img/favicon/apple-icon-57x57.f5d574c5.png"> <link rel="apple-touch-icon" sizes="60x60" href="/static/img/favicon/apple-icon-60x60.8aa9891b.png"> <link rel="apple-touch-icon" sizes="72x72" href="/static/img/favicon/apple-icon-72x72.f8a44f32.png"> <link rel="apple-touch-icon" sizes="76x76" href="/static/img/favicon/apple-icon-76x76.8b365de5.png"> <link rel="apple-touch-icon" sizes="114x114" href="/static/img/favicon/apple-icon-114x114.27bae8dc.png"> <link rel="apple-touch-icon" sizes="120x120" href="/static/img/favicon/apple-icon-120x120.5d2efb29.png"> <link rel="apple-touch-icon" sizes="144x144" href="/static/img/favicon/apple-icon-144x144.2d537cba.png"> <link rel="apple-touch-icon" sizes="152x152" href="/static/img/favicon/apple-icon-152x152.ec29f70b.png"> <link rel="apple-touch-icon" sizes="180x180" href="/static/img/favicon/apple-icon-180x180.83b0e344.png"> <link rel="icon" type="image/png" sizes="192x192" href="/static/img/favicon/android-icon-192x192.fdddf555.png"> <link rel="icon" type="image/png" sizes="32x32" href="/static/img/favicon/favicon-32x32.08b5775d.png"> <link rel="icon" type="image/png" sizes="96x96" href="/static/img/favicon/favicon-96x96.d4326dad.png"> <link rel="icon" type="image/png" href="/static/img/favicon/favicon-32x32.08b5775d.png"> <link rel="manifest" href="/static/img/favicon/manifest.1caa16a2.json"> <script type="text/javascript" src="/static/js/main.min.ecc35a3c.js"></script> </head> <body class="js--body -is-not-scrolled"> <div id="wrapper" class="js--wrapper"> <style> .site-logo { color: #E41A13; } .external-link { color: #E41A13; } .external-link:hover, .external-link:focus { border-color: #E41A13; } </style> <div class="context js--context"> <header class="site-header js--site-header"> <div class="scrollbar-offset js--scrollbar-offset -is-fixed"> <div class="constraint js--constraint"> <a class="site-logo js--site-logo" href="/"> <span class="_sr-only">Cactuslab · </span> <svg class="glyph" xmlns="http://www.w3.org/2000/svg" width="36" height="50" viewBox="0 0 36 50" preserveAspectRatio="xMaxYMid meet"> <title>Cactuslab Glyph Logo</title> <g fill="none" fill-rule="evenodd" transform="translate(6 5)"> <circle class="bubble js--bubble" cx="16" cy="38" r="3"/> <circle class="bubble js--bubble" cx="6" cy="28" r="6"/> <circle class="bubble js--bubble" cx="16" cy="9" r="9"/> </g> </svg> <svg class="wordmark" xmlns="http://www.w3.org/2000/svg" width="123" height="25" viewBox="0 0 123 25" preserveAspectRatio="xMinYMid meet"> <title>Cactuslab Wordmark Logo</title> <g fill-rule="evenodd" stroke-width="0"> <path d="M16.14 4.01c-.987-.707-1.393-.943-2.264-1.238-1.16-.472-2.38-.65-3.658-.65C4.645 2.122.406 6.488.406 12.21c0 6.015 4.18 10.32 10.044 10.32.93 0 1.684-.06 2.67-.295.988-.236 1.452-.412 2.613-.943l-.638-2.005c-1.568.648-2.845.943-4.47.943-4.587 0-7.548-3.243-7.548-8.197 0-4.48 2.96-7.725 7.083-7.725 1.858 0 3.31.472 4.76 1.474l1.22-1.77zm9.36 14.744c-1.916 1.415-2.612 1.71-3.6 1.71-1.103 0-1.8-.708-1.8-1.77 0-.53.06-.825.407-1.473l4.993-1.29v2.83zm3.367 1.887c-.696-.11-1.045-.35-1.103-.7v-8.32c0-2.06-1.683-3.36-4.354-3.36-2.845 0-4.82 1.24-4.82 3.01 0 .3 0 .47.234.83l2.264-.47c-.116-.23-.116-.35-.116-.53 0-.76.638-1.18 2.032-1.18 1.683 0 2.554.59 2.554 1.65v2.42l-4.644 1.12c-1.974.47-2.96 1.77-2.96 3.78 0 2.127 1.392 3.54 3.598 3.54.93 0 2.032-.292 2.845-.763.464-.235.755-.47 1.393-1.06.117 1.296.755 1.77 2.613 1.886l.464-1.83zM42 21.06l-1.16-1.77c-1.103.826-1.916 1.12-3.193 1.12-2.845 0-4.644-1.945-4.644-5.012 0-3.007 1.8-5.13 4.47-5.13 1.22 0 1.974.294 3.02 1.18l1.276-1.83c-.93-.648-1.34-.884-2.21-1.12-.64-.177-1.28-.236-1.98-.236-4.13 0-6.97 3.007-6.97 7.253 0 4.13 2.78 6.96 6.85 6.96 1.33 0 2.61-.295 3.71-.943.11-.06.4-.237.81-.473zm10-.236l-.93-1.474c-.928.707-1.392.943-1.915.943-.464 0-.754-.236-.754-.65-.05-.116-.05-.41-.05-.824l-.06-.59v-7.67h3.54V8.67h-3.54V4.717h-2.21v3.95l-2.26.59v1.298h2.27v8.906c0 1.77 1.04 3.01 2.55 3.01 1.05 0 1.8-.35 3.37-1.65zm13.83 1.297V8.61h-2.263v8.257c-1.51 2.123-3.658 3.656-5.05 3.656-1.104 0-1.57-.708-1.57-2.36V8.61h-2.205v10.144c0 2.477 1.22 3.774 3.54 3.774 2.033 0 3.775-1.06 5.343-3.184v2.83h2.206v-.06zm12.496-3.48c0-2.12-.813-3.06-3.6-4.24-2.438-1-2.786-1.24-3.31-1.77-.23-.23-.347-.53-.347-.82 0-1 .98-1.71 2.49-1.71.52 0 .98.06 1.56.24.69.18 1.04.36 1.91.89l1.1-1.83c-1.108-.65-1.63-.822-2.618-1-.58-.06-1.16-.116-1.685-.116-3.13 0-5.05 1.47-5.05 3.83 0 1.65.87 2.537 3.485 3.657 2.38 1 3.02 1.355 3.544 2.12.174.177.29.59.29.944 0 1.06-.987 1.77-2.38 1.77-.93 0-2.148-.3-3.077-.77-.236-.12-.58-.294-.99-.53l-.93 1.887c1.336.707 1.86.88 3.136 1.12.7.118 1.28.177 1.86.177 2.845 0 4.587-1.415 4.587-3.833z"/> <path d="M81.836.413h2.206v21.703h-2.206z"/> <path d="M94.62 18.754c-1.915 1.415-2.61 1.71-3.598 1.71-1.103 0-1.8-.708-1.8-1.77 0-.53.058-.825.406-1.473l4.993-1.29v2.83zm3.31 1.887c-.696-.11-1.044-.35-1.103-.7v-8.32c0-2.06-1.683-3.36-4.354-3.36-2.845 0-4.82 1.24-4.82 3.01 0 .3 0 .47.234.83l2.264-.47c-.05-.23-.11-.35-.11-.53 0-.76.64-1.18 2.03-1.18 1.69 0 2.56.59 2.56 1.65v2.42l-4.65 1.11c-1.97.47-2.96 1.77-2.96 3.78 0 2.127 1.39 3.54 3.6 3.54.93 0 2.03-.293 2.85-.764.467-.236.757-.472 1.396-1.062.116 1.298.754 1.77 2.61 1.888l.466-1.83zm11.973-5.77c0 2.24-.522 3.54-1.974 4.54-.64.47-1.34.77-2.15.95-.41.06-.76.12-1.16.12-.82 0-1.34-.11-1.92-.41v-8.61c1.1-.76 2.09-1.06 3.31-1.06 2.44 0 3.89 1.65 3.89 4.49zm2.44-.12c0-3.89-2.265-6.49-5.633-6.49-.813 0-1.8.12-2.496.3-.523.18-.813.3-1.51.65V.42h-2.206v21.29c.64.29.87.41 1.335.47.697.18 1.916.292 2.67.292 4.762 0 7.84-3.01 7.84-7.728z"/> </g> </svg> </a> <nav class="site-nav"> <ul class="navlist"> <li class="navitem"><a class="label" href="/about/">About</a></li> <li class="navitem active"><a class="label" href="/work/">Work</a></li> <li class="navitem"><a class="label" href="/ventures/">Ventures</a></li> </ul> </nav> </div> </div> </header> <article class="site-content context-transition -fade-in js--context-transition"> <div class="constraint page-layout -has-no-aside"> <div class="page-body"> <header class="page-section project-information"> <div class="header"> <h1 class="title">Westpac Calculators</h1> </div> <div class="body"> <div class="rich-text"> <p><span>Cactuslab worked with Westpac New Zealand to rebuild several of its financial calculators as interactive HTML5 web apps for its public site. The new calculators make use of </span><abbr title="Application Programming Interfaces">APIs</abbr><span> to populate Westpac’s latest interest rates, and provide live results based on user input across a range of component types. Additionally, the </span><a href="http://www.westpac.co.nz/home-loans/calculators/rent-as-mortgage/" target="_blank">‘What could my rent get me?’</a><span> calculator uses HTML5 geo-location and Trade Me APIs to suggest possible properties in the user’s neighbourhood and price range.</span></p> </div> <p><a class="external-link" target="_blank" href="http://www.westpac.co.nz/home-loans/calculators/">Visit site</a></p> </div> </header> <section class="page-section project-media"> <figure class="mediaitem -has-no-border -has-no-fade-top -has-no-fade-bottom"> <img data-aspect-ratio="0.8445454545454546" src="/assets/resized/sm/upload/nw/j9/g6/ep/kiwisaver-crop-0-1100-0-0.jpg?k=85489449b0" srcset="/assets/resized/sm/upload/nw/j9/g6/ep/kiwisaver-crop-0-1540-0-1299-crop-1.jpg?k=0cc9f24b06 2x" alt="Detail image for Westpac Calculators" style="width:70%;" /> </figure> <figure class="mediaitem -has-no-border -has-no-fade-top -has-no-fade-bottom"> <img data-aspect-ratio="3.0845454545454545" src="/assets/resized/sm/upload/bi/y1/f0/mi/property-investment-0-1100-0-0.jpg?k=c378a3c80c" srcset="/assets/resized/sm/upload/bi/y1/f0/mi/property-investment-0-1540-0-4748-crop-1.jpg?k=1a86b9c627 2x" alt="Detail image for Westpac Calculators" style="width:70%;" /> </figure> <figure class="mediaitem -has-no-border -has-no-fade-top -has-no-fade-bottom"> <img data-aspect-ratio="1.6754545454545455" src="/assets/resized/sm/upload/lc/u4/l5/jp/choices-offset-0-1100-0-0.jpg?k=6b40798e1d" srcset="/assets/resized/sm/upload/lc/u4/l5/jp/choices-offset-0-1540-0-2578-crop-1.jpg?k=b4aabf4338 2x" alt="Detail image for Westpac Calculators" style="width:70%;" /> </figure> <figure class="mediaitem -has-no-border -has-no-fade-top -has-no-fade-bottom"> <img data-aspect-ratio="1.0518181818181818" src="/assets/resized/sm/upload/z9/2z/ot/ql/repayments-0-1100-0-0.jpg?k=a30767696e" srcset="/assets/resized/sm/upload/z9/2z/ot/ql/repayments-0-1540-0-1619-crop-1.jpg?k=d482d18b2a 2x" alt="Detail image for Westpac Calculators" style="width:70%;" /> </figure> <figure class="mediaitem -has-no-border -has-no-fade-top -has-no-fade-bottom"> <img data-aspect-ratio="0.9245454545454546" src="/assets/resized/sm/upload/jy/mw/px/f0/split-home-loan-0-1100-0-0.jpg?k=a30767696e" srcset="/assets/resized/sm/upload/jy/mw/px/f0/split-home-loan-0-1540-0-1423-crop-1.jpg?k=70e942bf23 2x" alt="Detail image for Westpac Calculators" style="width:70%;" /> </figure> </section> <section class="page-section projects-more-of-type"> <h3 class="moreoftypetitle">More Web work</h3> <div class="project-list"> <article class="project" data-text-color="light"> <div class="proportions" style="background-color:#556677"> <a class="repositioning" href="/work/letterboxd/"> <h3 class="name">Letterboxd</h3> <div class="device js--device -desktop -landscape" data-device-type="desktop"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="1.5" src="/assets/resized/resized/sm/upload/o1/op/oq/p2/lb-film-tdk-0-440-0-0-0-0-0-660-crop-1.jpg?k=dad5fcdddc" srcset="/assets/resized/resized/sm/upload/o1/op/oq/p2/lb-film-tdk-0-880-0-1594-crop-1-0-0-0-1320-crop-1.jpg?k=4feb6029ff 2x" alt="Image for Letterboxd" /> </div> </div> </div> </div> </a> </div> </article> <article class="project" data-text-color="light"> <div class="proportions" style="background-color:#009BDD"> <a class="repositioning" href="/work/48hours/"> <h3 class="name">48Hours</h3> <div class="device js--device -desktop -landscape" data-device-type="desktop"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="1.5" src="/assets/resized/resized/sm/upload/8a/sg/ov/a3/48-home-crop-0-440-0-0-0-0-0-660-crop-1.jpg?k=734377b32b" srcset="/assets/resized/resized/sm/upload/8a/sg/ov/a3/48-home-crop-0-880-0-1830-crop-1-0-0-0-1320-crop-1.jpg?k=734377b32b 2x" alt="Image for 48Hours" /> </div> </div> </div> </div> </a> </div> </article> <article class="project" data-text-color="dark"> <div class="proportions" style="background-color:#00B9BC"> <a class="repositioning" href="/work/stqry/"> <h3 class="name">STQRY</h3> <div class="device js--device -desktop -landscape" data-device-type="desktop"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="0.8727272727272727" src="/assets/resized/sm/upload/zy/n3/mz/jr/stqry-home-0-440-0-0.jpg?k=3cd8bb6241" srcset="/assets/resized/sm/upload/zy/n3/mz/jr/stqry-home-0-880-0-768-crop-1.jpg?k=a08bc32131 2x" alt="Image for STQRY" /> </div> </div> </div> </div> </a> </div> </article> <article class="project" data-text-color="light"> <div class="proportions" style="background-color:#FF545D"> <a class="repositioning" href="/work/nziff/"> <h3 class="name">NZIFF</h3> <div class="device js--device -desktop -landscape" data-device-type="desktop"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="0.7159090909090909" src="/assets/resized/sm/upload/xj/rf/9v/i2/nziff-1-0-440-0-0.jpg?k=4f40227d57" srcset="/assets/resized/sm/upload/xj/rf/9v/i2/nziff-1-0-880-0-630-crop-1.jpg?k=27575ecd6a 2x" alt="Image for NZIFF" /> </div> </div> </div> </div> </a> </div> </article> <article class="project" data-text-color="dark"> <div class="proportions" style="background-color:#FCF0DB"> <a class="repositioning" href="/work/the-greenhouse/"> <h3 class="name">The Greenhouse</h3> <div class="device js--device -desktop -landscape" data-device-type="desktop"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="0.8522727272727273" src="/assets/resized/sm/upload/56/uu/yp/ks/gha-2-0-440-0-0.jpg?k=f5fa3ab99a" srcset="/assets/resized/sm/upload/56/uu/yp/ks/gha-2-0-880-0-750-crop-1.jpg?k=f132e6ef39 2x" alt="Image for The Greenhouse" /> </div> </div> </div> </div> </a> </div> </article> <article class="project" data-text-color="light"> <div class="proportions" style="background-color:#E40712"> <a class="repositioning" href="/work/honda-new-zealand/"> <h3 class="name">Honda New Zealand</h3> <div class="device js--device -desktop -landscape" data-device-type="desktop"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="1.5" src="/assets/resized/resized/sm/upload/3q/vm/dq/po/honda-home-crop-tall-0-440-0-0-0-0-0-660-crop-1.jpg?k=6d1ae8eb2c" srcset="/assets/resized/resized/sm/upload/3q/vm/dq/po/honda-home-crop-tall-0-880-0-2068-crop-1-0-0-0-1320-crop-1.jpg?k=e43f67cd35 2x" alt="Image for Honda New Zealand" /> </div> </div> </div> </div> </a> </div> </article> </div> <a class="moreoftypetitle -allworklink" href="/work/">All<span class="extendedtext"> work</span></a></h3> </section> </div> </div> </article> <div class="adjacent-project-navigation"> <a class="arrow -previous" href="/work/the-coconet/" data-target="-1"> <img src="/static/img/assets/arrow.3dd72681.svg"> </a> <a class="arrow -next" href="/work/letterboxd/" data-target="1"> <img src="/static/img/assets/arrow.3dd72681.svg"> </a> </div> <footer class="site-footer"> <div class="constraint"> <div class="copyright">© Cactuslab, est. 2001 <a class="backtotop js--backtotop -is-hidden">↑</a> </div> </div> </footer> </div> </div> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-748523-1', 'auto'); ga('send', 'pageview'); </script> </body> </html>

CINXE.COM

Cactuslab · Work · Westpac Calculators