All components · Category: Calculators

Budget calculator

Pick items and quantities and see a running quote.

A list of items with prices that you provide, quantities, an optional discount and a total that updates as the visitor chooses.

Try it

<budget-calculator>

ViewPreviewCodeCSS

budget-calculator: Pick items and quantities and see a running quote. A picture of the real component, drawn from its own code. The controls change the picture and the code beside it; nothing here is sent or stored.

Generated from the component's manifest and the values above.

index.html

<budget-calculator
  headline="Build your quote"
  discount-percent="10"
  currency="USD"
  locale="en"
  items="[{&quot;id&quot;:&quot;landing&quot;,&quot;label&quot;:&quot;Landing page&quot;,&quot;price&quot;:1500},{&quot;id&quot;:&quot;post&quot;,&quot;label&quot;:&quot;Blog post&quot;,&quot;price&quot;:300},{&quot;id&quot;:&quot;logo&quot;,&quot;label&quot;:&quot;Logo&quot;,&quot;price&quot;:900}]"
></budget-calculator>

<script>
  const element = document.querySelector("budget-calculator");
  element.addEventListener("budget-calculator:change", (event) => {
    console.log(event.detail);
  });
  element.addEventListener("budget-calculator:quote", (event) => {
    console.log(event.detail);
  });
</script>

Add the site's Taggor script once; the component appears when it loads.

taggor-component.js

const element = document.createElement("budget-calculator");
element.setAttribute("headline", "Build your quote");
element.setAttribute("discount-percent", "10");
element.setAttribute("currency", "USD");
element.setAttribute("locale", "en");
element.items = [
  {
    "id": "landing",
    "label": "Landing page",
    "price": 1500
  },
  {
    "id": "post",
    "label": "Blog post",
    "price": 300
  },
  {
    "id": "logo",
    "label": "Logo",
    "price": 900
  }
];
element.addEventListener("budget-calculator:change", (event) => {
  console.log(event.detail);
});
element.addEventListener("budget-calculator:quote", (event) => {
  console.log(event.detail);
});
document.body.append(element);

Add the site's Taggor script once; the component appears when it loads.
Lists and objects go in as a property of the element, not an attribute.

BudgetCalculator.tsx

import { useEffect, useRef } from "react";

export function BudgetCalculator() {
  const ref = useRef<HTMLElement>(null);

  useEffect(() => {
    const element = ref.current;
    if (!element) return;
    Object.assign(element, {
      items: [
        {
          "id": "landing",
          "label": "Landing page",
          "price": 1500
        },
        {
          "id": "post",
          "label": "Blog post",
          "price": 300
        },
        {
          "id": "logo",
          "label": "Logo",
          "price": 900
        }
      ],
    });
    const onChange = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("budget-calculator:change", onChange);
    const onQuote = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("budget-calculator:quote", onQuote);
    return () => {
      element.removeEventListener("budget-calculator:change", onChange);
      element.removeEventListener("budget-calculator:quote", onQuote);
    };
  }, []);

  return <budget-calculator
      ref={ref}
      headline="Build your quote"
      discount-percent="10"
      currency="USD"
      locale="en"
    />;
}

Add the site's Taggor script once; the component appears when it loads.
React 18 sends every prop of a custom element as a text attribute.
Lists and objects go in as a property of the element, not an attribute.
The event is heard with addEventListener, inside an effect.

BudgetCalculator.tsx

import { useEffect, useRef } from "react";

export function BudgetCalculator() {
  const ref = useRef<HTMLElement>(null);

  useEffect(() => {
    const element = ref.current;
    if (!element) return;
    Object.assign(element, {
      items: [
        {
          "id": "landing",
          "label": "Landing page",
          "price": 1500
        },
        {
          "id": "post",
          "label": "Blog post",
          "price": 300
        },
        {
          "id": "logo",
          "label": "Logo",
          "price": 900
        }
      ],
    });
    const onChange = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("budget-calculator:change", onChange);
    const onQuote = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("budget-calculator:quote", onQuote);
    return () => {
      element.removeEventListener("budget-calculator:change", onChange);
      element.removeEventListener("budget-calculator:quote", onQuote);
    };
  }, []);

  return <budget-calculator
      ref={ref}
      headline="Build your quote"
      discount-percent={10}
      currency="USD"
      locale="en"
    />;
}

Add the site's Taggor script once; the component appears when it loads.
React 19 sets a property when the element already has it, an attribute otherwise.
Lists and objects go in as a property of the element, not an attribute.
The event is heard with addEventListener, inside an effect.

src/BudgetCalculator.vue

<script setup lang="ts">
function onChange(event: Event) {
  console.log((event as CustomEvent).detail);
}

function onQuote(event: Event) {
  console.log((event as CustomEvent).detail);
}
</script>

<template>
  <budget-calculator
    headline="Build your quote"
    :discountPercent.prop="10"
    currency="USD"
    locale="en"
    :items.prop="[{&quot;id&quot;:&quot;landing&quot;,&quot;label&quot;:&quot;Landing page&quot;,&quot;price&quot;:1500},{&quot;id&quot;:&quot;post&quot;,&quot;label&quot;:&quot;Blog post&quot;,&quot;price&quot;:300},{&quot;id&quot;:&quot;logo&quot;,&quot;label&quot;:&quot;Logo&quot;,&quot;price&quot;:900}]"
    @budget-calculator:change="onChange"
    @budget-calculator:quote="onQuote"
  />
</template>

vite.config.ts

import vue from "@vitejs/plugin-vue";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag === "budget-calculator",
        },
      },
    }),
  ],
});

Add the site's Taggor script once; the component appears when it loads.
vite.config.ts tells Vue that this tag is not a Vue component.
Lists and objects go in as a property of the element, not an attribute.

src/app/budget-calculator.component.ts

import { afterNextRender, Component, CUSTOM_ELEMENTS_SCHEMA, DestroyRef, ElementRef, inject } from "@angular/core";

@Component({
  selector: "app-budget-calculator",
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <budget-calculator
      headline="Build your quote"
      [discountPercent]="10"
      currency="USD"
      locale="en"
      [items]="values.items"
    ></budget-calculator>
  `,
})
export class BudgetCalculatorComponent {
  readonly values = {
    items: [
      {
        "id": "landing",
        "label": "Landing page",
        "price": 1500
      },
      {
        "id": "post",
        "label": "Blog post",
        "price": 300
      },
      {
        "id": "logo",
        "label": "Logo",
        "price": 900
      }
    ],
  };

  constructor() {
    const host = inject<ElementRef<HTMLElement>>(ElementRef);
    const element = () => host.nativeElement.querySelector("budget-calculator");
    const onChange = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    afterNextRender(() => element()?.addEventListener("budget-calculator:change", onChange));
    inject(DestroyRef).onDestroy(() => element()?.removeEventListener("budget-calculator:change", onChange));
    const onQuote = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    afterNextRender(() => element()?.addEventListener("budget-calculator:quote", onQuote));
    inject(DestroyRef).onDestroy(() => element()?.removeEventListener("budget-calculator:quote", onQuote));
  }
}

Add the site's Taggor script once; the component appears when it loads.
The component declares CUSTOM_ELEMENTS_SCHEMA.
Lists and objects go in as a property of the element, not an attribute.
The event is heard with addEventListener, inside an effect.

src/TaggorComponent.svelte

<script>
  function onChange(event) {
    console.log(event.detail);
  }

  function onQuote(event) {
    console.log(event.detail);
  }
</script>

<budget-calculator
  headline="Build your quote"
  discount-percent={10}
  currency="USD"
  locale="en"
  items={[
    {
      "id": "landing",
      "label": "Landing page",
      "price": 1500
    },
    {
      "id": "post",
      "label": "Blog post",
      "price": 300
    },
    {
      "id": "logo",
      "label": "Logo",
      "price": 900
    }
  ]}
  onbudget-calculator:change={onChange}
  onbudget-calculator:quote={onQuote}
></budget-calculator>

Add the site's Taggor script once; the component appears when it loads.

How an agent gets a component like this onto a site:

taggor checktaggor publish

The CSS variables the component exposes, set the way a customer's page would.

styles.css

budget-calculator {
  --bc-accent: #1d4ed8;
  --bc-radius: 6px;
}

Props

Props of the component, read from its manifest
Prop	Type	Default	What it does
headline	string	none	Replaces the default heading.
items	list	[{"id":"landing-page","label":"Landing page","p…	The priced items, in the site's language.
discountPercent	number 0 to 100	0	–
currency	BRL \| USD \| EUR	BRL	–
locale	pt-BR \| en	pt-BR	–

Prop names and descriptions are the component's own, in English, as its author wrote them.

Events

Events of the component, read from its manifest
Event	When it fires
change	The visitor changed a quantity.
quote	The visitor asked for the quote; the page can open its own form with it.

Build one with your agent

Paste this into your agent. It asks you before it signs in, pays or goes further than checking and publishing.

Build me a Taggor component like "Budget calculator" (budget-calculator): Pick items and quantities and see a running quote. Fetch https://taggor.dev/agent-setup/prompt.md and follow its instructions to set me up for Taggor. Ask me before you sign in, create an account, accept terms, pay for anything or type a secret. Check it with `taggor check` and publish it with `taggor publish`, and stop there. Do not promote it to production, attach it to a site, roll back anything or use --yes, --force or --force-drop-invalid unless I ask for exactly that in this conversation.

Related components

Quote wizard<quote-wizard>
Pricing configurator<pricing-configurator>
Loan simulator<finance-simulator>