Frontier Health Cost Savings Calculator

by stevenkaspar

HTML

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div data-quote="yes">
  <parent-component></parent-component>
</div>

<template id="ParentComponentTemplate">
  <div>
    <h2>Welcome to the Parent Component!</h2>
    <input type="number" min="1" step="1" v-model="employee_count" /> {{ employee_count }} - {{ savings }}
  </div>
</template>


<script type="module">
  import { createApp } from 'vue';
  
  function formatCurrency(number, locale = 'en-US', currency = 'USD', options = {}) {
    const formatter = new Intl.NumberFormat(locale, {
      style: 'currency',
      currency,
      ...options, // Allow additional formatting options
    });
    return formatter.format(number);
  }
  
  const EMPLOYEE_SAVINGS = 2000
  
  const ParentComponent = {
    components: {},
    data() {
      return {
        employee_count: 5, // Initial number of employees
      };
    },
    computed: {
    	savings: {
      	get () {
	        return formatCurrency(this.employee_count * EMPLOYEE_SAVINGS)
        }
      }
    },
    template: '#ParentComponentTemplate',
  };

  createApp(ParentComponent).mount('[data-quote="yes"]');
</script>