webdevpuneet.com

Related Snippets

67 in Tools & Calculators category
42–47 of 60

Insurance Quote Calculator

Workout Interval Timer

Gas Fee Estimator

Canvas ASCII Art Converter

Cron Expression Builder

Morse Code Translator & Player

Insurance Quote Calculator — Free Live Premium Estimator Widget

Insurance Quote Calculator · Tools · Plain HTML, CSS & JS · Live preview

CategoryTools & Calculators
TagsDeveloper Tools

Copy & paste

Source Code

<div class="iq-card">
  <div class="iq-head">
    <h2>Life insurance estimate</h2>
    <p>Move the controls — your monthly premium updates instantly.</p>
  </div>
  <div class="iq-body">
    <div class="iq-field">
      <label for="iqAge">Age range</label>
      <select id="iqAge">
        <option value="0.6" selected>18 – 29</option>
        <option value="0.8">30 – 39</option>
        <option value="1.1">40 – 49</option>
        <option value="1.6">50 – 59</option>
        <option value="2.4">60+</option>
      </select>
    </div>
    <div class="iq-field">
      <label for="iqCoverage">Coverage amount <span id="iqCoverageVal">$250,000</span></label>
      <input type="range" id="iqCoverage" min="50000" max="1000000" step="25000" value="250000" />
      <div class="iq-scale"><span>$50k</span><span>$1M</span></div>
    </div>
    <div class="iq-field">
      <label for="iqTerm">Term length</label>
      <select id="iqTerm">
        <option value="0.9">10 years</option>
        <option value="1" selected>20 years</option>
        <option value="1.15">30 years</option>
      </select>
    </div>
    <div class="iq-field iq-toggle-field">
      <label for="iqSmoker">Smoker</label>
      <button type="button" id="iqSmoker" class="iq-toggle" aria-pressed="false">No</button>
    </div>
  </div>
  <div class="iq-result">
    <div class="iq-premium">
      <span class="iq-premium-label">Estimated monthly premium</span>
      <span class="iq-premium-value" id="iqPremium">$0</span>
    </div>
    <details class="iq-math">
      <summary>Show the math</summary>
      <div class="iq-math-body" id="iqMathBody"></div>
    </details>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Live recalculation
Every control updates the premium instantly.
Transparent formula
A visible multiplier-based pricing model.
Math breakdown panel
Every intermediate value is shown, not hidden.
Native form controls
select and range inputs, no library.
Smoker toggle
A real risk factor with a visible multiplier.
Formatted currency
toLocaleString formats every dollar value.
No dependencies
Pure HTML, CSS, and JavaScript.
Easy to retune
Constants at the top of the script.

About this UI Snippet

Insurance Quote Calculator — A Premium Estimator That Shows Its Work

Screenshot of the Insurance Quote Calculator snippet rendered live

The insurance quote calculator is the widget on a carrier or comparison site that turns age, coverage amount, and term length into an estimated monthly premium — instantly, as the visitor adjusts controls, instead of forcing a form submission and a wait. This snippet builds one in plain HTML, CSS, and JavaScript with no dependencies, and deliberately exposes the formula instead of hiding it behind a black box.

Inputs that map to real risk factors

The widget collects four inputs: an age-range select, a coverage-amount range slider ($50k to $1M in $25k steps), a term-length select (10/20/30 years), and a smoker toggle. Each one maps to a numeric multiplier — ageFactor, termFactor, SMOKER_FACTOR — rather than a hidden lookup table, so the relationship between an input and the price is traceable.

A formula you can read

The premium is computed as (coverage / 1000) * baseRatePer1k * ageFactor * termFactor * smokerFactor. That's the entire pricing model, and it runs synchronously on every input event — moving the slider recalculates the premium on every tick, with no debounce needed since the arithmetic is trivial.

Show the math, not just the number

A <details> panel labeled "Show the math" renders every intermediate value: coverage converted to $1,000 units, the base rate, and each factor applied in turn, ending in a totals row. This is the core idea of the snippet — insurance pricing tools are notorious for feeling like black boxes, and rendering the arithmetic builds trust and doubles as a teaching tool for how term life pricing actually works (age and smoking status dominate; coverage scales linearly).

Native controls, no library

The age and term pickers are native <select> elements and the coverage input is a native <input type="range"> styled with accent-color — so keyboard, screen reader, and touch support come for free, and there's no dependency to load.

Instant feedback loop

Every control fires recalc() on input/change, which updates both the headline premium and the math panel in one pass, so the two never fall out of sync.

Customizing it

Swap in real actuarial rate factors, add a health-conditions field, or change the coverage step and range. Pair it with a checkout form to collect the applicant's details, or a comparison table to show multiple coverage tiers side by side.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSThe quote card renders with default selections.
  2. 2
    Adjust age, coverage, or termThe premium recalculates immediately.
  3. 3
    Toggle smoker statusThe multiplier changes and updates the price.
  4. 4
    Open "Show the math"See every factor applied, in order.
  5. 5
    Tune the constantsEdit BASE_RATE_PER_1K or the factor values.

Real-world uses

Common Use Cases

Insurance carrier sites
Put an instant estimate on a life or auto insurance page, recalculating the monthly premium as age, coverage, term and smoker status change.
Comparison site estimates
Show a transparent estimate before sending visitors to a comparison table of providers, so they arrive already informed.
Lead generation
Hook the estimate into a checkout form so interested visitors can continue directly from their quote.
Financial education
Teach how term, age and coverage affect cost, using a Show the math panel that exposes every multiplier in the formula.
Agent underwriting sandboxes
Give internal agents a quick pricing sandbox, built from native select and range controls without any library.
Related: Resend OTP Cooldown Timer
See the Resend OTP Cooldown Timer for a related forms pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

No — the factors (base rate, age, term, smoker multipliers) are illustrative constants meant to demonstrate the pattern of a transparent, live-recalculating quote widget. Replace them with your own underwriting data or an API call before using it for real quotes.

Insurance calculators are often perceived as black boxes. The "show the math" panel renders every factor applied to reach the final number, which builds trust with the visitor and can double as an educational tool showing how age and smoking status dominate term life pricing.

Yes. The range input fires an "input" event on every tick, and recalc() runs synchronously — the arithmetic is trivial, so no debounce or throttling is needed even on rapid drags.

Add a new control, give it a numeric factor value the same way ageFactor and termFactor work, multiply it into the formula in recalc(), and add a corresponding row to the math breakdown template so it stays transparent.

Yes. Move the four inputs and the premium/math markup into your component, keep the constants and recalc() logic in a function triggered by state changes (or a computed/derived value), and re-render the breakdown rows from the same intermediate values.