← Kapat

water-calculator.js

// Global variables for external access
let selectedSpecialConditions = [];

document.addEventListener('DOMContentLoaded', function() {
    // Current values
    let currentWeight = 70;
    let currentActivityMultiplier = 1.2;
    let currentClimateMultiplier = 1;
    
    // Elements
    const weightSlider = document.getElementById('water-weightSlider');
    const weightInput = document.getElementById('water-weightInput');
    const weightTrack = document.getElementById('weightTrack');
    const weightFill = document.getElementById('weightFill');
    const weightThumb = document.getElementById('weightThumb');
    
    // Result elements
    const waterAmount = document.getElementById('water-amount');
    const factorWeight = document.getElementById('factor-weight');
    const factorActivity = document.getElementById('factor-activity');
    const factorClimate = document.getElementById('factor-climate');
    const factorSpecial = document.getElementById('factor-special');
    
    // Activity buttons
    const activityButtons = document.querySelectorAll('.wt-activity-btn');
    const climateButtons = document.querySelectorAll('.wt-climate-btn');
    const specialButtons = document.querySelectorAll('.wt-special-btn');
    
    // Initialize
    init();
    
    function init() {
        setupEventListeners();
        updateSliderAppearance();
        calculateWaterNeeds();
    }
    
    function setupEventListeners() {
        // Weight slider
        weightSlider.addEventListener('input', function() {
            currentWeight = parseInt(this.value);
            weightInput.value = currentWeight;
            updateSliderAppearance();
            calculateWaterNeeds();
        });
        
        // Weight input
        weightInput.addEventListener('input', function() {
            let value = parseInt(this.value);
            if (value >= 40 && value <= 200) {
                currentWeight = value;
                weightSlider.value = currentWeight;
                updateSliderAppearance();
                calculateWaterNeeds();
            }
        });
        
        // Activity buttons
        activityButtons.forEach(button => {
            button.addEventListener('click', function() {
                activityButtons.forEach(btn => {
                    btn.classList.remove('active');
                    btn.style.border = '2px solid rgba(59, 130, 246, 0.2)';
                    btn.style.background = 'rgba(59, 130, 246, 0.05)';
                });
                
                this.classList.add('active');
                this.style.border = '2px solid #3B82F6';
                this.style.background = 'rgba(59, 130, 246, 0.2)';
                
                currentActivityMultiplier = parseFloat(this.dataset.multiplier);
                calculateWaterNeeds();
            });
        });
        
        // Climate buttons
        climateButtons.forEach(button => {
            button.addEventListener('click', function() {
                climateButtons.forEach(btn => {
                    btn.classList.remove('active');
                    btn.style.border = '2px solid rgba(59, 130, 246, 0.2)';
                    btn.style.background = 'rgba(59, 130, 246, 0.05)';
                });
                
                this.classList.add('active');
                this.style.border = '2px solid #3B82F6';
                this.style.background = 'rgba(59, 130, 246, 0.2)';
                
                currentClimateMultiplier = parseFloat(this.dataset.multiplier);
                calculateWaterNeeds();
            });
        });
        
        // Special condition buttons
        specialButtons.forEach(button => {
            button.addEventListener('click', function() {
                const condition = this.dataset.condition;
                
                if (this.classList.contains('active')) {
                    // Remove from selected conditions
                    this.classList.remove('active');
                    this.style.border = '2px solid rgba(59, 130, 246, 0.2)';
                    this.style.background = 'rgba(59, 130, 246, 0.05)';
                    
                    const index = selectedSpecialConditions.indexOf(condition);
                    if (index > -1) {
                        selectedSpecialConditions.splice(index, 1);
                    }
                } else {
                    // Add to selected conditions
                    this.classList.add('active');
                    this.style.border = '2px solid #3B82F6';
                    this.style.background = 'rgba(59, 130, 246, 0.2)';
                    
                    if (!selectedSpecialConditions.includes(condition)) {
                        selectedSpecialConditions.push(condition);
                    }
                }
                calculateWaterNeeds();
            });
        });
    }
    
    function updateSliderAppearance() {
        const min = parseInt(weightSlider.min);
        const max = parseInt(weightSlider.max);
        const value = parseInt(weightSlider.value);
        
        const percentage = ((value - min) / (max - min)) * 100;
        
        // Update fill
        weightFill.style.width = percentage + '%';
        
        // Update thumb position
        weightThumb.style.left = percentage + '%';
    }
    
    function calculateWaterNeeds() {
        // Base calculation: 33ml per kg body weight
        const baseWater = currentWeight * 33;
        
        // Calculate special conditions multiplier
        // Each condition adds 0.2 (20%) to the base multiplier of 1
        let specialMultiplier = 1;
        if (selectedSpecialConditions.length > 0) {
            specialMultiplier = 1 + (selectedSpecialConditions.length * 0.2);
        }
        
        // Apply multipliers
        const totalWater = Math.round(baseWater * currentActivityMultiplier * currentClimateMultiplier * specialMultiplier);
        
        // Update display
        waterAmount.textContent = totalWater;
        factorWeight.textContent = currentWeight + ' kg';
        factorActivity.textContent = 'x ' + currentActivityMultiplier;
        
        // Update climate text
        const climateText = getClimateText(currentClimateMultiplier);
        factorClimate.textContent = climateText;
        
        // Update special condition text
        const specialText = selectedSpecialConditions.length > 0 ? selectedSpecialConditions.join(', ') : 'Normal';
        factorSpecial.textContent = specialText;
        
        // Add animation to result
        waterAmount.style.transform = 'scale(1.1)';
        setTimeout(() => {
            waterAmount.style.transform = 'scale(1)';
        }, 200);
    }
    
    function getClimateText(multiplier) {
        switch(multiplier) {
            case 1: return 'Normal';
            case 1.2: return 'Sıcak';
            case 1.4: return 'Çok Sıcak';
            default: return 'Normal';
        }
    }
    
    function getSpecialText() {
        return selectedSpecialConditions.length > 0 ? selectedSpecialConditions.join(', ') : 'Normal';
    }
    
    // Smooth transitions for slider
    weightSlider.addEventListener('mousedown', function() {
        weightFill.style.transition = 'none';
        weightThumb.style.transition = 'none';
    });
    
    weightSlider.addEventListener('mouseup', function() {
        weightFill.style.transition = 'width 0.2s ease';
        weightThumb.style.transition = 'left 0.2s ease';
    });
});

// Public functions for external use
window.getCurrentWaterNeeds = function() {
    const baseWater = parseInt(document.getElementById('weightInput').value) * 33;
    const activityMultiplier = parseFloat(document.querySelector('.wt-activity-btn.active').dataset.multiplier);
    const climateMultiplier = parseFloat(document.querySelector('.wt-climate-btn.active').dataset.multiplier);
    const specialConditionsCount = document.querySelectorAll('.wt-special-btn.active').length;
    const specialMultiplier = specialConditionsCount > 0 ? 1 + (specialConditionsCount * 0.2) : 1;
    
    return Math.round(baseWater * activityMultiplier * climateMultiplier * specialMultiplier);
};

window.getWaterFactors = function() {
    const specialConditionsCount = document.querySelectorAll('.wt-special-btn.active').length;
    const specialMultiplier = specialConditionsCount > 0 ? 1 + (specialConditionsCount * 0.2) : 1;
    
    return {
        weight: parseInt(document.getElementById('weightInput').value),
        activity: parseFloat(document.querySelector('.wt-activity-btn.active').dataset.multiplier),
        climate: parseFloat(document.querySelector('.wt-climate-btn.active').dataset.multiplier),
        special: specialMultiplier,
        specialConditions: selectedSpecialConditions
    };
};