How to create Dynamic Pricing List Template with HTML, Tailwind CSS and JavaScript

document.addEventListener('DOMContentLoaded', () => {
  // --- DATA ---
  const dataPlans = {
    starter: {
      name: 'Starter',
      description: 'Ideal for individuals getting started and hobby projects.',
      monthlyPricePerUser: 33,
      annualPricePerUser: 27,
      minUsers: 1,
      maxUsers: 10,
      defaultUsers: 5,
      ctaText: 'Get Started with Starter',
    },
    pro: {
      name: 'Pro',
      description:
        'For developing teams and professionals requiring advanced resources',
      monthlyPricePerUser: 79,
      annualPricePerUser: 63,
      minUsers: 5,
      maxUsers: 50,
      defaultUsers: 10,
      ctaText: 'Opt for Pro',
    },
    enterprise: {
      name: 'Enterprise',
      description:
        'Tailored solutions for large organizations and complex needs.',
      monthlyPrice: 'Custom',
      annualPrice: 'Custom',
      minUsers: 50,
      maxUsers: 500,
      defaultUsers: 50,
      ctaText: 'Contact Sales',
    },
  };

  const addOnsData = {
    ai: {
      monthlyPrice: 10,
      annualPrice: 8,
    },
    support: {
      monthlyPrice: 15,
      annualPrice: 12,
    },
  };

  const allFeatures = [
    { id: 'projects', name: 'Up to 10 Projects', plans: ['starter'] },
    {
      id: 'projects-pro',
      name: 'Unlimited Projects',
      plans: ['pro', 'enterprise'],
    },
    { id: 'team-members', name: '5 Team Members', plans: ['starter'] },
    {
      id: 'team-members-pro',
      name: 'Unlimited Team Members',
      plans: ['pro', 'enterprise'],
    },
    { id: 'storage', name: '50GB Storage', plans: ['starter', 'pro'] },
    { id: 'storage-ent', name: 'Unlimited Storage', plans: ['enterprise'] },
    {
      id: 'analytics',
      name: 'Basic Analytics',
      plans: ['starter', 'pro', 'enterprise'],
    },
    { id: 'integrations', name: 'Basic Integrations', plans: ['starter'] },
    {
      id: 'integrations-pro',
      name: 'Advanced Integrations',
      plans: ['pro', 'enterprise'],
    },
    { id: 'ai-tools', name: 'Advanced AI Tools', plans: ['pro', 'enterprise'] },
    { id: 'api-access', name: 'API Access', plans: ['pro', 'enterprise'] },
    {
      id: 'priority-support',
      name: 'Priority Chat Assistance',
      plans: ['pro', 'enterprise'],
    },
    { id: 'sso', name: 'Advanced SSO & Security', plans: ['enterprise'] },
    { id: 'sla', name: 'Uptime SLA', plans: ['enterprise'] },
    {
      id: 'dedicated-support',
      name: '24/7/356 Dedicated Support',
      plans: ['enterprise'],
    },
  ];

  // --- DOM ELEMENTS ---
  const toggle = document.getElementById('billing-toggle');
  const planSelectors = document.querySelectorAll('.plan-selector-card');
  const selectorPriceSpans = document.querySelectorAll(
    '.plan-selector-card span[data-monthly-price]'
  );

  const planNameEl = document.getElementById('plan-name');
  const planDescriptionEl = document.getElementById('plan-description');
  const planPriceValueEl = document.getElementById('plan-price-value');
  const planPricePeriodEl = document.getElementById('plan-price-period');
  const ctaButton = document.getElementById('cta-button');
  const featureListEl = document.getElementById('feature-list');

  const sliderContainer = document.getElementById('slider-container');
  const teamSlider = document.getElementById('team-slider');
  const sliderValueDisplay = document.getElementById('slider-value-display');

  const addOnsContainer = document.getElementById('add-ons-container');
  const addOnCheckboxes = document.querySelectorAll('.add-on-checkbox');
  const addOnPriceSpans = document.querySelectorAll('.add-on-price');

  let currentPlanId = 'starter';
  let isAnnual = false;
  let priceAnimationInterval = null;
  let activeAddOns = new Set();

  // --- FUNCTIONS ---

  // 1. Initialize: Render all possible features into the list
  function initializeFeatureList() {
    allFeatures.forEach((feature) => {
      const li = document.createElement('li');
      li.className = 'feature-item';
      li.dataset.featureId = feature.id;
      li.innerHTML = `
      <div class="icon-wrapper">
      <svg class="icon-check w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
      <svg class="icon-cross w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
  </div>
  <span class="feature-name text-gray-700">${feature.name}</span>
            `;
      featureListEl.appendChild(li);
    });
  }

  // 2. Animate Price Counter
  function animatePrice(newPrice) {
    if (typeof newPrice !== 'number') {
      if (priceAnimationInterval) clearInterval(priceAnimationInterval);
      planPriceValueEl.innerText = newPrice;
      planPriceValueEl.dataset.currentPrice = 'NaN'; // Mark as non-numeric
      return;
    }

    let currentPrice = parseInt(planPriceValueEl.dataset.currentPrice);
    if (isNaN(currentPrice)) {
      currentPrice = 0;
    }

    clearInterval(priceAnimationInterval); // Clear any existing animation

    const step =
      newPrice > currentPrice
        ? Math.ceil((newPrice - currentPrice) / 10)
        : Math.floor((newPrice - currentPrice) / 10);
    if (step === 0) {
      // Already at target
      planPriceValueEl.dataset.currentPrice = newPrice;
      planPriceValueEl.innerText = newPrice; // Set text if no animation
      return;
    }

    let animatedPrice = currentPrice; // Use a variable for animation state

    priceAnimationInterval = setInterval(() => {
      if (animatedPrice !== newPrice) {
        animatedPrice += step;
        // Overshoot/undershoot check
        if (
          (step > 0 && animatedPrice >= newPrice) ||
          (step < 0 && animatedPrice <= newPrice)
        ) {
          animatedPrice = newPrice;
          clearInterval(priceAnimationInterval);
        }
        planPriceValueEl.innerText = animatedPrice; // Update text with animated value
      } else {
        clearInterval(priceAnimationInterval);
      }
    }, 20); // Animation speed
    planPriceValueEl.dataset.currentPrice = newPrice; // Set the new *target* price
  }

  // 3. Update all UI components based on selected plan
  function updatePlanDetails(planId) {
    currentPlanId = planId;
    const planData = dataPlans[planId];
    isAnnual = toggle.checked;

    // Reset add-ons when changing plans
    activeAddOns.clear();
    addOnCheckboxes.forEach((cb) => (cb.checked = false));

    // Update text details
    planNameEl.innerText = planData.name;
    planDescriptionEl.innerText = planData.description;
    ctaButton.innerText = planData.ctaText;
    ctaButton.href = `#${planId}`;

    // Show/Hide Add-ons & Slider
    if (planId === 'enterprise') {
      addOnsContainer.style.display = 'none';
      sliderContainer.style.display = 'none';
    } else {
      addOnsContainer.style.display = 'block';
      sliderContainer.style.display = 'block';

      // Update slider properties
      teamSlider.min = planData.minUsers;
      teamSlider.max = planData.maxUsers;
      teamSlider.value = planData.defaultUsers;
      updateSliderDisplay();
    }

    // Update price (will be called by updateTotalPrice)
    updateTotalPrice();

    // Feature list update
    allFeatures.forEach((feature) => {
      const featureEl = document.querySelector(
        `.feature-item[data-feature-id="${feature.id}"]`
      );
      if (feature.plans.includes(planId)) {
        featureEl.classList.remove('disabled');
      } else {
        featureEl.classList.add('disabled');
      }
    });

    // Update selector card active state
    planSelectors.forEach((card) => {
      if (card.dataset.planId === planId) {
        card.classList.add('active');
      } else {
        card.classList.remove('active');
      }
    });
  }

  // 4. Update prices on the selector cards (left side)
  function updateSelectorCardPrices() {
    isAnnual = toggle.checked;
    selectorPriceSpans.forEach((span) => {
      const price = isAnnual
        ? span.dataset.annualPrice
        : span.dataset.monthlyPrice;
      span.innerText = `$${price}`;
    });
  }

  // 5. Update Add-on price text
  function updateAddOnPrices() {
    isAnnual = toggle.checked;
    addOnPriceSpans.forEach((span) => {
      const monthly = span.dataset.monthlyPrice;
      const annual = span.dataset.annualPrice;
      span.innerText = isAnnual ? `$${annual}` : `$${monthly}`;
    });
  }

  // 6. Calculate Total Price
  function updateTotalPrice() {
    const planData = dataPlans[currentPlanId];
    isAnnual = toggle.checked;

    // Handle Enterprise "Custom" price
    if (currentPlanId === 'enterprise') {
      animatePrice('Custom');
      planPricePeriodEl.innerText = 'Custom Pricing';
      return;
    }

    const selectedUsers = parseInt(teamSlider.value);
    const perUserPrice = isAnnual
      ? planData.annualPricePerUser
      : planData.monthlyPricePerUser;
    const basePlanPrice = selectedUsers * perUserPrice;

    let totalAddOnPrice = 0;
    activeAddOns.forEach((addOnId) => {
      const addOnData = addOnsData[addOnId];
      // Making add-ons a flat monthly fee, not per-user
      totalAddOnPrice += isAnnual
        ? addOnData.annualPrice
        : addOnData.monthlyPrice;
    });

    const totalPrice = basePlanPrice + totalAddOnPrice;
    animatePrice(totalPrice);
    planPricePeriodEl.innerText = isAnnual ? 'per year' : 'per month';
  }

  // 7. Update Slider Value Display
  function updateSliderDisplay() {
    const users = teamSlider.value;
    sliderValueDisplay.innerText = `${users} Member${users > 1 ? 's' : ''}`;
  }

  // --- EVENT LISTENERS ---
  // Billing toggle
  toggle.addEventListener('change', () => {
    isAnnual = toggle.checked;
    updateSelectorCardPrices();
    updateAddOnPrices();
    updateTotalPrice(); // Re-calculate total price
  });

  // Team slider
  teamSlider.addEventListener('input', () => {
    updateSliderDisplay();
    updateTotalPrice();
  });

  // Plan selector cards
  planSelectors.forEach((card) => {
    card.addEventListener('click', () => {
      const planId = card.dataset.planId;
      updatePlanDetails(planId);
    });
  });

  // Add-on checkboxes
  addOnCheckboxes.forEach((checkbox) => {
    checkbox.addEventListener('change', () => {
      const addOnId = checkbox.dataset.addOnId;
      if (checkbox.checked) {
        activeAddOns.add(addOnId);
      } else {
        activeAddOns.delete(addOnId);
      }
      updateTotalPrice(); // Recalculate price on add-on change
    });
  });

  // --- INITIALIZATION ---
  initializeFeatureList();
  updateSelectorCardPrices();
  updateAddOnPrices();
  // Set "Pro" as the default active plan on load
  const defaultPlanId = 'pro';
  currentPlanId = defaultPlanId;
  document
    .querySelector(`.plan-selector-card[data-plan-id="${defaultPlanId}"]`)
    .classList.add('active');
  updatePlanDetails(defaultPlanId);

  // Set initial price without animation
  const initialPlan = dataPlans[defaultPlanId];
  const initialUsers = initialPlan.defaultUsers;
  const initialPrice = initialPlan.monthlyPricePerUser * initialUsers;
  planPriceValueEl.innerText = initialPrice;
  planPriceValueEl.dataset.currentPrice = initialPrice;
  teamSlider.value = initialUsers;
  updateSliderDisplay();
});