Free Online Calculators – Finance, Health, Lifestyle & Fun Tools

				
					c```javascript
// Initialize variables
const cardsPerPage = 12;
let currentPage = 1;
let currentCategory = 'All';

// Cache DOM elements
const calculatorGrid = document.querySelector('.calculator-grid');
const calculatorCards = document.querySelectorAll('.calculator-card');
const filterButtons = document.querySelectorAll('.filters button');
const loadMoreButton = document.querySelector('.load-more button');

// Assign categories to cards (for demo purposes, as HTML doesn't have data-category)
const cardCategories = [
    { index: 0, category: 'Fun' },           // Age Calculator
    { index: 1, category: 'Health & Lifestyle' }, // BMI Calculator
    { index: 2, category: 'Finance' },       // SIP Calculator
    { index: 3, category: 'Finance' },       // Loan EMI Calculator
    { index: 4, category: 'Health & Lifestyle' }, // Calorie Calculator
    { index: 5, category: 'Finance' },       // Home Loan Calculator
    { index: 6, category: 'Health & Lifestyle' }, // Pregnancy Calculator
    { index: 7, category: 'Finance' },       // FD Calculator
    { index: 8, category: 'AI Tools' },      // AI Investment Predictor
    { index: 9, category: 'Fun' },           // Random Number Generator
    { index: 10, category: 'India-Specific' }, // GST Calculator
    { index: 11, category: 'Global' },       // Time Zone Converter
    { index: 12, category: 'Global' }        // Percentage Calculator
];

// Add data-category attributes to cards
calculatorCards.forEach((card, index) => {
    const category = cardCategories.find(c => c.index === index)?.category || 'Global';
    card.setAttribute('data-category', category);
});

// Function to display cards based on category and page
function displayCards(category, page) {
    const start = (page - 1) * cardsPerPage;
    const end = start + cardsPerPage;
    let visibleCount = 0;

    calculatorCards.forEach(card => {
        const cardCategory = card.getAttribute('data-category');
        if (category === 'All' || cardCategory === category) {
            if (visibleCount >= start && visibleCount < end) {
                card.style.display = 'block';
            } else {
                card.style.display = 'none';
            }
            visibleCount++;
        } else {
            card.style.display = 'none';
        }
    });

    // Show or hide Load More button
    const totalCards = category === 'All' 
        ? calculatorCards.length 
        : Array.from(calculatorCards).filter(card => card.getAttribute('data-category') === category).length;
    loadMoreButton.style.display = end >= totalCards ? 'none' : 'block';
}

// Filter button event listeners
filterButtons.forEach(button => {
    button.addEventListener('click', () => {
        // Update active button
        document.querySelector('.filters button.active').classList.remove('active');
        button.classList.add('active');

        // Reset to first page and update category
        currentPage = 1;
        currentCategory = button.textContent;
        displayCards(currentCategory, currentPage);
    });
});

// Load More button event listener
loadMoreButton.addEventListener('click', () => {
    currentPage++;
    displayCards(currentCategory, currentPage);
});

// Initial display
displayCards(currentCategory, currentPage);
```onsole.log( 'Code is Poetry' );